Merge pull request #2933 from mi6/datatable-cell-elements-cherry-pick

Datatable cell elements v3 cherry pick
mi6 · Dec 18, 2024 · 44b2de7 · 44b2de7
2 parents 7eedd4b + 77072b4
commit 44b2de7
Show file tree

Hide file tree

Showing 8 changed files with 606 additions and 101 deletions.
diff --git a/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx b/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx
@@ -42,6 +42,7 @@ import {
   textWrapColumns,
   textWrapRow,
   DATA_EMPHASIS,
+  ACTION_DATA_ELEMENTS,
 } from "@ukic/canary-web-components/src/components/ic-data-table/story-data";
 
 import {
@@ -1086,6 +1087,69 @@ describe("IcDataTables", () => {
   });
 });
 
+it("should render an element in the table cell if the data prop contains the actionElement key", () => {
+  mount(
+    <IcDataTable
+      columns={COLS}
+      data={ACTION_DATA_ELEMENTS}
+      caption="Data tables"
+    ></IcDataTable>
+  );
+  cy.viewport(1024, 768);
+
+  cy.checkHydrated(DATA_TABLE_SELECTOR);
+
+  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+    .eq(0)
+    .find("span")
+    .should(HAVE_CLASS, "action-element")
+    .find("ic-button")
+    .should("be.visible");
+});
+
+it("should not render an element in the table cell if the data prop does not contain the actionElement key", () => {
+  mount(
+    <IcDataTable
+      columns={COLS}
+      data={ACTION_DATA_ELEMENTS}
+      caption="Data tables"
+    ></IcDataTable>
+  );
+  cy.viewport(1024, 768);
+
+  cy.checkHydrated(DATA_TABLE_SELECTOR);
+
+  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+    .eq(1)
+    .find("span")
+    .should("not.exist");
+});
+
+it("should apply styling to the cell container if an action element is present in the cell", () => {
+  mount(
+    <IcDataTable
+      columns={COLS}
+      data={ACTION_DATA_ELEMENTS}
+      caption="Data tables"
+    ></IcDataTable>
+  );
+
+  cy.viewport(1024, 768);
+
+  cy.checkHydrated(DATA_TABLE_SELECTOR);
+
+  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+    .eq(0)
+    .find("div")
+    .eq(0)
+    .should(HAVE_CLASS, "cell-grid-wrapper")
+    .should(HAVE_CSS, "grid-template-columns", "156.797px 32px");
+
+  cy.findShadowEl(DATA_TABLE_SELECTOR, "span")
+    .should(HAVE_CLASS, "action-element")
+    .should(HAVE_CSS, "justify-content", "right");
+});
+
 describe("IcDataTables with IcPaginationBar", () => {
   beforeEach(() => {
     cy.injectAxe();

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -27,7 +27,8 @@ import {
   ICON_COLS,
   COLUMNS_TEXT_WRAP,
   TEXT_WRAP_LONG_DATA,
-  COLS_WIDTH
+  COLS_WIDTH,
+  ACTION_DATA_ELEMENTS
 } from "../../../canary-web-components/src/components/ic-data-table/story-data";
 
 import { mdiAccountGroup, mdiImage, mdiDelete } from "@mdi/js";
@@ -2074,6 +2075,58 @@ const DataTable = () => {
 };
 ```
 
+### Action Element
+
+An example with action elements passed in via the data
+
+<Canvas withSource="none">
+  <Story name="Action Element">
+    <IcDataTable caption="Action Element" columns={COLS} data={ACTION_DATA_ELEMENTS} />
+  </Story>
+</Canvas>
+
+#### Action Element code example
+
+```jsx
+import * as React from "react";
+import { IcDataTable } from "@ukic/canary-react";
+import { IcDataTableColumnObject } from "@ukic/canary-web-components";
+
+const COLS: IcDataTableColumnObject[] = [
+  { key: "firstName", title: "First name", dataType: "string", columnWidth: "15%" },
+  { key: "lastName", title: "Last name", dataType: "string", columnWidth: "300px" },
+  { 
+    key: "age", 
+    title: "Age", 
+    dataType: "number",
+    columnWidth: {
+      maxWidth: "100px",
+    },
+  },
+  ...
+];
+
+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>`,
+    },
+    lastName: "Bloggs",
+    age: 30,
+    jobTitle: "Developer",
+    address: "1 Main Street, Town, County, Postcode",
+  },
+  ...
+];
+
+const DataTable = () => (
+  <IcDataTable caption="Action Element" columns={COLS} data={DATA} />
+);
+
+export default DataTable;
+```
+
 ### Playground example
 
 Go to the <IcLink href="/?path=/story/react-components-data-table--playground-example">separate page for the playground example</IcLink> to view the prop controls.

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.css b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.css
@@ -414,6 +414,16 @@ td.table-density-spacious {
   width: 100%;
 }
 
+.action-element {
+  display: flex;
+  justify-content: right;
+}
+
+.cell-grid-wrapper {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
 @media screen and (min-width: 577px) {
   .column-header-inner-container {
     display: flex;

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
@@ -36,6 +36,7 @@ import {
   UpdatingData,
   SlottedPagination,
   LargeDataSet,
+  ActionElement,
   DevArea,
 } from "./story-data";
 import readme from "./readme.md";
@@ -1643,6 +1644,16 @@ To set the min and max width of a table cell, set the `table-layout` attribute t
 </script>
 ```
 
+### Action Element
+
+The example below demonstrates action elements appearing in table cells after being passed in via the data.
+
+<Canvas withSource="none">
+  <Story name="Action Element" parameters={{ loki: { skip: true } }}>
+    {ActionElement()}
+  </Story>
+</Canvas>
+
 #### Development Area
 
 <Canvas withSource="none">