Merge pull request #2988 from am26090/add-on-click-to-actionElement

feat(canary-react): add actionOnClick on actionElement on data table
mi6 · Jan 16, 2025 · a1c3b3b · a1c3b3b
2 parents 6c4ea23 + cc5a8bf
commit a1c3b3b
Show file tree

Hide file tree

Showing 7 changed files with 314 additions and 13 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
@@ -87,6 +87,7 @@ const PAGINATION_GO_TO_PAGE_TEXT_FIELD_SELECTOR =
   ".go-to-page-holder ic-text-field";
 const PAGINATION_GO_TO_PAGE_BUTTON_SELECTOR = ".go-to-page-holder ic-button";
 const ITEMS_PER_PAGE_SELECTOR = ".items-per-page-input";
+const ACTION_ELEMENT = "action-element";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 export const BasicDataTable = (dataTableProps?: any): ReactElement => (

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2066,7 +2066,7 @@ const DataTable = () => {
 
 ### Action Element
 
-An example with action elements passed in via the data
+The cell data can contain an `actionElement` which can be a string containing any html to be rendered. The `actionElement` will be displayed to the right of the cell data. An `actionOnClick` can be specified for the `actionElement`. This should be used with a keyboard accessible component such as 'icButton' to allow for a function to be run when the `actionElement` is clicked. 
 
 <Canvas withSource="none">
   <Story name="Action Element">
@@ -2100,6 +2100,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>`,
+      actionOnClick: () => console.log("hello")
     },
     lastName: "Bloggs",
     age: 30,

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
@@ -1585,9 +1585,9 @@ To set the min and max width of a table cell, set the `table-layout` attribute t
 </script>
 ```
 
-### Action Element
+### Action Element and OnClick Action
 
-The example below demonstrates action elements appearing in table cells after being passed in via the data.
+The cell data can contain an `actionElement` which can be a string containing any html to be rendered. The `actionElement` will be displayed to the right of the cell data. An `actionOnClick` can be specified for the `actionElement`. This should be used with a keyboard accessible component such as `icButton` for a function to be run when the `actionElement` is clicked.
 
 <Canvas withSource="none">
   <Story name="Action Element">{ActionElement()}</Story>
@@ -1696,5 +1696,7 @@ export default DataTable;
 #### Development Area
 
 <Canvas withSource="none">
-  <Story name="Dev Area">{DevArea()}</Story>
+  <Story parameters={{ loki: { skip: true } }} name="Dev Area">
+    {DevArea()}
+  </Story>
 </Canvas>
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
@@ -1436,6 +1436,12 @@ export class DataTable {
                 <span
                   class="action-element"
                   innerHTML={cellValue("actionElement")}
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={
+                    cell.actionOnClick
+                      ? () => this.handleClick(cell.actionOnClick)
+                      : undefined
+                  }
                 ></span>
               </div>
             ) : (
@@ -1871,6 +1877,7 @@ export class DataTable {
       });
     });
   };
+  private handleClick = (callback: () => void) => callback();
 
   private renderTableBody = (
     data: IcDataTableDataType[],

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
@@ -975,6 +975,9 @@ 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>`,
+      actionOnClick: () => {
+        console.log("hello");
+      },
     },
     lastName: "Bloggs",
     age: 31,