feat(data-grid): added tooltip and scale-icon in data-grid action cell (

telekom#2308) Co-authored-by: felixw <[email protected]>
amir-ba · Oct 24, 2024 · 30a0ce5 · 30a0ce5
1 parent 6e8c380
commit 30a0ce5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/actions-cell.tsx
@@ -18,18 +18,22 @@ export const ActionsCell: Cell = {
     return (
       <div class={`tbody__actions`}>
         {content.map((action) => {
-          const { label, ...props } = action;
+          const { label, iconName, tooltip, ...props } = action;
+          const tooltipProps = tooltip ? { title: tooltip } : {};
+          const IconComponent = resolveIconComponent(iconName);
           if (typeof label === 'object' && '__html' in label) {
             return (
               <scale-button
                 size="small"
                 innerHTML={label.__html}
                 {...props}
+                {...tooltipProps}
               ></scale-button>
             );
           }
           return (
-            <scale-button size="small" {...props}>
+            <scale-button size="small" {...props} {...tooltipProps}>
+              {IconComponent}
               {label}
             </scale-button>
           );
@@ -38,3 +42,15 @@ export const ActionsCell: Cell = {
     );
   },
 };
+
+function resolveIconComponent(iconName) {
+  switch (iconName) {
+    case 'edit':
+      return <scale-icon-action-edit></scale-icon-action-edit>;
+    case 'delete':
+      return <scale-icon-action-remove></scale-icon-action-remove>;
+
+    default:
+      return null;
+  }
+}
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
@@ -62,6 +62,8 @@
 - [scale-dropdown-select-item](../dropdown-select-item)
 - [scale-tag](../tag)
 - [scale-text-field](../text-field)
+- [scale-icon-action-edit](../icons/action-edit)
+- [scale-icon-action-remove](../icons/action-remove)
 
 ### Graph
 ```mermaid
@@ -87,6 +89,8 @@ graph TD;
   scale-data-grid --> scale-dropdown-select-item
   scale-data-grid --> scale-tag
   scale-data-grid --> scale-text-field
+  scale-data-grid --> scale-icon-action-edit
+  scale-data-grid --> scale-icon-action-remove
   scale-menu-flyout-item --> scale-icon-action-checkmark
   scale-menu-flyout-item --> scale-icon-navigation-right
   scale-checkbox --> scale-icon-action-minus

diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
@@ -483,7 +483,7 @@ export class DatePicker {
             dateAdapter={this.dateAdapter}
             disabled={this.disabled}
             value={this.value}
-            ref={(element: HTMLElement & DuetDatePicker) =>
+            ref={(element: HTMLDuetDatePickerElement & DuetDatePicker) =>
               (this.duetInput = element)
             }
           ></duet-date-picker>