Merge pull request #3011 from BluePandaCard/2160-allow-placement-of-t…

…ooltip-for-toggle-button 2160 allow placement of tooltip for toggle button
mi6 · Jan 14, 2025 · 79454bb · 79454bb
2 parents a74d8a7 + abf0126
commit 79454bb
Show file tree

Hide file tree

Showing 19 changed files with 422 additions and 47 deletions.
diff --git a/packages/docs/docs.json b/packages/docs/docs.json
@@ -2082,8 +2082,8 @@
             "references": {
               "IcButtonTooltipPlacement": {
                 "location": "import",
-                "path": "./ic-button.types",
-                "id": "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement"
+                "path": "../../utils/types",
+                "id": "src/utils/types.ts::IcButtonTooltipPlacement"
               }
             }
           },
@@ -17527,6 +17527,47 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "tooltipPlacement",
+          "type": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "complexType": {
+            "original": "IcButtonTooltipPlacement",
+            "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+            "references": {
+              "IcButtonTooltipPlacement": {
+                "location": "import",
+                "path": "../../utils/types",
+                "id": "src/utils/types.ts::IcButtonTooltipPlacement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "tooltip-placement",
+          "reflectToAttr": false,
+          "docs": "The position of the tooltip in relation to the toggle button.",
+          "docsTags": [],
+          "default": "\"bottom\"",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"default\" | \"icon\"",
@@ -17878,6 +17919,47 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "tooltipPlacement",
+          "type": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "complexType": {
+            "original": "IcButtonTooltipPlacement",
+            "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+            "references": {
+              "IcButtonTooltipPlacement": {
+                "location": "import",
+                "path": "../../utils/types",
+                "id": "src/utils/types.ts::IcButtonTooltipPlacement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "tooltip-placement",
+          "reflectToAttr": false,
+          "docs": "The position of the tooltip in relation to the toggle buttons.",
+          "docsTags": [],
+          "default": "\"bottom\"",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"default\" | \"icon\"",
@@ -19022,10 +19104,10 @@
       "docstring": "",
       "path": "src/components/ic-badge/ic-badge.types.ts"
     },
-    "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement": {
+    "src/utils/types.ts::IcButtonTooltipPlacement": {
       "declaration": "export type IcButtonTooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";",
       "docstring": "",
-      "path": "src/components/ic-button/ic-button.types.ts"
+      "path": "src/utils/types.ts"
     },
     "src/components/ic-button/ic-button.types.ts::IcButtonTypes": {
       "declaration": "export type IcButtonTypes = \"reset\" | \"submit\" | \"button\";",

diff --git a/...mage-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-left.png b/...mage-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-left.png
diff --git a/...age-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-right.png b/...age-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-right.png
diff --git a/...image-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-top.png b/...image-diff-screenshots/baseline/IcToggleButton.cy.tsx-tooltip-placement-top.png
diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx
@@ -20,6 +20,7 @@ import {
   IconVariant,
   Light,
   WithIcon,
+  TooltipPlacement,
 } from "./IcToggleButtonTestData";
 
 const IC_TOGGLE_BUTTON_SELECTOR = "ic-toggle-button";
@@ -279,6 +280,48 @@ describe("IcToggleButton visual regression and a11y tests", () => {
     });
   });
 
+  it("should render various tooltip placements", () => {
+    mount(<TooltipPlacement />);
+
+    cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);
+
+    cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button")
+      .shadow()
+      .find("button")
+      .eq(0)
+      .focus();
+
+    cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
+    cy.compareSnapshot({
+      name: "tooltip-placement-right",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+
+    cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button")
+      .shadow()
+      .find("button")
+      .eq(1)
+      .focus();
+
+    cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
+    cy.compareSnapshot({
+      name: "tooltip-placement-top",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+
+    cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button")
+      .shadow()
+      .find("button")
+      .eq(2)
+      .focus();
+
+    cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
+    cy.compareSnapshot({
+      name: "tooltip-placement-left",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
+
   it("should render with appearance set to dark", () => {
     mount(<Dark />);
     cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);

diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx
@@ -63,6 +63,34 @@ export const IconPlacementTop = (): ReactElement => {
   );
 };
 
+export const TooltipPlacement = (): ReactElement => {
+  return (
+    <div style={{ padding: "100px 8px" }}>
+      <IcToggleButton
+        variant="icon"
+        accessibleLabel="Refresh the page"
+        tooltipPlacement="right"
+      >
+        <ReusableSlottedIcon />
+      </IcToggleButton>
+      <IcToggleButton
+        variant="icon"
+        accessibleLabel="Refresh the page"
+        tooltipPlacement="top"
+      >
+        <ReusableSlottedIcon />
+      </IcToggleButton>
+      <IcToggleButton
+        variant="icon"
+        accessibleLabel="Refresh the page"
+        tooltipPlacement="left"
+      >
+        <ReusableSlottedIcon />
+      </IcToggleButton>
+    </div>
+  );
+};
+
 export const Dark = (): ReactElement => {
   return (
     <div

diff --git a/packages/react/src/stories/ic-toggle-button-group.stories.mdx b/packages/react/src/stories/ic-toggle-button-group.stories.mdx
@@ -233,6 +233,38 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
         </IcToggleButton>
       </IcToggleButtonGroup>
       <br />
+      <span>Tooltip placement</span>
+      <IcToggleButtonGroup
+        variant="icon"
+        accessibleLabel="Single and manual select toggle group"
+        tooltipPlacement="right"
+      >
+        <IcToggleButton variant="icon" accessibleLabel="First Refresh">
+          <SlottedSVG
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+          </SlottedSVG>
+        </IcToggleButton>
+        <IcToggleButton variant="icon" accessibleLabel="Second Refresh">
+          <SlottedSVG
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+          </SlottedSVG>
+        </IcToggleButton>
+      </IcToggleButtonGroup>
+      <br />
       <span>Icon right</span>
       <IcToggleButtonGroup
         iconPlacement="right"

diff --git a/packages/react/src/stories/ic-toggle-button.stories.mdx b/packages/react/src/stories/ic-toggle-button.stories.mdx
@@ -195,6 +195,51 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
   </Story>
 </Canvas>
 
+### Tooltip placement
+
+<Canvas>
+  <Story name="Tooltip placement">
+  <div style={{ padding: "100px 10px" }}>
+    <IcToggleButton variant="icon" tooltipPlacement="right" accessibleLabel="Refresh the page">
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton variant="icon" tooltipPlacement="top" accessibleLabel="Refresh the page">
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton variant="icon" tooltipPlacement="left" accessibleLabel="Refresh the page">
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    </div>
+  </Story>
+</Canvas>
+
 ### Playground
 
 export const defaultArgs = {
@@ -337,6 +382,7 @@ export const defaultIconArgs = {
   fullWidth: false,
   toggleChecked: false,
   accessibleLabel: "Custom Button Ally Label",
+  tooltipPlacement: "bottom",
 };
 
 <Canvas>
@@ -357,6 +403,12 @@ export const defaultIconArgs = {
       fullWidth: {
         control: { type: "boolean" },
       },
+      tooltipPlacement: {
+        options: ["bottom", "top", "left", "right"],
+        control: {
+          type: "radio"
+        },
+      },
     }}
     name="Playground - icon variant"
   >
@@ -372,6 +424,7 @@ export const defaultIconArgs = {
           fullWidth={args.fullWidth}
           toggleChecked={args.toggleChecked}
           accessibleLabel={args.accessibleLabel}
+          tooltipPlacement={args.tooltipPlacement}
         >
           <SlottedSVG
           xmlns="http://www.w3.org/2000/svg"