feat: tag cell in data-grid extended

telekom · Aug 28, 2024 · 9f9e0cd · 9f9e0cd
1 parent 8a694a2
commit 9f9e0cd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/tags-cell.tsx
@@ -33,7 +33,11 @@ export const TagsCell: Cell = {
       <ul class={`tbody__tag-list`}>
         {tags.map((tag) => (
           <li>
-            <scale-tag size="small" type="strong" color={tag.color}>
+            <scale-tag
+              size={tag.size || 'small'}
+              type={tag.type || 'strong'}
+              color={tag.color || 'standard'}
+            >
               {tag.content}
             </scale-tag>
           </li>

diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
@@ -212,7 +212,11 @@
           'One',
           'Lorem ipsum dolor sit amet sime',
           'http://example.com',
-          'Simple, Short',
+          [
+            { content: 'Apple', color: 'red', size: 'standard' },
+            { content: 'Pear', color: 'green', type: 'strong' },
+            { content: 'Bug' },
+          ],
           '00:00:20',
           102045.0,
           false,

diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       },
       description: `(optional) Title for sortable columns`,
       control: { type: null },
-    },    
+    },
     height: {
       table: {
         type: { summary: 'string' },
@@ -669,7 +669,7 @@ Expected format: string
 
 ## Tags Cell
 
-Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with content and color keys, e.g. `{content: 'Apple', color: 'red'}`
+Expected format: comma delimited `string`, eg `'one, two, three'` or array of objects with required content key and optional color, type, size keys, e.g. `{content: 'Apple', color: 'red'}`. Acceptable values for color, type, size are same as for Tag component.
 
 <Canvas withSource="close">
   <Story name="Tags Cell">