diff --git a/components/tags/src/vwc-tag-base.ts b/components/tags/src/vwc-tag-base.ts index 8583bb0da..23b3c9bbe 100644 --- a/components/tags/src/vwc-tag-base.ts +++ b/components/tags/src/vwc-tag-base.ts @@ -8,6 +8,7 @@ import type { ClassInfo } from 'lit-html/directives/class-map.js'; import { LitElement, html, property, TemplateResult, queryAsync, state, query, eventOptions } from 'lit-element'; +import { nothing } from 'lit-html'; type TagConnotation = Extract< @@ -44,6 +45,9 @@ export class VWCTagBase extends LitElement { @property({ type: Boolean, reflect: true }) selectable = false; + @property({ type: Boolean, reflect: true }) + removable = false; + @state() protected shouldRenderRipple = false; protected rippleHandlers = new RippleHandlers(() => { @@ -120,11 +124,18 @@ export class VWCTagBase extends LitElement { `; } + protected renderRemoveButton(): TemplateResult { + return html``; + } + override render(): TemplateResult { return this.selectable ? this.renderTagSelectable() : html` ${this.text} + ${this.removable ? this.renderRemoveButton() : nothing} `; } diff --git a/components/tags/src/vwc-tag.scss b/components/tags/src/vwc-tag.scss index 141bc5756..b275efeb1 100644 --- a/components/tags/src/vwc-tag.scss +++ b/components/tags/src/vwc-tag.scss @@ -83,6 +83,7 @@ &.vwc-tag--selected { &.layout-outlined { + border-color: var(#{layout.$vvd-layout-color-outline}); background-color: var(#{connotation.$vvd-color-connotation}-soft); color: var(#{connotation.$vvd-color-connotation}-contrast); } @@ -105,6 +106,7 @@ } > .vwc-tag__icon { + #{connotation.$vvd-color-connotation}: initial; block-size: var(#{tags-variables.$namespace-icon-checkmark--size}); inline-size: var(#{tags-variables.$namespace-icon-checkmark--size}); @@ -126,3 +128,11 @@ // } // } +.remove-button { + all: unset; + margin-inline-start: 10px; + + .vwc-tag__icon { + --vvd-icon-size: 12px; + } +} diff --git a/components/tags/stories/tag.stories.js b/components/tags/stories/tag.stories.js index 4f7c71abd..643324594 100644 --- a/components/tags/stories/tag.stories.js +++ b/components/tags/stories/tag.stories.js @@ -25,3 +25,6 @@ Outlined.args = { text: 'Outlined', layout: 'outlined' }; export const Selected = Template.bind({}); Selected.args = { text: 'Selected', selectable: true, selected: true }; + +export const Removable = Template.bind({}); +Removable.args = { text: 'Removable', Removable: true }; diff --git a/ui-tests/snapshots/vwc-tags.png b/ui-tests/snapshots/vwc-tags.png index 6f4ec6d9e..7546c0651 100644 Binary files a/ui-tests/snapshots/vwc-tags.png and b/ui-tests/snapshots/vwc-tags.png differ