chore(form-field-file-beta): addressed PR comments

addressed PR comments
MyPureCloud · Jan 17, 2025 · 6d100ae · 6d100ae
1 parent a65f1cc
commit 6d100ae
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/...ges/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md b/...ges/genesys-spark-components/src/components/stable/gux-dismiss-button/readme.md
@@ -17,7 +17,6 @@ This component is meant for use in other components as a dismiss button.
 
 ### Used by
 
- - [gux-form-field-file-beta](../gux-form-field/components/gux-form-field-file-beta)
  - [gux-modal](../gux-modal)
  - [gux-modal-legacy](../../legacy/gux-modal-legacy)
  - [gux-notification-toast-legacy](../../legacy/gux-notification-toast-legacy)
@@ -39,7 +38,6 @@ This component is meant for use in other components as a dismiss button.
 graph TD;
   gux-dismiss-button --> gux-button-slot
   gux-dismiss-button --> gux-icon
-  gux-form-field-file-beta --> gux-dismiss-button
   gux-modal --> gux-dismiss-button
   gux-modal-legacy --> gux-dismiss-button
   gux-notification-toast-legacy --> gux-dismiss-button

diff --git a/...nts/src/components/stable/gux-form-field/components/gux-form-field-file-beta/example.html b/...nts/src/components/stable/gux-form-field/components/gux-form-field-file-beta/example.html
@@ -1,6 +1,6 @@
 <h1>gux-form-field-file-beta</h1>
 <form onchange="notify(event)" oninput="notify(event)">
-  <gux-form-field-file-beta drop-and-drag>
+  <gux-form-field-file-beta drag-and-drop>
     <label slot="label">Upload a profile picture</label>
 
     <input type="file" name="files[]" slot="input" multiple />
@@ -23,11 +23,11 @@ <h1>gux-form-field-file-beta</h1>
     type="button"
     onclick="(function () {
       Array.from(document.querySelectorAll('gux-form-field-file-beta')).forEach(component => {
-        component.toggleAttribute('drop-and-drag');
+        component.toggleAttribute('drag-and-drop');
       });
     })()"
   >
-    Toggle Drop and Drag
+    Toggle Drag and Drop
   </button>
 </gux-button-slot>
 

diff --git a/...ponents/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.tsx b/...ponents/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.tsx
@@ -65,7 +65,7 @@ export class GuxFormFieldFileBeta {
   indicatorMark: GuxFormFieldIndicatorMark = 'required';
 
   @Prop()
-  dropAndDrag: boolean = false;
+  dragAndDrop: boolean = false;
 
   @State()
   private disabled: boolean = false;
@@ -271,18 +271,22 @@ export class GuxFormFieldFileBeta {
     this.dropContainer.classList.remove('gux-drag-over');
   }
 
-  private renderFileDismissButton(index: number): JSX.Element {
+  private renderFileRemoveButton(file: File, index: number): JSX.Element {
     if (this.disabled) {
       return null;
     }
 
     return (
-      <gux-dismiss-button
-        aria-hidden="true"
-        tabIndex={-1}
-        onClick={() => this.removeFile(index)}
-        position="inherit"
-      ></gux-dismiss-button>
+      <gux-button-slot accent="ghost" icon-only>
+        <button type="button" onClick={() => this.removeFile(index)}>
+          <gux-icon
+            icon-name="fa/xmark-large-regular"
+            size="small"
+            decorative
+          ></gux-icon>
+          <gux-screen-reader-beta>{`Remove ${file.name} file`}</gux-screen-reader-beta>
+        </button>
+      </gux-button-slot>
     ) as JSX.Element;
   }
 
@@ -308,7 +312,7 @@ export class GuxFormFieldFileBeta {
                 <span class="gux-file-name">{file.name}</span>
               </gux-truncate>
 
-              {this.renderFileDismissButton(index)}
+              {this.renderFileRemoveButton(file, index)}
             </div>
           ) as JSX.Element;
         })}
@@ -322,15 +326,15 @@ export class GuxFormFieldFileBeta {
         ref={el => (this.dropContainer = el)}
         class={{
           'gux-drop-container': true,
-          'gux-drop-zone': this.dropAndDrag,
+          'gux-drop-zone': this.dragAndDrop,
           'gux-disabled': this.disabled
         }}
         onDrop={event => this.onDrop(event)}
         onDragOver={event => this.onDragOver(event)}
         onDragEnter={event => this.onDragEnter(event)}
         onDragLeave={event => this.onDragLeave(event)}
       >
-        {this.dropAndDrag && (
+        {this.dragAndDrop && (
           <div class="gux-drag-and-drop-text">
             {this.getI18nValue('dragAndDropInstructions')}
           </div>

diff --git a/.../components/stable/gux-form-field/components/gux-form-field-file-beta/readme.md b/.../components/stable/gux-form-field/components/gux-form-field-file-beta/readme.md
@@ -9,7 +9,7 @@
 
 | Property        | Attribute        | Description                                                                                                                                                                                                                                                                     | Type                       | Default      |
 | --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------ |
-| `dropAndDrag`   | `drop-and-drag`  |                                                                                                                                                                                                                                                                                 | `boolean`                  | `false`      |
+| `dragAndDrop`   | `drag-and-drop`  |                                                                                                                                                                                                                                                                                 | `boolean`                  | `false`      |
 | `indicatorMark` | `indicator-mark` | Field indicator mark which can show *, (optional) or blank Defaults to required. When set to required, the component will display * for required fields and blank for optional When set to optional, the component will display (optional) for optional and blank for required. | `"optional" \| "required"` | `'required'` |
 
 
@@ -29,21 +29,17 @@
 ### Depends on
 
 - [gux-form-field-label-indicator](../../helper-components/gux-form-field-optional-indicator)
-- [gux-dismiss-button](../../../gux-dismiss-button)
-- [gux-truncate](../../../gux-truncate)
 - [gux-button-slot](../../../gux-button-slot)
 - [gux-icon](../../../gux-icon)
+- [gux-truncate](../../../gux-truncate)
 
 ### Graph
 ```mermaid
 graph TD;
   gux-form-field-file-beta --> gux-form-field-label-indicator
-  gux-form-field-file-beta --> gux-dismiss-button
-  gux-form-field-file-beta --> gux-truncate
   gux-form-field-file-beta --> gux-button-slot
   gux-form-field-file-beta --> gux-icon
-  gux-dismiss-button --> gux-button-slot
-  gux-dismiss-button --> gux-icon
+  gux-form-field-file-beta --> gux-truncate
   gux-truncate --> gux-tooltip
   style gux-form-field-file-beta fill:#f9f,stroke:#333,stroke-width:4px
 ```