Revert "feat(FileUploader): support button variants and container siz…

…es (carbon-design-system#5614)"

This reverts commit 29d4c46.

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');

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",
       },

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"

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"

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) {
       <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
       <div className="uploaded-files" style={{ width: '100%' }}>
         {files.map(
-          ({
-            uuid,
-            name,
-            filesize,
-            status,
-            iconDescription,
-            invalid,
-            ...rest
-          }) => (
+          ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
             <FileUploaderItem
               key={uid()}
               uuid={uuid}
               name={name}
-              filesize={filesize}
-              size="default"
+              size={size}
               status={status}
               iconDescription={iconDescription}
               invalid={invalid}

packages/react/src/components/FileUploader/FileUploader-story.js

@@ -33,11 +33,7 @@ const buttonKinds = {
   'Danger Primary (danger--primary)': 'danger--primary',
   'Tertiary (tertiary)': 'tertiary',
 };
-const sizes = {
-  Default: 'default',
-  Field: 'field',
-  Small: 'small',
-};
+
 const filenameStatuses = {
   'Edit (edit)': 'edit',
   'Complete (complete)': 'complete',
@@ -54,7 +50,6 @@ const props = {
       multiple: boolean('Supports multiple files (multiple)', true),
       disabled: boolean('Disabled (disabled)', false),
       buttonKind: buttonKind || 'primary',
-      size: select('Button size (size)', sizes, 'default'),
       disableLabelChanges: boolean(
         'Prevent the label from being replaced with file selected file (disableLabelChanges)',
         false
@@ -64,38 +59,26 @@ const props = {
       onChange: action('onChange'),
     };
   },
-  fileUploader: () => {
-    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'

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 (
       <div className={classes} {...other}>
         <strong className={`${prefix}--file--label`}>{labelTitle}</strong>
@@ -423,15 +402,14 @@ export default class FileUploader extends Component {
           disableLabelChanges
           accept={accept}
           name={name}
-          size={size}
         />
         <div className={`${prefix}--file-container`}>
           {this.state.filenames.length === 0
             ? null
             : this.state.filenames.map((name, index) => (
                 <span
                   key={index}
-                  className={selectedFileClasses}
+                  className={`${prefix}--file__selected-file`}
                   ref={node => (this.nodes[index] = node)} // eslint-disable-line
                   {...other}>
                   <p className={`${prefix}--file-filename`}>{name}</p>

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 (
     <span className={classes} {...other}>

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
       </p>
       <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
-      <div className={`${prefix}--file-container`} style={{ width: '100%' }}>
+      <div className={`${prefix}--file-container`}>
         {files.map(
-          ({
-            uuid,
-            name,
-            filesize,
-            status,
-            iconDescription,
-            invalid,
-            ...rest
-          }) => (
+          ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
             <FileUploaderItem
               key={uid()}
               uuid={uuid}
               name={name}
-              filesize={filesize}
-              size={props.size}
+              size={size}
               status={status}
               iconDescription={iconDescription}
               invalid={invalid}