-
+
diff --git a/packages/components/src/components/tag/readme.md b/packages/components/src/components/tag/readme.md
index 29ba4f64e4..54b38dffce 100644
--- 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
diff --git a/packages/components/src/components/tag/tag.css b/packages/components/src/components/tag/tag.css
index 4db3c51c31..e9a9c8b190 100644
--- a/packages/components/src/components/tag/tag.css
+++ b/packages/components/src/components/tag/tag.css
@@ -16,31 +16,34 @@
--line-height: var(--telekom-typography-line-spacing-standard);
--font-weight: var(--telekom-typography-font-weight-bold);
--radius: var(--telekom-radius-small);
- --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
- var(--telekom-color-functional-focus);
+ --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) #2238df;
--icon-color: var(--color);
--icon-color-hover: var(--color);
- --color-secondary: var(--telekom-color-text-and-icon-white-standard);
- --background-secondary: var(--telekom-color-additional-teal-600);
- --background-secondary-hover: var(--telekom-color-ui-state-fill-hovered);
- --background-secondary-active: var(--telekom-color-ui-state-fill-pressed);
--background-disabled: var(--telekom-color-ui-disabled);
--color-disabled: var(--telekom-color-text-and-icon-disabled);
--spacing-left-dismissable: var(--telekom-spacing-unit-x05);
- --border-button-dismissable-focus: 1px solid
- var(--telekom-color-ui-border-standard);
+ --border-button-dismissable-focus: 1px solid transparent;
--box-shadow-button-dismissable-focus: var(--box-shadow-focus);
--background-button-dismissable-hover: var(
+ --telekom-color-ui-state-fill-hovered
+ );
+ --background-button-standard-strong-dismissible-hover: var(
--telekom-color-ui-state-fill-hovered-inverted
);
+ --background-button-standard-dismissible-hover: var(
+ --telekom-color-ui-state-fill-hovered
+ );
--background-button-dismissable-active: var(
- --telekom-color-ui-state-fill-pressed-inverted
+ --telekom-color-ui-state-fill-pressed
);
- --height-button-dismissable-small: 20px;
+ --height-button-dismissable: 20px;
+ --width-button-dismissable: 20px;
+ --height-button-dismissable-small: 18px;
+ --width-button-dismissable-small: 18px;
--spacing-small: 0 var(--telekom-spacing-unit-x2);
--font-size-small: var(--telekom-typography-font-size-small);
@@ -51,7 +54,7 @@
border: 1px solid transparent;
display: inline-flex;
outline: none;
- padding: 0 10px;
+ padding: 0 8px;
text-align: center;
transition: all 0.15s ease-in-out;
align-items: center;
@@ -67,74 +70,114 @@
cursor: default;
}
-.tag--variant-secondary {
- background: var(--background-secondary);
- color: var(--color-secondary);
-}
-
.tag scale-icon-action-close {
color: var(--icon-color);
- transition: all 0.15s ease-in-out;
}
.tag:not(.tag--disabled) scale-icon-action-close:hover {
color: var(--icon-color-hover);
}
-.tag--variant-secondary scale-icon-action-close,
-.tag--variant-secondary:not(.tag--disabled) scale-icon-action-close:hover {
- color: var(--color-secondary);
+
+.tag::slotted(*) {
+ padding: 100px;
}
+/**
+dismissable
+**/
+
.tag--dismissable {
- padding-right: 0;
+ padding: 0 0 0 8px;
}
.tag--dismissable button {
border: none;
cursor: pointer;
- height: 24px;
+ height: var(--height-button-dismissable);
+ width: var(--width-button-dismissable);
margin: 0;
outline: none;
padding: 0;
background: transparent;
margin-left: var(--spacing-left-dismissable);
border-radius: var(--radius);
+ align-items: center;
+}
+.tag--dismissable scale-icon-action-close {
+ padding-top: 0.5px;
+ height: 20px; /*magic number*/
+ align-items: center;
}
-
.tag--dismissable button:focus {
border: var(--border-button-dismissable-focus);
- background: var(--background-button-dismissable-focus);
+ justify-content: center;
box-shadow: var(--box-shadow-button-dismissable-focus);
}
-.tag--dismissable button:hover {
+.tag--dismissable:not(.tag--disabled) button:hover {
background: var(--background-button-dismissable-hover);
}
+.tag--dismissable.tag--color-grey:not(.tag--disabled) button:hover {
+ background: var(--background-button-standard-dismissible-hover);
+}
+.tag--dismissable.tag--type-strong.tag--color-grey:not(.tag--disabled)
+ button:hover {
+ background: var(--background-button-standard-strong-dismissible-hover);
+}
.tag--dismissable button:active {
background: var(--background-button-dismissable-active);
}
+.tag--dismissable.tag--color-grey button:active {
+ background: var(--background-button-standard-dismissible-hover);
+}
+.tag--dismissable.tag--type-strong.tag--color-grey button:active {
+ background: var(--background-button-standard-strong-dismissible-hover);
+}
.tag--dismissable button:focus scale-icon-action-close {
- top: -1px;
- position: relative;
+ margin-top: -1px;
}
+
+/**
+size small
+**/
+
.tag--size-small {
- padding: var(--spacing-small);
font-size: var(--font-size-small);
- line-height: var(--line-height-small);
+ padding: 0 6px;
}
.tag--size-small.tag--dismissable {
- padding-right: 0;
+ padding-right: 0px;
}
.tag--size-small.tag--dismissable button {
height: var(--height-button-dismissable-small);
+ width: var(--width-button-dismissable-small);
+}
+.tag--size-small.tag--dismissable scale-icon-action-close {
+ height: var(--height-button-dismissable-small);
+ margin-top: -0.5px;
}
-.tag--variant-secondary.tag--dismissable {
- background: var(--background-secondary);
- color: var(--color-secondary);
+.tag--size-small.tag--dismissable button:focus scale-icon-action-close {
+ height: var(--height-button-dismissable-small);
+ margin-top: -1.4px;
}
-.tag--variant-secondary.tag--disabled {
- opacity: 0.5;
+/**
+disabled
+**/
+
+.tag--disabled {
+ background-color: var(--telekom-color-ui-faint) !important;
+ color: var(--color-disabled) !important;
+ pointer-events: none;
+}
+.tag--disabled scale-icon-action-close {
+ color: var(--color-disabled) !important;
+ pointer-events: none;
}
+
+/**
+link
+**/
+
.tag--link {
text-decoration: none;
}
@@ -142,35 +185,155 @@
border: 1px solid white;
box-shadow: var(--box-shadow-focus);
}
-.tag--link.tag--variant-secondary {
+.tag--link {
background: var(--background-secondary);
}
-.tag--link.tag--variant-secondary:hover {
+.tag--link:hover {
background: var(--background-secondary);
}
-.tag--variant-secondary.tag--dismissable button:hover {
- background: var(--background-secondary-hover);
+.tag--link:focus {
+ border: 1px solid white;
}
-.tag--variant-secondary.tag--dismissable button:active {
- background: var(--background-secondary-hover);
+
+/**
+standard type
+**/
+
+/*standard*/
+.tag--type-standard.tag--color-grey {
+ background-color: var(--telekom-color-ui-faint);
+ color: var(--telekom-color-text-and-icon-standard);
}
-.tag--link.tag--variant-secondary:focus {
- border: 1px solid white;
+.tag--type-standard.tag--color-grey.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-standard);
}
-.tag--disabled {
- background: var(--background-disabled);
- color: var(--color-disabled);
- cursor: not-allowed;
- color: var(--color-disabled);
+/*cyan*/
+.tag--type-standard.tag--color-cyan {
+ background-color: var(--telekom-color-additional-cyan-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-cyan);
}
-.tag--disabled scale-icon-action-close {
- color: var(--color-disabled);
+.tag--type-standard.tag--color-cyan.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-cyan);
+}
+/*yellow*/
+.tag--type-standard.tag--color-yellow {
+ background-color: var(--telekom-color-additional-yellow-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-yellow);
+}
+.tag--type-standard.tag--color-yellow.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-yellow);
+}
+/*green*/
+.tag--type-standard.tag--color-green {
+ background-color: var(--telekom-color-functional-success-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-success);
+}
+.tag--type-standard.tag--color-green.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-success);
+}
+/*orange*/
+.tag--type-standard.tag--color-orange {
+ background-color: var(--telekom-color-functional-warning-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-warning);
+}
+.tag--type-standard.tag--color-orange.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-warning);
+}
+/*red*/
+.tag--type-standard.tag--color-red {
+ background-color: var(--telekom-color-functional-danger-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-danger);
+}
+.tag--type-standard.tag--color-red.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-danger);
+}
+/*violet*/
+.tag--type-standard.tag--color-violet {
+ background-color: var(--telekom-color-additional-violet-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-violet);
+}
+.tag--type-standard.tag--color-violet.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-violet);
+}
+/*brown*/
+.tag--type-standard.tag--color-brown {
+ background-color: var(--telekom-color-additional-brown-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-brown);
+}
+.tag--type-standard.tag--color-brown.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-brown);
+}
+/*olive*/
+.tag--type-standard.tag--color-olive {
+ background-color: var(--telekom-color-additional-olive-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-olive);
+}
+.tag--type-standard.tag--color-olive.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-olive);
+}
+/*teal*/
+.tag--type-standard.tag--color-teal {
+ background-color: var(--telekom-color-additional-teal-subtle);
+ color: var(--telekom-color-text-and-icon-on-subtle-teal);
+}
+
+.tag--type-standard.tag--color-teal.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-on-subtle-teal);
+}
+
+/*
+*
+strong type
+*
+*/
+.tag--type-strong {
+ color: var(--telekom-color-text-and-icon-standard);
+}
+.tag--type-strong.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-additional);
+}
+/*standard*/
+.tag--type-strong.tag--color-grey {
+ background-color: var(--telekom-color-ui-extra-strong);
+ color: var(--telekom-color-text-and-icon-inverted-standard);
+}
+.tag--type-strong.tag--color-grey.tag--dismissable scale-icon-action-close {
+ color: var(--telekom-color-text-and-icon-inverted-standard);
+}
+/*cyan*/
+.tag--type-strong.tag--color-cyan {
+ background-color: var(--telekom-color-additional-cyan-400);
+}
+/*yellow*/
+.tag--type-strong.tag--color-yellow {
+ background-color: var(--telekom-color-additional-yellow-400);
+}
+/*green*/
+.tag--type-strong.tag--color-green {
+ background-color: var(--telekom-color-functional-success-standard);
+}
+/*orange*/
+.tag--type-strong.tag--color-orange {
+ background-color: var(--telekom-color-functional-warning-standard);
+}
+/*red*/
+.tag--type-strong.tag--color-red {
+ background-color: var(--telekom-color-functional-danger-standard);
+}
+/*violet*/
+.tag--type-strong.tag--color-violet {
+ background-color: var(--telekom-color-additional-violet-300);
+}
+/*brown*/
+.tag--type-strong.tag--color-brown {
+ background-color: var(--telekom-color-additional-brown-400);
}
-.tag--disabled button {
- cursor: not-allowed;
+/*olive*/
+.tag--type-strong.tag--color-olive {
+ background-color: var(--telekom-color-additional-olive-400);
}
-.tag--disabled button:hover {
- cursor: not-allowed;
- background: var(--background-disabled);
+/*teal*/
+.tag--type-strong.tag--color-teal {
+ background-color: var(--telekom-color-additional-teal-400);
}
diff --git a/packages/components/src/components/tag/tag.spec.ts b/packages/components/src/components/tag/tag.spec.ts
index e7b39ee40f..8f67380ec6 100644
--- a/packages/components/src/components/tag/tag.spec.ts
+++ b/packages/components/src/components/tag/tag.spec.ts
@@ -38,8 +38,8 @@ describe('Tag', () => {
element.size = 'small';
expect(element.getCssClassMap()).toContain('tag--size-small');
- element.variant = 'primary';
- expect(element.getCssClassMap()).toContain('tag--variant-primary');
+ element.type = 'strong';
+ expect(element.getCssClassMap()).toContain('tag--type-strong');
element.href = 'http://example.com';
expect(element.getCssClassMap()).toContain('tag--link');
diff --git a/packages/components/src/components/tag/tag.tsx b/packages/components/src/components/tag/tag.tsx
index 6d2acac38e..a61c0b0779 100644
--- a/packages/components/src/components/tag/tag.tsx
+++ b/packages/components/src/components/tag/tag.tsx
@@ -20,8 +20,22 @@ import { emitEvent } from '../../utils/utils';
export class Tag {
/** (optional) Tag size */
@Prop() size?: 'small';
- /** (optional) Tag variant */
- @Prop() variant?: 'secondary';
+ /** (optional) Tag type */
+ @Prop() type?: 'standard' | 'strong' = 'standard';
+ /** (optional) Tag color */
+ @Prop() color?:
+ | 'cyan'
+ | 'yellow'
+ | 'green'
+ | 'orange'
+ | 'red'
+ | 'violet'
+ | 'brown'
+ | 'olive'
+ | 'teal'
+ | 'black'
+ | 'dismissable'
+ | 'grey' = 'grey';
/** (optional) Tag href */
@Prop() href?: string = '';
/** (optional) Tag target */
@@ -80,10 +94,7 @@ export class Tag {
aria-label={this.dismissText}
onClick={this.handleClose}
>
-
+
)}
@@ -106,7 +117,8 @@ export class Tag {
return classNames(
mode === 'basePart' ? 'base' : component,
this.size && `${prefix}size-${this.size}`,
- this.variant && `${prefix}variant-${this.variant}`,
+ this.type && `${prefix}type-${this.type}`,
+ this.color && `${prefix}color-${this.color}`,
!!this.href && `${prefix}link`,
!!this.dismissable && `${prefix}dismissable`,
!!this.disabled && `${prefix}disabled`
diff --git a/packages/storybook-vue/stories/components/table/Table.stories.mdx b/packages/storybook-vue/stories/components/table/Table.stories.mdx
index ea25229516..efd5be3d5b 100644
--- a/packages/storybook-vue/stories/components/table/Table.stories.mdx
+++ b/packages/storybook-vue/stories/components/table/Table.stories.mdx
@@ -50,12 +50,12 @@ export const Template = (args, { argTypes }) => ({
-
- Other
- - N/A
- - Demo
+ - N/A
+ - Demo
|
@@ -78,12 +78,12 @@ export const Template = (args, { argTypes }) => ({
|
-
- Other
- - N/A
- - Demo
+ - N/A
+ - Demo
|
@@ -106,12 +106,12 @@ export const Template = (args, { argTypes }) => ({
|
-
- Other
- - N/A
- - Demo
+ - N/A
+ - Demo
|
diff --git a/packages/storybook-vue/stories/components/tag/ScaleTag.vue b/packages/storybook-vue/stories/components/tag/ScaleTag.vue
index 3122ae2eeb..06ecc27877 100644
--- a/packages/storybook-vue/stories/components/tag/ScaleTag.vue
+++ b/packages/storybook-vue/stories/components/tag/ScaleTag.vue
@@ -1,5 +1,5 @@
diff --git a/packages/storybook-vue/stories/components/tag/Tag.stories.mdx b/packages/storybook-vue/stories/components/tag/Tag.stories.mdx
index 408a3e98a4..5f6cc4a4d5 100644
--- a/packages/storybook-vue/stories/components/tag/Tag.stories.mdx
+++ b/packages/storybook-vue/stories/components/tag/Tag.stories.mdx
@@ -12,15 +12,35 @@ import { action } from '@storybook/addon-actions';
title="Components/Tag"
component={ScaleTag}
argTypes={{
- variant: {
- control: { type: 'select', options: ['default', 'secondary'] },
- },
size: {
control: { type: 'select', options: ['default', 'small'] },
},
label: {
control: { type: 'text' },
},
+ color: {
+ control: {
+ type: 'select',
+ options: [
+ 'cyan',
+ 'yellow',
+ 'green',
+ 'orange',
+ 'red',
+ 'violet',
+ 'brown',
+ 'olive',
+ 'teal',
+ 'grey',
+ ],
+ },
+ },
+ type: {
+ control: {
+ type: 'select',
+ options: ['strong', 'standard'],
+ },
+ },
styles: {
control: { disable: true },
},
@@ -39,7 +59,8 @@ export const Template = (args, { argTypes }) => ({
:href="href"
:size="size"
:target="target"
- :variant="variant"
+ :color="color"
+ :type="type"
@scaleClose="action('scaleClose')($event)"
>
{{ label }}
@@ -52,23 +73,35 @@ export const Template = (args, { argTypes }) => ({
export const TemplateInteractive = (args, { argTypes }) => ({
template: `
-
- -
+
+ -
- {{fruit}}
+ {{color}}
+
+
+
+ {{color}}
`,
methods: {
action: action('scaleClose'),
- removeFruit(fruit) {
+ removeColor(color) {
this.action();
- this.fruits = this.fruits.filter((x) => x !== fruit);
+ this.colors = this.colors.filter((x) => x !== color);
setTimeout(() => {
this.$el.querySelector('#root > ul > li > scale-tag') &&
this.$el
@@ -79,7 +112,18 @@ export const TemplateInteractive = (args, { argTypes }) => ({
},
},
data: () => ({
- fruits: ['Melon', 'Banana', 'Pear'],
+ colors: [
+ 'grey',
+ 'cyan',
+ 'yellow',
+ 'green',
+ 'orange',
+ 'red',
+ 'violet',
+ 'brown',
+ 'olive',
+ 'teal',
+ ],
}),
});
@@ -154,13 +198,13 @@ export const TemplateInteractive = (args, { argTypes }) => ({
For Shadow Parts, please inspect the element's #shadow.
-## A dissmisable tag
+## Dismissable tag
```html
-A dissmisable tag
+A dismissable tag
```
-## A small tag
+## Small tag
|