feat(tags): support removable (#1266)

* feat(tags): support removable

* set connotation outline

* icon color

* ui

* revert

* Update components/tags/src/vwc-tag.scss

Co-authored-by: rachelbt <rachelbt@users.noreply.github.com>

Co-authored-by: rachelbt <rachelbt@users.noreply.github.com>

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 {
 		</span>`;
 	}
 
+	protected renderRemoveButton(): TemplateResult {
+		return html`<button class="remove-button" @click="${()=> this.remove()}">
+			${this.renderIcon('close-line')}
+		</button>`;
+	}
+
 	override render(): TemplateResult {
 		return this.selectable
 			? this.renderTagSelectable()
 			: html`<span class="vwc-tag ${classMap(this.getRenderClasses())}">
 			${this.text}
+			${this.removable ? this.renderRemoveButton() : nothing}
 		</span>`;
 	}
 

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;
+	}
+}

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 };