From d8f4ce2e767aeeb18e03dc1cc14581e6e9ad3ae8 Mon Sep 17 00:00:00 2001 From: mi6-286 <165915357+MI6-286@users.noreply.github.com> Date: Fri, 17 Jan 2025 10:54:04 +0000 Subject: [PATCH] feat(web-components): adding icClear event to clear all button of multi-select Adding icClear event to clear all button of multi-select and updating default multi-select storybook --- packages/web-components/src/components.d.ts | 7 ++++++- .../src/components/ic-menu/ic-menu.tsx | 12 ++++++++++++ .../web-components/src/components/ic-menu/readme.md | 7 +++++++ .../src/components/ic-select/ic-select.tsx | 2 +- .../ic-select/ic-select_(multi).stories.mdx | 3 +++ .../src/components/ic-select/readme.md | 2 +- 6 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 5f152b48de..d44730800d 100644 --- 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; "onMenuKeyPress"?: (event: IcMenuCustomEvent<{ isNavKey: boolean; key: string }>) => void; "onMenuOptionId"?: (event: IcMenuCustomEvent) => void; "onMenuOptionSelect"?: (event: IcMenuCustomEvent) => void; @@ -5117,7 +5122,7 @@ declare namespace LocalJSX { */ "onIcChange"?: (event: IcSelectCustomEvent) => void; /** - * Emitted when the clear button is clicked. + * Emitted when the clear or clear all button is clicked. */ "onIcClear"?: (event: IcSelectCustomEvent) => 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 index 44d094a10a..7e70266352 100644 --- 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; + /** * @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 index 28e02abc5e..dc7f3e97fe 100644 --- 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` | + + ## Methods ### `handleKeyboardOpen(event: KeyboardEvent) => Promise` diff --git a/packages/web-components/src/components/ic-select/ic-select.tsx b/packages/web-components/src/components/ic-select/ic-select.tsx index 133f71447e..cdfd398bb3 100644 --- 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; /** - * Emitted when the clear button is clicked. + * Emitted when the clear or clear all button is clicked. */ @Event() icClear: EventEmitter; 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 index d6ae2da293..019381b2d1 100644 --- 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 index a50b46712f..24c68adb02 100644 --- 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` | | `icChange` | Emitted when the value changes. | `CustomEvent` | -| `icClear` | Emitted when the clear button is clicked. | `CustomEvent` | +| `icClear` | Emitted when the clear or clear all button is clicked. | `CustomEvent` | | `icClose` | Emitted when the select options menu is closed. | `CustomEvent` | | `icFocus` | Emitted when the select gains focus. | `CustomEvent` | | `icInput` | Emitted when a keyboard input occurred. | `CustomEvent` |