diff --git a/.cspell.json b/.cspell.json
index 8f8592cb03..b5fab86fa6 100644
--- 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/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-action-elements.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-action-elements.png
deleted file mode 100644
index 57e9fb3da0..0000000000
Binary files a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-action-elements.png and /dev/null differ
diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
index 6d9174f602..7892eaa6d7 100644
--- 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: ` `,
+ actionElement: ` `,
actionOnClick: () => console.log("hello")
},
lastName: "Bloggs",
diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
index a634a196c1..a0490f666d 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
@@ -1619,7 +1619,7 @@ const DATA = [
{
firstName: {
data: "Joe",
- actionElement: ` `,
+ actionElement: ` `,
},
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
index 87f4a0f00e..e875f3db91 100644
--- 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
index 0beaca73a5..6de5431182 100644
--- 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: ` `,
+ actionElement: ``,
actionOnClick: () => {
console.log("hello");
},
@@ -1043,7 +1043,7 @@ export const ACTION_DATA_ELEMENTS = [
lastName: "Smith",
age: {
data: 45,
- actionElement: ` `,
+ actionElement: ` `,
},
jobTitle: "Team Lead",
address: "12 Key Street, Town, Country, Postcode",
diff --git a/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx b/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
index 1f171a6084..2bd272be05 100644
--- a/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
+++ b/packages/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, () => {
- {data.map((_, index) => (
+ {dataWithElements.map((_, index) => (
Delete