feat(FileUploader): support button variants and container sizes (#5614)

carbon-design-system · Mar 17, 2020 · 5c2bf2a · 5c2bf2a
1 parent 1c0011e
commit 5c2bf2a
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 34 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -159,6 +159,14 @@
     }
   }
 
+  .#{$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
@@ -2324,6 +2324,16 @@ Map {
       "onClick": Object {
         "type": "func",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "default",
+            "field",
+            "small",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "Filename" => Object {
@@ -2419,6 +2429,16 @@ 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
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "carbon-components": "^10.1.0",
-    "carbon-components-react": "^7.0.0",
-    "carbon-icons": "^7.0.7",
+    "carbon-components": "latest",
+    "carbon-components-react": "latest",
+    "carbon-icons": "latest",
     "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
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "carbon-components": "10.7.0",
-    "carbon-components-react": "7.7.0",
+    "carbon-components": "latest",
+    "carbon-components-react": "latest",
     "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
@@ -97,7 +97,7 @@ function ExampleDropContainerApp(props) {
       const newFiles = addedFiles.map(file => ({
         uuid: uid(),
         name: file.name,
-        size: file.size,
+        filesize: file.size,
         status: 'uploading',
         iconDescription: 'Uploading',
       }));
@@ -122,12 +122,21 @@ function ExampleDropContainerApp(props) {
       <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
       <div className="uploaded-files" style={{ width: '100%' }}>
         {files.map(
-          ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
+          ({
+            uuid,
+            name,
+            filesize,
+            status,
+            iconDescription,
+            invalid,
+            ...rest
+          }) => (
             <FileUploaderItem
               key={uid()}
               uuid={uuid}
               name={name}
-              size={size}
+              filesize={filesize}
+              size="default"
               status={status}
               iconDescription={iconDescription}
               invalid={invalid}

diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -33,7 +33,11 @@ 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',
@@ -50,6 +54,7 @@ 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
@@ -59,26 +64,38 @@ const props = {
       onChange: action('onChange'),
     };
   },
-  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'
-    ),
-  }),
+  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'
+      ),
+    };
+  },
   fileUploaderItem: () => ({
     name: text('Filename (name)', 'README.md'),
     status: select('Status for file name (status)', filenameStatuses, 'edit'),
@@ -98,6 +115,7 @@ 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
@@ -99,6 +99,12 @@ 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 = {
@@ -149,11 +155,14 @@ 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();
@@ -313,6 +322,12 @@ 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 = {
@@ -382,6 +397,7 @@ export default class FileUploader extends Component {
       multiple,
       accept,
       name,
+      size,
       ...other
     } = this.props;
 
@@ -390,6 +406,11 @@ 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>
@@ -402,14 +423,15 @@ 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={`${prefix}--file__selected-file`}
+                  className={selectedFileClasses}
                   ref={node => (this.nodes[index] = node)} // eslint-disable-line
                   {...other}>
                   <p className={`${prefix}--file-filename`}>{name}</p>

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js
@@ -24,10 +24,13 @@ 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}>

diff --git 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,
-        size: file.size,
+        filesize: file.size,
         status: 'uploading',
         iconDescription: 'Uploading',
       }));
@@ -93,14 +93,23 @@ function ExampleDropContainerApp(props) {
         Only .jpg and .png files. 500kb max file size
       </p>
       <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
-      <div className={`${prefix}--file-container`}>
+      <div className={`${prefix}--file-container`} style={{ width: '100%' }}>
         {files.map(
-          ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
+          ({
+            uuid,
+            name,
+            filesize,
+            status,
+            iconDescription,
+            invalid,
+            ...rest
+          }) => (
             <FileUploaderItem
               key={uid()}
               uuid={uuid}
               name={name}
-              size={size}
+              filesize={filesize}
+              size={props.size}
               status={status}
               iconDescription={iconDescription}
               invalid={invalid}