feat(FileUploader): FileUploader size prop update (#8462)

* feat(Button): start size work on Button

* feat(Button): finish size prop update

* feat(Button): revert xl, 2xl changes

* feat(Button): add xl, 2xl updates behind feature flag

* feat(FileUploader): update size prop

* chore(storybook): remove old story

* test(snapshot): update snapshot tests

* test(snapshot): remove snapshot from different pr

* chore(tests): update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/file-uploader/_file-uploader.scss

@@ -162,7 +162,9 @@
     }
   }
 
-  .#{$prefix}--file__selected-file--field {
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--field,
+  .#{$prefix}--file__selected-file--md {
     min-height: rem(40px);
     gap: $carbon--spacing-03 $carbon--spacing-05;
   }
@@ -192,7 +194,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;
   }
 
@@ -206,7 +210,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);
   }

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2633,6 +2633,9 @@ Map {
             "default",
             "field",
             "small",
+            "sm",
+            "md",
+            "lg",
           ],
         ],
         "type": "oneOf",
@@ -2731,6 +2734,9 @@ Map {
             "default",
             "field",
             "small",
+            "sm",
+            "md",
+            "lg",
           ],
         ],
         "type": "oneOf",
@@ -2788,6 +2794,9 @@ Map {
             "default",
             "field",
             "small",
+            "sm",
+            "md",
+            "lg",
           ],
         ],
         "type": "oneOf",
@@ -2827,6 +2836,9 @@ Map {
             "default",
             "field",
             "small",
+            "sm",
+            "md",
+            "lg",
           ],
         ],
         "type": "oneOf",

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',

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 (

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>

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>

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