feat(web-components): adding icClear event to clear all button of mul…

…ti-select Adding icClear event to clear all button of multi-select and updating default multi-select storybook
mi6 · Jan 20, 2025 · d8f4ce2 · d8f4ce2
1 parent d23db4b
commit d8f4ce2
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -2817,6 +2817,7 @@ declare global {
         new (): HTMLIcLoadingIndicatorElement;
     };
     interface HTMLIcMenuElementEventMap {
+        "icClear": void;
         "menuKeyPress": { isNavKey: boolean; key: string };
         "menuOptionId": IcMenuOptionIdEventDetail;
         "menuOptionSelect": IcOptionSelectEventDetail;
@@ -4415,6 +4416,10 @@ declare namespace LocalJSX {
           * The ID of the menu.
          */
         "menuId": string;
+        /**
+          * Emitted when the clear all button is clicked.
+         */
+        "onIcClear"?: (event: IcMenuCustomEvent<void>) => void;
         "onMenuKeyPress"?: (event: IcMenuCustomEvent<{ isNavKey: boolean; key: string }>) => void;
         "onMenuOptionId"?: (event: IcMenuCustomEvent<IcMenuOptionIdEventDetail>) => void;
         "onMenuOptionSelect"?: (event: IcMenuCustomEvent<IcOptionSelectEventDetail>) => void;
@@ -5117,7 +5122,7 @@ declare namespace LocalJSX {
          */
         "onIcChange"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
         /**
-          * Emitted when the clear button is clicked.
+          * Emitted when the clear or clear all button is clicked.
          */
         "onIcClear"?: (event: IcSelectCustomEvent<void>) => void;
         /**

diff --git a/packages/web-components/src/components/ic-menu/ic-menu.tsx b/packages/web-components/src/components/ic-menu/ic-menu.tsx
@@ -169,6 +169,11 @@ export class Menu {
    */
   @Prop() valueField: string = "value";
 
+  /**
+   * Emitted when the clear all button is clicked.
+   */
+  @Event() icClear: EventEmitter<void>;
+
   /**
    * @internal Emitted when key is pressed while menu is open.
    */
@@ -909,6 +914,7 @@ export class Menu {
     this.keyboardNav = false;
     this.menu.focus();
     this.emitSelectAll();
+    this.emitIcClear();
     this.lastOptionFocused = null;
     this.lastOptionSelected = null;
   };
@@ -1031,6 +1037,12 @@ export class Menu {
     });
   };
 
+  private emitIcClear = () => {
+    if (this.value?.length === this.ungroupedOptions.length) {
+      this.icClear.emit();
+    }
+  };
+
   private emitMenuKeyPress = (isNavKey: boolean, key: string) => {
     this.menuKeyPress.emit({ isNavKey: isNavKey, key: key });
   };

diff --git a/packages/web-components/src/components/ic-menu/readme.md b/packages/web-components/src/components/ic-menu/readme.md
@@ -25,6 +25,13 @@
 | `valueField`              | `value-field`     | The custom name for the value field for IcMenuOption.                                                                                           | `string`                         | `"value"`      |
 
 
+## Events
+
+| Event     | Description                                   | Type                |
+| --------- | --------------------------------------------- | ------------------- |
+| `icClear` | Emitted when the clear all button is clicked. | `CustomEvent<void>` |
+
+
 ## Methods
 
 ### `handleKeyboardOpen(event: KeyboardEvent) => Promise<void>`

diff --git a/packages/web-components/src/components/ic-select/ic-select.tsx b/packages/web-components/src/components/ic-select/ic-select.tsx
@@ -329,7 +329,7 @@ export class Select {
   @Event() icChange: EventEmitter<IcValueEventDetail>;
 
   /**
-   * Emitted when the clear button is clicked.
+   * Emitted when the clear or clear all button is clicked.
    */
   @Event() icClear: EventEmitter<void>;
 

diff --git a/packages/web-components/src/components/ic-select/ic-select_(multi).stories.mdx b/packages/web-components/src/components/ic-select/ic-select_(multi).stories.mdx
@@ -51,6 +51,9 @@ export const defaultArgs = {
             { label: "Mocha", value: "Moc" },
             { label: "Macchiato", value: "Mac" },
           ];
+          select.addEventListener("icClear", function (event) {
+            console.log("icClear: clear all clicked");
+          });
           select.addEventListener("icChange", function (event) {
             console.log("icChange: " + event.detail.value);
           });

diff --git a/packages/web-components/src/components/ic-select/readme.md b/packages/web-components/src/components/ic-select/readme.md
@@ -47,7 +47,7 @@
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
 | `icBlur`           | Emitted when the select loses focus.                                                                                               | `CustomEvent<void>`                      |
 | `icChange`         | Emitted when the value changes.                                                                                                    | `CustomEvent<IcValueEventDetail>`        |
-| `icClear`          | Emitted when the clear button is clicked.                                                                                          | `CustomEvent<void>`                      |
+| `icClear`          | Emitted when the clear or clear all button is clicked.                                                                             | `CustomEvent<void>`                      |
 | `icClose`          | Emitted when the select options menu is closed.                                                                                    | `CustomEvent<void>`                      |
 | `icFocus`          | Emitted when the select gains focus.                                                                                               | `CustomEvent<void>`                      |
 | `icInput`          | Emitted when a keyboard input occurred.                                                                                            | `CustomEvent<IcValueEventDetail>`        |