feat: added tooltip and scale-icon in data-grid button

telekom · Mar 1, 2024 · 3c4a2d6 · 3c4a2d6
1 parent dcbbfdb
commit 3c4a2d6
Show file tree

Hide file tree

Showing 2 changed files with 25 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,23 @@ 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 +43,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/html/data-grid.html b/packages/components/src/html/data-grid.html
@@ -230,15 +230,20 @@
               label: 'Edit',
               variant: 'secondary',
               onClick: () => alert('Edit'),
+              disabled: true,
+              iconName: 'edit',
+              tooltip: 'This action is disabled because...',
+
             },
             {
               label: 'Delete',
+              iconName: 'delete',
               variant: 'secondary',
               onClick: () => alert('Delete'),
             },
           ],
         ],
-
+        ],
         // Row 2
         [
           'dolor sit amet',