diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss index 4afdb1ccf0ac..46a1d29ae426 100644 --- a/packages/components/src/components/file-uploader/_file-uploader.scss +++ b/packages/components/src/components/file-uploader/_file-uploader.scss @@ -159,14 +159,6 @@ } } - .#{$prefix}--file__selected-file--field { - min-height: rem(40px); - } - - .#{$prefix}--file__selected-file--sm { - min-height: rem(32px); - } - // TODO: deprecate this block .#{$prefix}--file__selected-file--invalid__wrapper { @include focus-outline('invalid'); diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 17a592d4524c..9d34499556f5 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2324,16 +2324,6 @@ Map { "onClick": Object { "type": "func", }, - "size": Object { - "args": Array [ - Array [ - "default", - "field", - "small", - ], - ], - "type": "oneOf", - }, }, }, "Filename" => Object { @@ -2429,16 +2419,6 @@ Map { "role": Object { "type": "string", }, - "size": Object { - "args": Array [ - Array [ - "default", - "field", - "small", - ], - ], - "type": "oneOf", - }, "tabIndex": Object { "type": "number", }, diff --git a/packages/react/examples/codesandbox/package.json b/packages/react/examples/codesandbox/package.json index 3bae49a5f9d6..81a4450e4407 100644 --- a/packages/react/examples/codesandbox/package.json +++ b/packages/react/examples/codesandbox/package.json @@ -3,9 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { - "carbon-components": "latest", - "carbon-components-react": "latest", - "carbon-icons": "latest", + "carbon-components": "^10.1.0", + "carbon-components-react": "^7.0.0", + "carbon-icons": "^7.0.7", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "2.1.8" diff --git a/packages/react/examples/drag-and-drop-file-uploader/package.json b/packages/react/examples/drag-and-drop-file-uploader/package.json index e5d5f16662ff..48429ebe031b 100644 --- a/packages/react/examples/drag-and-drop-file-uploader/package.json +++ b/packages/react/examples/drag-and-drop-file-uploader/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "carbon-components": "latest", - "carbon-components-react": "latest", + "carbon-components": "10.7.0", + "carbon-components-react": "7.7.0", "react": "16.10.2", "react-dom": "16.10.2", "react-scripts": "3.2.0" diff --git a/packages/react/examples/drag-and-drop-file-uploader/src/index.js b/packages/react/examples/drag-and-drop-file-uploader/src/index.js index 9d1eae7470f3..f6e452faef60 100644 --- a/packages/react/examples/drag-and-drop-file-uploader/src/index.js +++ b/packages/react/examples/drag-and-drop-file-uploader/src/index.js @@ -97,7 +97,7 @@ function ExampleDropContainerApp(props) { const newFiles = addedFiles.map(file => ({ uuid: uid(), name: file.name, - filesize: file.size, + size: file.size, status: 'uploading', iconDescription: 'Uploading', })); @@ -122,21 +122,12 @@ function ExampleDropContainerApp(props) {
{files.map( - ({ - uuid, - name, - filesize, - status, - iconDescription, - invalid, - ...rest - }) => ( + ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => ( { - const buttonKind = select( - 'Button kind (buttonKind)', - { - 'Primary (primary)': 'primary', - 'Tertiary (tertiary)': 'tertiary', - }, - '' - ); - return { - labelTitle: text('The label title (labelTitle)', 'Upload'), - labelDescription: text( - 'The label description (labelDescription)', - 'only .jpg files at 500mb or less' - ), - buttonLabel: text('The button label (buttonLabel)', 'Add files'), - buttonKind: buttonKind || 'primary', - size: select('Button size (size)', sizes, 'default'), - filenameStatus: select( - 'Status for file name (filenameStatus)', - filenameStatuses, - 'edit' - ), - accept: array('Accepted file extensions (accept)', ['.jpg', '.png'], ','), - name: text('Form item name: (name)', ''), - multiple: boolean('Supports multiple files (multiple)', true), - iconDescription: text( - 'Close button icon description (iconDescription)', - 'Clear file' - ), - }; - }, + fileUploader: () => ({ + labelTitle: text('The label title (labelTitle)', 'Upload'), + labelDescription: text( + 'The label description (labelDescription)', + 'only .jpg files at 500mb or less' + ), + buttonLabel: text('The button label (buttonLabel)', 'Add files'), + filenameStatus: select( + 'Status for file name (filenameStatus)', + filenameStatuses, + 'edit' + ), + accept: array('Accepted file extensions (accept)', ['.jpg', '.png'], ','), + name: text('Form item name: (name)', ''), + multiple: boolean('Supports multiple files (multiple)', true), + iconDescription: text( + 'Close button icon description (iconDescription)', + 'Clear file' + ), + }), fileUploaderItem: () => ({ name: text('Filename (name)', 'README.md'), status: select('Status for file name (status)', filenameStatuses, 'edit'), @@ -115,7 +98,6 @@ const props = { ), }), fileUploaderDropContainer: () => ({ - size: select('Filename height (size)', sizes, 'default'), labelText: text( 'Label text (labelText)', 'Drag and drop files here or click to upload' diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js index ea83632a1812..5afb25b73b50 100644 --- a/packages/react/src/components/FileUploader/FileUploader.js +++ b/packages/react/src/components/FileUploader/FileUploader.js @@ -99,12 +99,6 @@ export class FileUploaderButton extends Component { * Specify whether file input is disabled */ disabled: PropTypes.bool, - - /** - * Specify the size of the button, from a list of available sizes. - * For `default` buttons, this prop can remain unspecified. - */ - size: PropTypes.oneOf(['default', 'field', 'small']), }; static defaultProps = { @@ -155,14 +149,11 @@ export class FileUploaderButton extends Component { accept, name, disabled, - size, ...other } = this.props; const classes = classNames(`${prefix}--btn`, className, { [`${prefix}--btn--${buttonKind}`]: buttonKind, [`${prefix}--btn--disabled`]: disabled, - [`${prefix}--btn--field`]: size === 'field', - [`${prefix}--btn--sm`]: size === 'small', }); this.uid = this.props.id || uid(); @@ -322,12 +313,6 @@ export default class FileUploader extends Component { * Specify the types of files that this input should be able to receive */ accept: PropTypes.arrayOf(PropTypes.string), - - /** - * Specify the size of the FileUploaderButton, from a list of available - * sizes. For `default` buttons, this prop can remain unspecified. - */ - size: PropTypes.oneOf(['default', 'field', 'small']), }; static defaultProps = { @@ -397,7 +382,6 @@ export default class FileUploader extends Component { multiple, accept, name, - size, ...other } = this.props; @@ -406,11 +390,6 @@ export default class FileUploader extends Component { [className]: className, }); - const selectedFileClasses = classNames(`${prefix}--file__selected-file`, { - [`${prefix}--file__selected-file--field`]: size === 'field', - [`${prefix}--file__selected-file--sm`]: size === 'small', - }); - return (
{labelTitle} @@ -423,7 +402,6 @@ export default class FileUploader extends Component { disableLabelChanges accept={accept} name={name} - size={size} />
{this.state.filenames.length === 0 @@ -431,7 +409,7 @@ export default class FileUploader extends Component { : this.state.filenames.map((name, index) => ( (this.nodes[index] = node)} // eslint-disable-line {...other}>

{name}

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js index c74aba9b3aae..099ca41a5717 100644 --- a/packages/react/src/components/FileUploader/FileUploaderItem.js +++ b/packages/react/src/components/FileUploader/FileUploaderItem.js @@ -24,13 +24,10 @@ export default function FileUploaderItem({ invalid, errorSubject, errorBody, - size, ...other }) { const classes = classNames(`${prefix}--file__selected-file`, { [`${prefix}--file__selected-file--invalid`]: invalid, - [`${prefix}--file__selected-file--field`]: size === 'field', - [`${prefix}--file__selected-file--sm`]: size === 'small', }); return ( diff --git a/packages/react/src/components/FileUploader/stories/drop-container.js b/packages/react/src/components/FileUploader/stories/drop-container.js index d4c6b03f906f..bb5f5e717d66 100644 --- a/packages/react/src/components/FileUploader/stories/drop-container.js +++ b/packages/react/src/components/FileUploader/stories/drop-container.js @@ -70,7 +70,7 @@ function ExampleDropContainerApp(props) { const newFiles = addedFiles.map(file => ({ uuid: uid(), name: file.name, - filesize: file.size, + size: file.size, status: 'uploading', iconDescription: 'Uploading', })); @@ -93,23 +93,14 @@ function ExampleDropContainerApp(props) { Only .jpg and .png files. 500kb max file size

-
+
{files.map( - ({ - uuid, - name, - filesize, - status, - iconDescription, - invalid, - ...rest - }) => ( + ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (