From a76ebe3a99a4574ac88db5646258498b2bef9ee9 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <arturo@arturu.com>
Date: Thu, 19 Aug 2021 08:27:18 +0200
Subject: [PATCH 1/3] refactor(tag): improve _action_ in stories to reproduce
 bug

---
 .../stories/3_components/tag/ScaleTag.vue     | 25 -------------------
 .../stories/3_components/tag/Tag.stories.mdx  | 22 +++++++++-------
 2 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/packages/storybook-vue/stories/3_components/tag/ScaleTag.vue b/packages/storybook-vue/stories/3_components/tag/ScaleTag.vue
index 5d463b3cd9..db0bb6caad 100644
--- a/packages/storybook-vue/stories/3_components/tag/ScaleTag.vue
+++ b/packages/storybook-vue/stories/3_components/tag/ScaleTag.vue
@@ -1,23 +1,4 @@
-<template>
-  <scale-tag
-    :disabled="disabled"
-    :dismissable="dismissable"
-    :dismiss-text="dismissText"
-    :href="href"
-    :size="size"
-    :target="target"
-    :variant="variant"
-    @click="click"
-    @scaleClose="click"
-    :styles="styles"
-  >
-    <slot></slot>
-  </scale-tag>
-</template>
-
 <script>
-import { action } from "@storybook/addon-actions";
-
 export default {
   props: {
     disabled: { type: Boolean, default: false },
@@ -29,11 +10,5 @@ export default {
     variant: String,
     styles: String,
   },
-  methods: {
-    click: function ($event) {
-      action("click");
-      this.$emit("click", $event);
-    },
-  },
 };
 </script>
diff --git a/packages/storybook-vue/stories/3_components/tag/Tag.stories.mdx b/packages/storybook-vue/stories/3_components/tag/Tag.stories.mdx
index 95c8a8ebbf..c011f60532 100644
--- a/packages/storybook-vue/stories/3_components/tag/Tag.stories.mdx
+++ b/packages/storybook-vue/stories/3_components/tag/Tag.stories.mdx
@@ -6,6 +6,7 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import ScaleTag from "./ScaleTag.vue";
+import { action } from "@storybook/addon-actions";
 
 <Meta
   title="Components/Tag"
@@ -27,34 +28,35 @@ import ScaleTag from "./ScaleTag.vue";
 />
 
 export const Template = (args, { argTypes }) => ({
-  components: { ScaleTag },
   props: {
     label: String,
     ...ScaleTag.props,
   },
   template: `
     <scale-tag
-    :disabled="disabled"
-    :dismissable="dismissable"
-    :href="href"
-    :size="size"
-    :target="target"
-    :variant="variant"
+      :disabled="disabled"
+      :dismissable="dismissable"
+      :href="href"
+      :size="size"
+      :target="target"
+      :variant="variant"
+      @scaleClose="action('scaleClose')($event)"
     >
     {{ label }}
     </scale-tag>
   `,
+  methods: {
+    action
+  }
 });
 
 export const TemplateInteractive = (args, { argTypes }) => ({
-  components: { ScaleTag },
   template: `
       <ul aria-label="fruits" style="display: flex; list-style: none; padding: 0;">
           <li v-for="fruit in fruits" :key="fruit" style="margin-right: 4px;">
             <scale-tag
                 dismissable="true"
                 v-bind:dismiss-text="'Remove ' + fruit + ' from the list'"
-                @click="removeFruit(fruit)"
                 @scaleClose="removeFruit(fruit)"
             >
                 {{fruit}}
@@ -63,7 +65,9 @@ export const TemplateInteractive = (args, { argTypes }) => ({
       </ul>
   `,
   methods: {
+    action: action('scaleClose'),
     removeFruit(fruit) {
+      this.action();
       this.fruits = this.fruits.filter((x) => x !== fruit);
       setTimeout(() => {
         this.$el.querySelector("#root > ul > li > scale-tag") &&

From 0bc6fd03aaea2afa33ec2c86a89c7ad23dc2cca0 Mon Sep 17 00:00:00 2001
From: Arturo <ac@iconstorm.com>
Date: Fri, 20 Aug 2021 09:35:55 +0200
Subject: [PATCH 2/3] fix(tag): keyboard support for dismiss button

---
 packages/components/src/components/tag/readme.md |  1 +
 packages/components/src/components/tag/tag.tsx   | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/tag/readme.md b/packages/components/src/components/tag/readme.md
index d2bd27cad7..8db8d043a8 100644
--- a/packages/components/src/components/tag/readme.md
+++ b/packages/components/src/components/tag/readme.md
@@ -55,6 +55,7 @@
 | Part                   | Description |
 | ---------------------- | ----------- |
 | `"button-dismissable"` |             |
+| `"icon-dismissable"`   |             |
 
 
 ## Dependencies
diff --git a/packages/components/src/components/tag/tag.tsx b/packages/components/src/components/tag/tag.tsx
index 96dac160ce..bc77722164 100644
--- a/packages/components/src/components/tag/tag.tsx
+++ b/packages/components/src/components/tag/tag.tsx
@@ -40,11 +40,14 @@ export class Tag {
   componentWillUpdate() {}
   disconnectedCallback() {}
 
-  handleClose(event) {
+  handleClose = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
+    if (this.disabled) {
+      return;
+    }
     this.scaleClose.emit(event);
-  }
+  };
 
   render() {
     const Element = !!this.href && !this.disabled ? 'a' : 'span';
@@ -54,11 +57,6 @@ export class Tag {
           target: this.target,
         }
       : {};
-    const iconProps = !this.disabled
-      ? {
-          onClick: (event) => this.handleClose(event),
-        }
-      : {};
 
     return (
       <Host>
@@ -76,11 +74,11 @@ export class Tag {
               part="button-dismissable"
               disabled={this.disabled}
               aria-label={this.dismissText}
+              onClick={this.handleClose}
             >
               <scale-icon-action-close
                 part="icon-dismissable"
                 size={this.size === 'small' ? 20 : 24}
-                {...iconProps}
               />
             </button>
           )}

From 15d8d8e15c31037aad0ab5c6cf314e2bbf784acc Mon Sep 17 00:00:00 2001
From: Arturo <ac@iconstorm.com>
Date: Fri, 20 Aug 2021 09:36:17 +0200
Subject: [PATCH 3/3] fix(tag): remove default black background for button

---
 packages/components/src/components/tag/tag.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/tag/tag.css b/packages/components/src/components/tag/tag.css
index 00988a6428..ada1a85e77 100644
--- a/packages/components/src/components/tag/tag.css
+++ b/packages/components/src/components/tag/tag.css
@@ -29,9 +29,9 @@
 
   --border-button-dismissable-focus: 1px solid
     var(--scl-color-background-standard);
-  --background-button-dismissable-focus: var(--scl-color-black);
+  --background-button-dismissable-focus: ;
   --box-shadow-button-dismissable-focus: var(--box-shadow-focus);
-  --background-button-dismissable-hover: var(--scl-color-black);
+  --background-button-dismissable-hover: ;
   --height-button-dismissable-small: 20px;
 
   --spacing-small: 0 var(--scl-spacing-8);
@@ -86,9 +86,6 @@
   border-radius: var(--radius);
 }
 
-.tag--dismissable scale-icon-action-close svg {
-  outline: none;
-}
 .tag--dismissable button:focus {
   border: var(--border-button-dismissable-focus);
   background: var(--background-button-dismissable-focus);