feat(FileUploader): update size prop

carbon-design-system · Apr 20, 2021 · 2ea7806 · 2ea7806
1 parent 04e086e
commit 2ea7806
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 19 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -168,7 +168,9 @@
     }
   }
 
-  .#{$prefix}--file__selected-file--field {
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--field,
+  .#{$prefix}--file__selected-file--md {
     gap: $carbon--spacing-03 $carbon--spacing-05;
     min-height: rem(40px);
   }
@@ -198,7 +200,9 @@
     padding: $carbon--spacing-02 0;
   }
 
-  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field {
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field,
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md {
     padding: $carbon--spacing-03 0;
   }
 
@@ -212,7 +216,10 @@
     padding-top: rem(7px);
   }
 
+  // V11: Remove --field
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md
     .#{$prefix}--form-requirement {
     padding-top: rem(11px);
   }

diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -34,11 +34,16 @@ const buttonKinds = {
   'Danger Primary (danger--primary)': 'danger--primary',
   'Tertiary (tertiary)': 'tertiary',
 };
+
 const sizes = {
-  Default: 'default',
-  Field: 'field',
-  Small: 'small',
+  'Compat check - Field': 'field',
+  'Compat check - Small': 'small',
+  'Compat check - default': 'default',
+  'Small  (sm)': 'sm',
+  'Medium (md)': 'md',
+  'Large (lg) - Default': 'lg',
 };
+
 const filenameStatuses = {
   'Edit (edit)': 'edit',
   'Complete (complete)': 'complete',

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -91,8 +91,9 @@ export default class FileUploader extends React.Component {
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes. For `default` buttons, this prop can remain unspecified.
+     * V11: `default`, `field`, and `small` will be removed
      */
-    size: PropTypes.oneOf(['default', 'field', 'small']),
+    size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
   };
 
   static defaultProps = {
@@ -179,8 +180,8 @@ export default class FileUploader extends React.Component {
     });
 
     const selectedFileClasses = classNames(`${prefix}--file__selected-file`, {
-      [`${prefix}--file__selected-file--field`]: size === 'field',
-      [`${prefix}--file__selected-file--sm`]: size === 'small',
+      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm',
     });
 
     return (

diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.js
@@ -40,8 +40,9 @@ function FileUploaderButton({
   const classes = cx(`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,
     [`${prefix}--btn--disabled`]: disabled,
-    [`${prefix}--btn--field`]: size === 'field',
-    [`${prefix}--btn--sm`]: size === 'small',
+    // V11: remove field, small
+    [`${prefix}--btn--md`]: size === 'field' || size === 'md',
+    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
   });
 
   // Adjust label text state based on changes to the labelText prop
@@ -174,10 +175,11 @@ FileUploaderButton.propTypes = {
   role: PropTypes.string,
 
   /**
-   * Specify the size of the button, from a list of available sizes.
-   * For `default` buttons, this prop can remain unspecified.
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes. For `default` buttons, this prop can remain unspecified.
+   * V11: `default`, `field`, and `small` will be removed
    */
-  size: PropTypes.oneOf(['default', 'field', 'small']),
+  size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
 
   /**
    * Provide a custom tabIndex value for the <FileUploaderButton>

diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js
@@ -186,9 +186,10 @@ FileUploaderDropContainer.propTypes = {
 
   /**
    * Specify the size of the uploaded items, from a list of available
-   * sizes. For `default` size, this prop can remain unspecified.
+   * sizes. For `default` buttons, this prop can remain unspecified.
+   * V11: `default`, `field`, and `small` will be removed
    */
-  size: PropTypes.oneOf(['default', 'field', 'small']),
+  size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
 
   /**
    * Provide a custom tabIndex value for the <FileUploaderButton>

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js
@@ -30,8 +30,8 @@ function FileUploaderItem({
   const { current: id } = useRef(uuid || uid());
   const classes = cx(`${prefix}--file__selected-file`, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
-    [`${prefix}--file__selected-file--field`]: size === 'field',
-    [`${prefix}--file__selected-file--sm`]: size === 'small',
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm',
   });
   return (
     <span className={classes} {...other}>
@@ -107,9 +107,10 @@ FileUploaderItem.propTypes = {
 
   /**
    * Specify the size of the uploaded items, from a list of available
-   * sizes. For `default` size, this prop can remain unspecified.
+   * sizes. For `default` buttons, this prop can remain unspecified.
+   * V11: `default`, `field`, and `small` will be removed
    */
-  size: PropTypes.oneOf(['default', 'field', 'small']),
+  size: PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
 
   /**
    * Status of the file upload