feat(file-uploader): sync with @carbon/react v11 (carbon-design-syste…

…m#10393)
kennylam · Apr 26, 2023 · 0a29746 · 0a29746
1 parent abd185c
commit 0a29746
Show file tree

Hide file tree

Showing 18 changed files with 654 additions and 240 deletions.
diff --git a/...ckages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html b/...ckages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html
@@ -22,13 +22,13 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/file-uploader.min.js"></script>
 </head>
 <body>
-  <cds-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
-    <cds-file-drop-container
-      accept="image/jpeg image/png"
-      multiple="true"
-    >
-      Drag and drop files here or click to upload
-    </cds-file-drop-container>
-  </cds-file-uploader>
+  <cds-file-uploader
+  label-description="Only .jpg and .png files. 500kb max file size"
+  label-title="Account photo"
+>
+  <cds-file-uploader-button accept="image/jpeg image/png" multiple>
+    Drag and drop files here or click to upload
+  </cds-file-drop-container>
+</cds-file-uploader>
 </body>
 </html>
diff --git a/...ages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html b/...ages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html
@@ -22,11 +22,11 @@
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <cds-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
-    <cds-file-drop-container
-      accept="image/jpeg image/png"
-      multiple="true"
-    >
+  <cds-file-uploader
+    label-description="Only .jpg and .png files. 500kb max file size"
+    label-title="Account photo"
+  >
+    <cds-file-uploader-button accept="image/jpeg image/png" multiple>
       Drag and drop files here or click to upload
     </cds-file-drop-container>
   </cds-file-uploader>

diff --git a/web-components/packages/carbon-web-components/src/components/button/defs.ts b/web-components/packages/carbon-web-components/src/components/button/defs.ts
@@ -36,6 +36,11 @@ export enum BUTTON_KIND {
    */
   DANGER = 'danger',
 
+  /**
+   * Danger primary button.
+   */
+  DANGER_PRIMARY = 'danger-primary',
+
   /**
    * Danger tertiary button.
    */

diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/defs.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/defs.ts
@@ -19,36 +19,30 @@ export enum FILE_UPLOADER_ITEM_STATE {
   /**
    * Upload complete.
    */
-  UPLOADED = 'uploaded',
+  COMPLETE = 'complete',
 
   /**
    * Editing.
    */
-  EDITING = 'editing',
+  EDIT = 'edit',
 }
 
 /**
  * File uploader item size.
  */
 export enum FILE_UPLOADER_ITEM_SIZE {
-  /**
-   * Regular size.
-   */
-  REGULAR = '',
-
   /**
    * Small size.
    */
   SMALL = 'sm',
 
   /**
-   * Large size.
+   * Medium size.
    */
-  LARGE = 'lg',
+  MEDIUM = 'md',
 
-  // TODO: deprecate
   /**
-   * Size for form field.
+   * Large size.
    */
-  FIELD = 'field',
+  LARGE = 'lg',
 }
diff --git a/...ponents/packages/carbon-web-components/src/components/file-uploader/demo-file-uploader.ts b/...ponents/packages/carbon-web-components/src/components/file-uploader/demo-file-uploader.ts
@@ -12,12 +12,9 @@ import { html, property, LitElement, customElement } from 'lit-element';
 import { delay } from 'bluebird';
 import { prefix } from '../../globals/settings';
 import { ifDefined } from 'lit/directives/if-defined';
-import './file-uploader';
-import './drop-container';
-import {
-  FILE_UPLOADER_ITEM_SIZE,
-  FILE_UPLOADER_ITEM_STATE,
-} from './file-uploader-item';
+import './index';
+import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';
+import { BUTTON_SIZE } from '../button/button';
 import { FileData } from './stories/types';
 
 /**
@@ -28,7 +25,7 @@ import { FileData } from './stories/types';
  * vs. letting users copy code here and implement features that fit their needs.
  */
 @customElement(`${prefix}-ce-demo-file-uploader`)
-export default class BXCEDemoFileUploader extends LitElement {
+export default class CDSCEDemoFileUploader extends LitElement {
   /**
    * The files being uploaded.
    */
@@ -85,10 +82,10 @@ export default class BXCEDemoFileUploader extends LitElement {
           ? item
           : {
               ...item,
-              state: FILE_UPLOADER_ITEM_STATE.EDITING,
+              state: FILE_UPLOADER_ITEM_STATE.EDIT,
               invalid: true,
-              validityMessage: 'File size exceeds limit',
-              supplementalValidityMessage:
+              errorSubject: 'File size exceeds limit',
+              errorBody:
                 '500kb max file size. Select a new file and try again.',
             }
       );
@@ -102,7 +99,7 @@ export default class BXCEDemoFileUploader extends LitElement {
           ? item
           : {
               ...item,
-              state: FILE_UPLOADER_ITEM_STATE.UPLOADED,
+              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,
             }
       );
       this.requestUpdate();
@@ -113,7 +110,7 @@ export default class BXCEDemoFileUploader extends LitElement {
           ? item
           : {
               ...item,
-              state: FILE_UPLOADER_ITEM_STATE.EDITING,
+              state: FILE_UPLOADER_ITEM_STATE.EDIT,
             }
       );
       this.requestUpdate();
@@ -126,23 +123,53 @@ export default class BXCEDemoFileUploader extends LitElement {
   @property()
   accept = '';
 
+  /**
+   * `true` if the drop container should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  button = false;
+
+  /**
+   * Button kind.
+   */
+  @property({ attribute: 'button-kind' })
+  buttonKind = 'primary';
+
+  /**
+   * Button label.
+   */
+  @property({ attribute: 'button-label' })
+  buttonLabel = 'Add file';
+
   /**
    * `true` if the drop container should be disabled.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
   /**
-   * The helper text.
+   * Icon description.
    */
-  @property({ attribute: 'helper-text' })
-  helperText = '';
+  @property({ attribute: 'icon-description' })
+  iconDescription = '';
 
   /**
-   * The label text.
+   * The input name.
    */
-  @property({ attribute: 'label-text' })
-  labelText = '';
+  @property({ attribute: 'input-name' })
+  inputName = '';
+
+  /**
+   * The label description text.
+   */
+  @property({ attribute: 'label-description' })
+  labelDescription = '';
+
+  /**
+   * The label title.
+   */
+  @property({ attribute: 'label-title' })
+  labelTitle = '';
 
   /**
    * `true` if the drop container should accept more than one files at once.
@@ -152,54 +179,67 @@ export default class BXCEDemoFileUploader extends LitElement {
   multiple = false;
 
   /**
-   * The size of the file uploader items.
+   * The size of the button item.
    */
   @property({ reflect: true })
-  size = FILE_UPLOADER_ITEM_SIZE.REGULAR;
+  size = BUTTON_SIZE.MEDIUM;
+
+  /**
+   * The state of this file uploader item.
+   */
+  @property({ reflect: true, attribute: 'input-state' })
+  inputState = '';
 
   render() {
     const {
       accept,
+      button,
+      buttonKind,
+      buttonLabel,
       disabled,
-      helperText,
-      labelText,
+      labelDescription,
+      labelTitle,
       multiple,
       size,
+      inputState,
+      iconDescription,
       _files: files,
       _handleChange: handleChange,
       _handleDelete: handleDelete,
     } = this;
     return html`
       <cds-file-uploader
-        helper-text="${ifDefined(helperText)}"
-        label-text="${ifDefined(labelText)}">
-        <cds-file-drop-container
-          accept="${ifDefined(accept)}"
-          ?disabled="${disabled}"
-          ?multiple="${multiple}"
-          @cds-file-drop-container-changed="${handleChange}">
-          Drag and drop files here or click to upload
-        </cds-file-drop-container>
+        label-description="${ifDefined(labelDescription)}"
+        label-title="${ifDefined(labelTitle)}"
+        ?disabled="${disabled}">
+        ${!button
+          ? html` <cds-file-uploader-drop-container
+              accept="${ifDefined(accept)}"
+              ?multiple="${multiple}"
+              name="${ifDefined(this.inputName)}"
+              @cds-file-uploader-drop-container-changed="${handleChange}">
+              Drag and drop files here or click to upload
+            </cds-file-uploader-drop-container>`
+          : html` <cds-file-uploader-button
+              size="${ifDefined(size)}"
+              button-kind="${buttonKind}"
+              accept="${ifDefined(accept)}"
+              name="${ifDefined(this.inputName)}"
+              ?multiple="${multiple}"
+              @cds-file-uploader-button-changed="${handleChange}">
+              ${buttonLabel}
+            </cds-file-uploader-button>`}
         ${files.map(
-          ({
-            id,
-            invalid,
-            file,
-            state,
-            supplementalValidityMessage,
-            validityMessage,
-          }) => html`
+          ({ id, invalid, file, state, errorSubject, errorBody }) => html`
             <cds-file-uploader-item
               data-file-id="${id}"
               ?invalid="${invalid}"
-              size="${ifDefined(size)}"
-              state="${ifDefined(state)}"
-              validity-message="${ifDefined(validityMessage)}"
+              state="${inputState || ifDefined(state)}"
+              icon-description="${ifDefined(iconDescription)}"
+              error-subject="${ifDefined(errorSubject)}"
+              error-body="${ifDefined(errorBody)}"
               @cds-file-uploader-item-deleted="${handleDelete}">
               ${file.name}
-              <span slot="validity-message-supplement"
-                >${supplementalValidityMessage}</span
-              >
             </cds-file-uploader-item>
           `
         )}