update icons with tooltip

trimble-oss · Jan 10, 2025 · 094e2de · 094e2de
1 parent 8cac83e
commit 094e2de
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 12 deletions.
diff --git a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts
@@ -67,6 +67,7 @@ export interface ModusTableRowAction {
   id: string;
   icon?: string;
   label?: string;
+  tooltipText?: string;
   index: number;
   isDisabled?: (row: unknown) => boolean;
 }

diff --git a/stencil-workspace/src/components/modus-table/modus-table.scss b/stencil-workspace/src/components/modus-table/modus-table.scss
@@ -446,6 +446,10 @@ table {
     z-index: 1;
   }
 
+  td.sticky-right {
+    z-index: 99;
+  }
+
   &.density-relaxed {
     thead {
       tr {

diff --git a/...ponents/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx b/...ponents/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx
@@ -67,19 +67,23 @@ export class ModusTableRowActions {
     }
     return (
       <Host>
-        {actionButtons?.map(({ label, icon, id, isDisabled = () => false }) => {
+        {actionButtons?.map(({ label, icon, id,tooltipText, isDisabled = () => false }) => {
           const disabled = isDisabled(this.row.original);
           return (
-            <modus-button
-              class="row-actions"
-              button-style="borderless"
-              color="secondary"
-              icon-only={icon}
-              size="small"
-              ariaLabel={label}
-              disabled={disabled}
-              onKeyDown={(e) => this.handleActionButtonKeydown(e, id)}
-              onClick={(e) => (!disabled ? this.handleActionButtonClick(e, id) : e.preventDefault())}></modus-button>
+            <div>
+            <modus-tooltip text={tooltipText} position="top">
+              <modus-button
+                class="row-actions"
+                button-style="borderless"
+                color="secondary"
+                icon-only={icon}
+                size="small"
+                ariaLabel={label}
+                disabled={disabled}
+                onKeyDown={(e) => this.handleActionButtonKeydown(e, id)}
+                onClick={(e) => (!disabled ? this.handleActionButtonClick(e, id) : e.preventDefault())}>{label}
+              </modus-button>
+             </modus-tooltip> </div>
           );
         })}
 

diff --git a/...rkspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/...rkspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx
@@ -880,6 +880,7 @@ interface ModusTableRowAction {
   id: string;
   icon?: string;
   label?: string;
+  tooltipText?: string;
   index: number;
   isDisabled?: (row: unknown) => boolean;
 }

diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx
@@ -998,35 +998,39 @@ RowActions.args = {
   rowActions: [
     {
       id: '1',
-      icon: 'add',
       label: 'Add',
+      tooltipText:"Add",
       index: 0,
     },
 
     {
       id: '2',
       icon: 'calendar',
       label: 'calendar',
+      tooltipText:"Calendar",
       index: 1,
     },
 
     {
       id: '3',
       icon: 'cancel_circle',
       label: 'Cancel',
+      tooltipText:"Cancel",
       index: 2,
     },
     {
       id: '4',
       index: 3,
       icon: 'add',
       label: 'Add',
+      tooltipText:"Add",
     },
     {
       id: '5',
       index: 4,
       icon: 'delete',
       label: 'Delete',
+      tooltipText:"Delete",
     },
   ],
   data: makeData(7),