feat(tag): mobile optimisation (#1163)

telekom · Oct 27, 2022 · 3ac7fd1 · 3ac7fd1
1 parent 6839bc7
commit 3ac7fd1
Show file tree

Hide file tree

Showing 32 changed files with 375 additions and 203 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
@@ -24,7 +24,9 @@ export const TagsCell: Cell = {
       <ul class={`tbody__tag-list`}>
         {tags.map((tag) => (
           <li>
-            <scale-tag size="small">{tag}</scale-tag>
+            <scale-tag size="small" type="strong">
+              {tag}
+            </scale-tag>
           </li>
         ))}
       </ul>

diff --git a/packages/components/src/components/tag/__snapshots__/tag.spec.ts.snap b/packages/components/src/components/tag/__snapshots__/tag.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Tag should have a link 1`] = `
 <scale-tag href="#">
   <mock:shadow-root>
-    <a class="tag tag--link" href="#" part="base link" target="_self">
+    <a class="tag tag--color-standard tag--link tag--type-standard" href="#" part="base type-standard color-standard link" target="_self">
       <slot></slot>
     </a>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`Tag should have a link 1`] = `
 exports[`Tag should match snapshot 1`] = `
 <scale-tag>
   <mock:shadow-root>
-    <span class="tag" part="base">
+    <span class="tag tag--color-standard tag--type-standard" part="base type-standard color-standard">
       <slot></slot>
     </span>
   </mock:shadow-root>

diff --git a/packages/components/src/components/tag/readme.md b/packages/components/src/components/tag/readme.md
@@ -31,16 +31,17 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                    | Type          | Default     |
-| ------------- | -------------- | ------------------------------ | ------------- | ----------- |
-| `disabled`    | `disabled`     | (optional) Tag disabled        | `boolean`     | `false`     |
-| `dismissText` | `dismiss-text` | (optional) Dismiss label       | `string`      | `'dismiss'` |
-| `dismissable` | `dismissable`  | (optional) Tag dismissable     | `boolean`     | `false`     |
-| `href`        | `href`         | (optional) Tag href            | `string`      | `''`        |
-| `size`        | `size`         | (optional) Tag size            | `"small"`     | `undefined` |
-| `styles`      | `styles`       | (optional) Injected CSS styles | `string`      | `undefined` |
-| `target`      | `target`       | (optional) Tag target          | `string`      | `'_self'`   |
-| `variant`     | `variant`      | (optional) Tag variant         | `"secondary"` | `undefined` |
+| Property      | Attribute      | Description                    | Type                                                                                                                                   | Default      |
+| ------------- | -------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `color`       | `color`        | (optional) Tag color           | `"black" \| "brown" \| "cyan" \| "dismissable" \| "green" \| "grey" \| "olive" \| "orange" \| "red" \| "teal" \| "violet" \| "yellow"` | `'grey'`     |
+| `disabled`    | `disabled`     | (optional) Tag disabled        | `boolean`                                                                                                                              | `false`      |
+| `dismissText` | `dismiss-text` | (optional) Dismiss label       | `string`                                                                                                                               | `'dismiss'`  |
+| `dismissable` | `dismissable`  | (optional) Tag dismissable     | `boolean`                                                                                                                              | `false`      |
+| `href`        | `href`         | (optional) Tag href            | `string`                                                                                                                               | `''`         |
+| `size`        | `size`         | (optional) Tag size            | `"small"`                                                                                                                              | `undefined`  |
+| `styles`      | `styles`       | (optional) Injected CSS styles | `string`                                                                                                                               | `undefined`  |
+| `target`      | `target`       | (optional) Tag target          | `string`                                                                                                                               | `'_self'`    |
+| `type`        | `type`         | (optional) Tag type            | `"standard" \| "strong"`                                                                                                               | `'standard'` |
 
 
 ## Events