feat(web-components): add prop to customise tooltip text

add a new dismissLabel prop which allows the user to change the text of the label on the dismiss button feat #2839
mi6 · Jan 8, 2025 · 1a9b259 · 1a9b259
1 parent 61e8231
commit 1a9b259
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 2 deletions.
diff --git a/packages/docs/docs.json b/packages/docs/docs.json
@@ -3862,6 +3862,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "dismiss-label",
+          "reflectToAttr": false,
+          "docs": "The text in the dismiss button tooltip and aria label.",
+          "docsTags": [],
+          "default": "\"Dismiss\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "dismissible",
           "type": "boolean",

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -556,6 +556,10 @@ export namespace Components {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -3897,6 +3901,10 @@ declare namespace LocalJSX {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */

diff --git a/packages/web-components/src/components/ic-chip/ic-chip.stories.mdx b/packages/web-components/src/components/ic-chip/ic-chip.stories.mdx
@@ -618,6 +618,7 @@ export const defaultArgs = {
   customColor: null,
   disabled: false,
   dismissible: false,
+  dismissLabel: "Dismiss",
   label: "Default",
   size: "default",
   transparentBackground: true,
@@ -663,6 +664,7 @@ export const defaultArgs = {
         size=${args.size}
         variant=${args.variant}
         transparent-background=${args.transparentBackground}
+        dismiss-label=${args.dismissLabel}
       >
         <svg
           slot="icon"

diff --git a/packages/web-components/src/components/ic-chip/ic-chip.tsx b/packages/web-components/src/components/ic-chip/ic-chip.tsx
@@ -88,6 +88,11 @@ export class Chip {
    */
   @Prop() variant?: IcEmphasisType = "filled";
 
+  /**
+   * The text in the dismiss button tooltip and aria label.
+   */
+  @Prop() dismissLabel?: string = "Dismiss";
+
   /**
    * @deprecated This event should not be used anymore. Use icDismiss instead.
    */
@@ -172,6 +177,7 @@ export class Chip {
       visible,
       disabled,
       hovered,
+      dismissLabel,
     } = this;
 
     return (
@@ -203,14 +209,14 @@ export class Chip {
           </ic-typography>
           {dismissible && (
             <ic-tooltip
-              label="Dismiss"
+              label={dismissLabel}
               target="dismiss-icon"
               class={{ "tooltip-disabled": disabled }}
             >
               <button
                 id="dismiss-icon"
                 class="dismiss-icon"
-                aria-label={`Dismiss ${label} chip`}
+                aria-label={`${dismissLabel} ${label} chip`}
                 disabled={disabled}
                 tabindex={disabled ? -1 : 0}
                 onClick={this.dismissAction}

diff --git a/packages/web-components/src/components/ic-chip/readme.md b/packages/web-components/src/components/ic-chip/readme.md
@@ -12,6 +12,7 @@
 | `appearance`            | `appearance`             | <span style="color:red">**[DEPRECATED]**</span> This prop should not be used anymore. Use variant prop instead.<br/><br/>                                                                                    | `"filled" \| "outline"`                                 | `undefined` |
 | `customColor`           | `custom-color`           | The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)". | ``#${string}` \| `rgb(${string})` \| `rgba(${string})`` | `null`      |
 | `disabled`              | `disabled`               | If `true`, the chip will appear disabled.                                                                                                                                                                    | `boolean`                                               | `false`     |
+| `dismissLabel`          | `dismiss-label`          | The text in the dismiss button tooltip and aria label.                                                                                                                                                       | `string`                                                | `"Dismiss"` |
 | `dismissible`           | `dismissible`            | If `true`, the chip will have a close button at the end to dismiss it.                                                                                                                                       | `boolean`                                               | `false`     |
 | `label` _(required)_    | `label`                  | The text rendered within the chip.                                                                                                                                                                           | `string`                                                | `undefined` |
 | `size`                  | `size`                   | The size of the chip.                                                                                                                                                                                        | `"default" \| "large" \| "small"`                       | `"default"` |