Merge pull request #3043 from mi6/v3-cherry-pick-action-element-onclick

V3 cherry pick action element onclick
mi6 · Jan 16, 2025 · ffdb98f · ffdb98f
2 parents 5baad13 + 1d20153
commit ffdb98f
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 10 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
@@ -100,6 +100,7 @@ const TRUNCATION_SHOW_HIDE_SELECTOR = ".truncation-show-hide";
 const TRUNCATION_TOOLTIP_SELECTOR = ".truncation-tooltip";
 const TABLE_CELL_FIRST_CHILD_SELECTOR = ".table-cell:first-child";
 const ICON_BUTTON = "ic-button.ic-button-variant-icon";
+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 => (
@@ -1102,7 +1103,7 @@ describe("IcDataTables", () => {
     cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
       .eq(0)
       .find("span")
-      .should(HAVE_CLASS, "action-element")
+      .should(HAVE_CLASS, ACTION_ELEMENT)
       .find("ic-button")
       .should("be.visible");
 
@@ -1153,7 +1154,7 @@ describe("IcDataTables", () => {
       .should(HAVE_CSS, "grid-template-columns", "156.797px 32px");
 
     cy.findShadowEl(DATA_TABLE_SELECTOR, "span")
-      .should(HAVE_CLASS, "action-element")
+      .should(HAVE_CLASS, ACTION_ELEMENT)
       .should(HAVE_CSS, "justify-content", "right");
   });
 

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2064,7 +2064,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">
@@ -2098,6 +2098,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
@@ -1584,9 +1584,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>

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
@@ -1443,6 +1443,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>
             ) : (
@@ -1878,6 +1884,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
@@ -1019,6 +1019,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,

diff --git a/...ponents/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap b/...ponents/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap
@@ -2234,7 +2234,11 @@ exports[`ic-data-table should pass through the loadingOptions to the loading ind
           </thead>
         </table>
       </div>
-      <ic-loading-indicator class="loading loading-empty show" description="Loading table data" label="Loading..." monochrome="" theme="inherit"></ic-loading-indicator>
+      <div aria-live="assertive" class="sr-only">
+        Loading...
+      </div>
+      <div class="loading-overlay"></div>
+      <ic-loading-indicator appearance="light" class="loading loading-empty show" description="Loading table data" label="Loading..."></ic-loading-indicator>
     </div>
   </mock:shadow-root>
 </ic-data-table>
@@ -2288,7 +2292,7 @@ exports[`ic-data-table should pass through the updatingOptions to the linear loa
         <ic-empty-state aligned="center" class="loading-empty" heading="No Data"></ic-empty-state>
       </div>
       <div aria-live="assertive" class="sr-only">
-        Updating
+        Updating table data
       </div>
     </div>
   </mock:shadow-root>
@@ -3927,7 +3931,7 @@ exports[`ic-data-table should render the loading indicator with an overlay above
         </table>
       </div>
       <div aria-live="assertive" class="sr-only">
-        Loading
+        Loading...
       </div>
       <div class="loading-overlay show"></div>
       <ic-loading-indicator class="loading loading-empty show show-background" description="Loading table data" label="Loading..."></ic-loading-indicator>
@@ -3979,6 +3983,10 @@ exports[`ic-data-table should render the loading state when the \`loading\` prop
           </thead>
         </table>
       </div>
+      <div aria-live="assertive" class="sr-only">
+        Loading...
+      </div>
+      <div class="loading-overlay"></div>
       <ic-loading-indicator class="loading loading-empty show" description="Loading table data" label="Loading..." theme="inherit"></ic-loading-indicator>
     </div>
   </mock:shadow-root>
@@ -4033,7 +4041,7 @@ exports[`ic-data-table should render the updating state when the \`updating\` pr
         <ic-empty-state aligned="center" class="loading-empty" heading="No Data"></ic-empty-state>
       </div>
       <div aria-live="assertive" class="sr-only">
-        Updating
+        Updating table data
       </div>
     </div>
   </mock:shadow-root>
@@ -4119,7 +4127,7 @@ exports[`ic-data-table should render updating in assertive aria-live div 1`] = `
         </table>
       </div>
       <div aria-live="assertive" class="sr-only">
-        Updating
+        Updating table data
       </div>
     </div>
   </mock:shadow-root>
@@ -7003,6 +7011,7 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
           </tbody>
         </table>
       </div>
+      <div aria-live="assertive" class="sr-only"></div>
     </div>
   </mock:shadow-root>
   <ic-button slot="actions-0">
@@ -8165,6 +8174,10 @@ exports[`ic-data-table when loading is \`true\`, if data is set before 1 second
           </thead>
         </table>
       </div>
+      <div aria-live="assertive" class="sr-only">
+        Loading...
+      </div>
+      <div class="loading-overlay"></div>
       <ic-loading-indicator class="loading loading-empty show" description="Loading table data" label="Loading..." theme="inherit"></ic-loading-indicator>
     </div>
   </mock:shadow-root>
@@ -8214,6 +8227,10 @@ exports[`ic-data-table when loading is \`true\`, if data is set before 1 second
           </thead>
         </table>
       </div>
+      <div aria-live="assertive" class="sr-only">
+        Loading...
+      </div>
+      <div class="loading-overlay"></div>
       <ic-loading-indicator class="loading loading-empty show show-background" description="Loading table data" label="Loading..." theme="inherit"></ic-loading-indicator>
     </div>
   </mock:shadow-root>
@@ -8494,6 +8511,10 @@ exports[`ic-data-table when loading is \`true\`, setting data should cancel the
           </thead>
         </table>
       </div>
+      <div aria-live="assertive" class="sr-only">
+        Loading...
+      </div>
+      <div class="loading-overlay"></div>
       <ic-loading-indicator class="loading loading-empty show" description="Loading table data" label="Loading..." theme="inherit"></ic-loading-indicator>
     </div>
   </mock:shadow-root>

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
@@ -375,6 +375,7 @@ const dataWithActionElement = [
     name: {
       data: name1,
       actionElement: `<ic-button size="small" variant="icon"  aria-label="you can disable tooltips on icon buttons"  disable-tooltip="true">  <svg    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"),
     },
     age: 36,
     department: "Accounts",