Merge pull request #3078 from mi6/v3-cherry-pick-action-element-toolt…

…ip-fix V3 cherry pick action element tooltip fix
mi6 · Jan 23, 2025 · 417459c · 417459c
2 parents 6477576 + a2d4bb3
commit 417459c
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 18 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -155,7 +155,8 @@
       "maxin",
       "relaxin",
       "codemod",
-      "nargs"
+      "nargs",
+      "testid"
     ],
     "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en-gb", "misc", "la"],
     "ignorePaths": [

diff --git a/.../cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-action-elements.png b/.../cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-action-elements.png
diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2097,7 +2097,7 @@ const DATA = [
   {
     firstName: {
       data: "Joe",
-      actionElement: `<ic-button variant="icon" size="small  aria-label="you can disable tooltips on icon buttons">  <svg  aria-label="refresh button"  xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
+      actionElement: `<ic-button variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons">  <svg  aria-label="refresh button"  xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
       actionOnClick: () => console.log("hello")
     },
     lastName: "Bloggs",

diff --git a/...es/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/...es/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
@@ -1619,7 +1619,7 @@ const DATA = [
   {
     firstName: {
       data: "Joe",
-      actionElement: `<ic-button variant="icon" size="small  aria-label="you can disable tooltips on icon buttons">  <svg  aria-label="refresh button"  xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
+      actionElement: `<ic-button variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons">  <svg  aria-label="refresh button"  xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
     },
     lastName: "Bloggs",
     age: 30,

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -1881,24 +1881,40 @@ export class DataTable {
     tooltipEl.appendChild(typographyEl);
   }
 
+  private fixCellTooltip = (element: HTMLElement) => {
+    const tooltipEl = (
+      element.tagName === "IC-TOOLTIP"
+        ? element
+        : element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)
+    ) as HTMLIcTooltipElement;
+
+    if (tooltipEl) {
+      tooltipEl.setExternalPopperProps({
+        strategy: "fixed",
+      });
+    }
+  };
+
   private fixCellTooltips = () => {
     const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
     elements.forEach((element) => {
       const slotElements = getSlotElements(element);
-      slotElements.forEach((slottedEl: HTMLElement) => {
-        const tooltipEl = (
-          slottedEl.tagName === "IC-TOOLTIP"
-            ? slottedEl
-            : slottedEl.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)
-        ) as HTMLIcTooltipElement;
-        if (tooltipEl) {
-          tooltipEl.setExternalPopperProps({
-            strategy: "fixed",
-          });
-        }
+      slotElements?.forEach((slottedEl: HTMLElement) => {
+        this.fixCellTooltip(slottedEl);
       });
     });
+
+    const actionElements =
+      this.el.shadowRoot.querySelectorAll(".action-element");
+
+    actionElements?.forEach((actionElementSpan) => {
+      const actionElement = actionElementSpan.firstChild as HTMLElement;
+      if (actionElement) {
+        this.fixCellTooltip(actionElement);
+      }
+    });
   };
+
   private handleClick = (callback: () => void) => callback();
 
   private renderTableBody = (

diff --git a/packages/canary-web-components/src/components/ic-data-table/story-data.ts b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
@@ -1018,7 +1018,7 @@ export const ACTION_DATA_ELEMENTS = [
   {
     firstName: {
       data: "Joe",
-      actionElement: `<ic-button variant="icon" size="small  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <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"></path> </svg></ic-button>`,
+      actionElement: `<ic-button data-testid="copy-button-test" variant="icon" size="small" tooltip-placement="bottom" aria-label="Copy test to clipboard"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg></ic-button><ic-toast-region><ic-toast heading="Identifier variant copied successfully." variant="success" data-testid="copy-toast"></ic-toast></ic-toast-region>`,
       actionOnClick: () => {
         console.log("hello");
       },
@@ -1043,7 +1043,7 @@ export const ACTION_DATA_ELEMENTS = [
     lastName: "Smith",
     age: {
       data: 45,
-      actionElement: `<ic-button variant="icon" id="small-button" size="small aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
+      actionElement: `<ic-button variant="icon" id="small-button" size="small" aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <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"></path>  </svg></ic-button>`,
     },
     jobTitle: "Team Lead",
     address: "12 Key Street, Town, Country, Postcode",

diff --git a/...ages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx b/...ages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
@@ -134,6 +134,45 @@ const data = [
   { name: name5, age: 45, department: "HR", employeeNumber: 6 },
 ];
 
+const dataWithElements = [
+  {
+    name: name1,
+    age: 36,
+    department: "Accounts",
+    employeeNumber: 1,
+    actions: "",
+  },
+  {
+    name: name2,
+    age: 32,
+    department: "Engineering",
+    employeeNumber: 2,
+    actions: "",
+  },
+  {
+    name: "Tim Rayes",
+    age: 41,
+    department: "Sales",
+    employeeNumber: 3,
+    actions: "",
+  },
+  {
+    name: name3,
+    age: "23",
+    department: "Engineering",
+    employeeNumber: 4,
+    actions: "",
+  },
+  {
+    name: name4,
+    age: 34,
+    department: "Engineering",
+    employeeNumber: 5,
+    actions: "",
+  },
+  { name: name5, age: 45, department: "HR", employeeNumber: 6, actions: "" },
+];
+
 const dataWithRowHeaders = [
   { header: { title: 1 }, name: name1, age: 36, department: "Accounts" },
   {
@@ -1343,9 +1382,9 @@ describe(icDataTable, () => {
         <ic-data-table
           caption="Table"
           columns={columnsWithElements}
-          data={data}
+          data={dataWithElements}
         >
-          {data.map((_, index) => (
+          {dataWithElements.map((_, index) => (
             <ic-button key={index} slot={`actions-${index}`}>
               Delete
             </ic-button>