diff --git a/packages/docs/docs.json b/packages/docs/docs.json index d39211de76..c0f58ed830 100644 --- 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 index 16c387f3db..5b2110a62b 100644 --- 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 index 2de9bed36f..beda67a466 100644 --- 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} > {dismissible && (

| `"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"` |