From 6c6defc4c9868491e1eaf81c418933212d11817a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 19 Jul 2020 12:20:36 -0700
Subject: [PATCH] fix(tag): set restProps.class after class value

---
 src/Tag/Tag.Story.svelte |  7 ++-----
 src/Tag/Tag.stories.js   |  9 +++++++++
 src/Tag/Tag.svelte       | 10 ++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Tag/Tag.Story.svelte b/src/Tag/Tag.Story.svelte
index 2c53e7c1..8ed4998f 100644
--- a/src/Tag/Tag.Story.svelte
+++ b/src/Tag/Tag.Story.svelte
@@ -1,9 +1,6 @@
 <script>
-  export let disabled = undefined;
-  export let filter = undefined;
   export let slot = undefined;
   export let story = undefined;
-  export let type = undefined;
 
   import Tag from "./Tag.svelte";
   import TagSkeleton from "./Tag.Skeleton.svelte";
@@ -12,7 +9,7 @@
 <div>
   {#if story === 'filter'}
     <Tag
-      {filter}
+      {...$$restProps}
       on:click={() => {
         console.log('click');
       }}>
@@ -21,6 +18,6 @@
   {:else if story === 'skeleton'}
     <TagSkeleton />
   {:else}
-    <Tag {disabled} {type} class="class">{slot}</Tag>
+    <Tag {...$$restProps} class="class">{slot}</Tag>
   {/if}
 </div>
diff --git a/src/Tag/Tag.stories.js b/src/Tag/Tag.stories.js
index 16cffe04..ac9aaedc 100644
--- a/src/Tag/Tag.stories.js
+++ b/src/Tag/Tag.stories.js
@@ -38,6 +38,15 @@ export const Filter = () => ({
   props: {
     story: "filter",
     filter: true,
+    type: select(
+      "Tag type (type)",
+      Object.keys(TYPES).reduce(
+        (items, item) => ({ ...items, [`${item} (${item})`]: item }),
+        {}
+      ),
+      "red"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
     slot: text("Content ($$slot)", "This is a tag"),
   },
 });
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index df023780..ef5611ad 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -11,12 +11,13 @@
 {#if filter}
   <div
     aria-label={title}
+    {id}
     class:bx--tag={true}
     class:bx--tag--disabled={disabled}
     class:bx--tag--filter={filter}
-    class="bx--tag--{type}"
-    {id}
-    {...$$restProps}>
+    {...$$restProps}
+    class="{type && `bx--tag--${type}`}
+    {$$restProps.class}">
     <slot props={{ class: 'bx--tag__label' }}>
       <span class:bx--tag__label={true}>{type}</span>
     </slot>
@@ -36,8 +37,9 @@
   <span
     class:bx--tag={true}
     class:bx--tag--disabled={disabled}
-    class="bx--tag--{type}"
     {...$$restProps}
+    class="{type && `bx--tag--${type}`}
+    {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter