feat(react): add prop to customise tooltip label for chip

Add prop to customise tooltip label for chip. Add Cypress test and stories . mi6#2839
ec1467 · Jan 2, 2025 · 0f34046 · 0f34046
1 parent 5aa56ef
commit 0f34046
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/.../cypress-image-diff-screenshots/baseline/IcChip.cy.tsx-custom-dismiss-label.png b/.../cypress-image-diff-screenshots/baseline/IcChip.cy.tsx-custom-dismiss-label.png
diff --git a/packages/react/src/component-tests/IcChip/IcChip.cy.tsx b/packages/react/src/component-tests/IcChip/IcChip.cy.tsx
@@ -15,6 +15,7 @@ import {
   WithIcon,
   WithBadgeSlot,
   InAGGrid,
+  CustomDismissLabel,
 } from "./IcChipTestData";
 import {
   HAVE_BEEN_CALLED_ONCE,
@@ -148,6 +149,20 @@ describe("IcChip visual regression and a11y tests", () => {
     });
   });
 
+  it("should render dismissible chip with custom tooltip label", () => {
+    mount(<CustomDismissLabel />);
+
+    cy.checkHydrated("ic-chip#default-chip");
+
+    cy.findShadowEl("ic-chip#default-chip", "button").eq(0).focus();
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "custom-dismiss-label",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
+
   it("should render disabled chip", () => {
     mount(<Disabled />);
 

diff --git a/packages/react/src/component-tests/IcChip/IcChipTestData.tsx b/packages/react/src/component-tests/IcChip/IcChipTestData.tsx
@@ -146,6 +146,19 @@ export const Dismissible = () => {
   );
 };
 
+export const CustomDismissLabel = () => {
+  return (
+    <div style={{ padding: "8px" }}>
+      <IcChip
+        id="default-chip"
+        label="Default"
+        dismissible
+        dismissLabel="Custom dismiss"
+      />
+    </div>
+  );
+};
+
 export const WithIcon = () => {
   return (
     <div style={{ padding: "8px" }}>

diff --git a/packages/react/src/stories/ic-chip.stories.mdx b/packages/react/src/stories/ic-chip.stories.mdx
@@ -508,6 +508,7 @@ export const defaultArgs = {
   customColor: null,
   disabled: false,
   dismissible: false,
+  dismissLabel: "Dismiss",
   label: "Default",
   size: "default",
   transparentBackground: true,
@@ -555,6 +556,7 @@ export const defaultArgs = {
         label={args.label}
         customColor={args.customColor}
         dismissible={args.dismissible}
+        dismissLabel={args.dismissLabel}
         disabled={args.disabled}
         size={args.size}
         variant={args.variant}