From c37890d4b40297502e2e81a7931bda04c0b7358b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 06:06:19 -0800
Subject: [PATCH] feat(tag): dispatch close event

---
 COMPONENT_INDEX.md                | 13 +++++++------
 docs/src/COMPONENT_API.json       |  3 ++-
 docs/src/pages/components/Tag.svx |  2 +-
 src/Tag/Tag.svelte                |  7 +++++++
 tests/Tag.test.svelte             |  2 +-
 types/Tag/Tag.d.ts                |  1 +
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4c564958..66087abf 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3640,12 +3640,13 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| click      | forwarded  | --     |
+| mouseover  | forwarded  | --     |
+| mouseenter | forwarded  | --     |
+| mouseleave | forwarded  | --     |
+| close      | dispatched | --     |
 
 ## `TagSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 67d35712..74ccddda 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7859,7 +7859,8 @@
         { "type": "forwarded", "name": "click", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
-        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }
+        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
+        { "type": "dispatched", "name": "close" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div | span" }
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 42b18770..19bc9b81 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -25,7 +25,7 @@
 
 ### Filterable
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:close>Filterable</Tag>
 
 ### Custom icon
 
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index d5bcb159..747cfdd7 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -30,6 +30,10 @@
 
   import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 {#if skeleton}
@@ -70,6 +74,9 @@
         disabled="{disabled}"
         title="{title}"
         on:click|stopPropagation
+        on:click|stopPropagation="{() => {
+          dispatch('close');
+        }}"
         on:mouseover
         on:mouseenter
         on:mouseleave
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index 7e5cc57e..25524fdf 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -27,7 +27,7 @@
 
 <Tag type="high-contrast">high-contrast</Tag>
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:click on:close>Filterable</Tag>
 
 <Tag icon="{Add16}">Custom icon</Tag>
 
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index 20d122dc..010de5fb 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -65,5 +65,6 @@ export default class Tag {
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }