Merge pull request #3128 from mi6/2894-internal-issue-2841-icdatatabl…

…e-truncates-tooltips-passed-in-via-slots 2894 internal issue 2841 icdatatable truncates tooltips passed in via slots
mi6 · Feb 5, 2025 · 9e5a9fb · 9e5a9fb
2 parents 5612ec1 + 723f6a6
commit 9e5a9fb
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 16 deletions.
diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -1088,43 +1088,45 @@ const DataTable = () => {
 export default DataTable;
 ```
 
-### Links and elements in data
+### Links and slotted elements in data
 
 Custom HTML elements can be slotted or passed via the `data` prop to display in certain cells. When using the slotted method, the slot name follows the format of `{COLUMN_TAG}-{ROW_INDEX}`.
 
 <Canvas withSource="none">
-  <Story name="Links and Elements in data">
+  <Story name="Links and slotted elements in data">
     <IcDataTable
-      caption="Links and Elements in data"
+      caption="Links and slotted elements in data"
       columns={COLS_ELEMENTS}
       data={DATA_REACT_ELEMENTS}
+      showPagination
     >
       {DATA_REACT_ELEMENTS.map((_, index) => (
         <>
           <IcButton
             key={`actions-${index}`}
             variant="destructive"
             slot={`actions-${index}`}
+            title="Delete row (top level tooltip)"
             onClick={() => console.log("Delete")}
           >
             Delete
           </IcButton>
+          <div key={`actions2-${index}`} slot={`actions2-${index}`}>
           <IcButton
-            key={`actions2-${index}`}
             variant="icon"
-            slot={`actions2-${index}`}
-            aria-label="Delete row"
+            aria-label="Delete row (nested tooltip)"
             onClick={() => console.log("Delete")}
           >
             <SlottedSVG path={mdiDelete} viewBox="0 0 24 24" />
           </IcButton>
+          </div>
         </>
       ))}
     </IcDataTable>
   </Story>
 </Canvas>
 
-#### Links and elements in data code example
+#### Links and slotted elements in data code example
 
 ```tsx
 import * as React from "react";
@@ -1164,11 +1166,33 @@ const data = [
 
 const DataTable = () => (
   <IcDataTable
-    caption="Links and Elements in data"
+    caption="Links and slotted elements in data"
     columns={columns}
     data={data}
+    showPagination="true"
   >
-    {data.map((_, index) => <IcButton key={index} slot={`actions-${index}`} variant="destructive" onClick={() => console.log("Delete")}>Delete</IcButton>)}
+    {data.map((_, index) => (
+        <>
+          <IcButton
+            key={`actions-${index}`}
+            variant="destructive"
+            slot={`actions-${index}`}
+            title="Delete row (top level tooltip)"
+            onClick={() => console.log("Delete")}
+          >
+            Delete
+          </IcButton>
+          <div key={`actions2-${index}`} slot={`actions2-${index}`}>
+          <IcButton
+            variant="icon"
+            aria-label="Delete row (nested tooltip)"
+            onClick={() => console.log("Delete")}
+          >
+            <SlottedSVG path={mdiDelete} viewBox="0 0 24 24" />
+          </IcButton>
+          </div>
+        </>
+      ))}
   </IcDataTable>
 );
 

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
@@ -2099,14 +2099,26 @@ export class DataTable {
   }
 
   private fixCellTooltip = (element: HTMLElement) => {
-    const tooltipEl = (
-      element.tagName === "IC-TOOLTIP"
-        ? element
-        : element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)
-    ) as HTMLIcTooltipElement;
+    let tooltip: HTMLIcTooltipElement;
+
+    if (element.tagName === "IC-TOOLTIP") {
+      tooltip = element as HTMLIcTooltipElement;
+    } else if (element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)) {
+      tooltip = element.shadowRoot?.querySelector(
+        this.IC_TOOLTIP_STRING
+      ) as HTMLIcTooltipElement;
+    } else {
+      if (element.children?.length > 0) {
+        Array.from(element.children).forEach((el) => {
+          this.fixCellTooltip(el as HTMLElement);
+        });
+      } else {
+        return;
+      }
+    }
 
-    if (tooltipEl) {
-      tooltipEl.setExternalPopperProps({
+    if (tooltip) {
+      tooltip.setExternalPopperProps({
         strategy: "fixed",
       });
     }