feat(react): added disabled prop to file uploader (#10613)

* feat(react): added disabled prop to file uploader * test(react): updated FileUploader snapshot * chore(fileuploader): add disabled prop arg control to v11 storybook Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Lauren Rice <[email protected]>
carbon-design-system · Feb 10, 2022 · 7310215 · 7310215
1 parent dcc8563
commit 7310215
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2584,6 +2584,7 @@ Map {
       "accept": Array [],
       "buttonKind": "primary",
       "buttonLabel": "",
+      "disabled": false,
       "filenameStatus": "uploading",
       "iconDescription": "Provide icon description",
       "multiple": false,
@@ -2619,6 +2620,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "filenameStatus": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -87,6 +87,7 @@ const props = {
       ),
       buttonLabel: text('The button label (buttonLabel)', 'Add file'),
       buttonKind: buttonKind || 'primary',
+      disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
       filenameStatus: select(
         'Status for file name (filenameStatus)',

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -38,6 +38,11 @@ export default class FileUploader extends React.Component {
      */
     className: PropTypes.string,
 
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled: PropTypes.bool,
+
     /**
      * Specify the status of the File Upload
      */
@@ -100,6 +105,7 @@ export default class FileUploader extends React.Component {
   static contextType = PrefixContext;
 
   static defaultProps = {
+    disabled: false,
     iconDescription: FeatureFlags.enabled('enable-v11-release')
       ? undefined
       : 'Provide icon description',
@@ -167,6 +173,7 @@ export default class FileUploader extends React.Component {
       iconDescription,
       buttonLabel,
       buttonKind,
+      disabled,
       filenameStatus,
       labelDescription,
       labelTitle,
@@ -186,6 +193,11 @@ export default class FileUploader extends React.Component {
       [className]: className,
     });
 
+    const getHelperLabelClasses = (baseClass) =>
+      classNames(baseClass, {
+        [`${prefix}--label-description--disabled`]: disabled,
+      });
+
     const selectedFileClasses = classNames(`${prefix}--file__selected-file`, {
       [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
       [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm',
@@ -194,10 +206,15 @@ export default class FileUploader extends React.Component {
     return (
       <div className={classes} {...other}>
         {FeatureFlags.enabled('enable-v11-release') && !labelTitle ? null : (
-          <p className={`${prefix}--file--label`}>{labelTitle}</p>
+          <p className={getHelperLabelClasses(`${prefix}--file--label`)}>
+            {labelTitle}
+          </p>
         )}
-        <p className={`${prefix}--label-description`}>{labelDescription}</p>
+        <p className={getHelperLabelClasses(`${prefix}--label-description`)}>
+          {labelDescription}
+        </p>
         <FileUploaderButton
+          disabled={disabled}
           labelText={buttonLabel}
           multiple={multiple}
           buttonKind={buttonKind}

diff --git a/packages/react/src/components/FileUploader/next/FileUploader.stories.js b/packages/react/src/components/FileUploader/next/FileUploader.stories.js
@@ -56,6 +56,7 @@ _FileUploader.args = {
   accept: ['.jpg', '.png'],
   name: '',
   multiple: true,
+  disabled: false,
   iconDescription: 'Clear file',
 };
 _FileUploader.argTypes = {