From 7cc95e452ba4c93828f7f9111b42a13f9f7a89ae Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 14 Oct 2021 15:30:43 -0700
Subject: [PATCH] feat(tag): support outline type

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

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 068b9ebd..22d8359e 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4041,6 +4041,17 @@ None.
 | title       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag        |
 | icon        | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>                                                                                                                                    | --                                               | Specify the icon from `carbon-icons-svelte` to render         |
 | id          | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag                              |
+| Prop name   | Kind             | Reactive | Type                                                                                                                                                                                                     | Default value                                    | Description                                                   |
+| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| type        | <code>let</code> | No       | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast" &#124; "outline"</code> | --                                               | Specify the type of tag                                       |
+| size        | <code>let</code> | No       | <code>"sm" &#124; "default"</code>                                                                                                                                                                       | <code>"default"</code>                           | --                                                            |
+| filter      | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to use filterable variant                       |
+| disabled    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to disable a filterable tag                     |
+| interactive | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to render a `button` element instead of a `div` |
+| skeleton    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to display the skeleton state                   |
+| title       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                      | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag        |
+| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                                                                                             | --                                               | Specify the icon from `carbon-icons-svelte` to render         |
+| id          | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                      | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag                              |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e201e2ae..358f6fe5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11037,7 +11037,7 @@
           "name": "type",
           "kind": "let",
           "description": "Specify the type of tag",
-          "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\"",
+          "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\" | \"outline\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index d4832c67..19008caf 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -25,6 +25,7 @@
 <Tag type="cool-gray">cool-gray</Tag>
 <Tag type="warm-gray">warm-gray</Tag>
 <Tag type="high-contrast">high-contrast</Tag>
+<Tag type="outline">outline</Tag>
 
 ### Filterable
 
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index a9c361f2..d232ccb6 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -3,7 +3,7 @@
 
   /**
    * Specify the type of tag
-   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"}
    */
   export let type = undefined;
 
@@ -70,6 +70,7 @@
     class:bx--tag--cool-gray="{type === 'cool-gray'}"
     class:bx--tag--warm-gray="{type === 'warm-gray'}"
     class:bx--tag--high-contrast="{type === 'high-contrast'}"
+    class:bx--tag--outline="{type === 'outline'}"
     {...$$restProps}
   >
     <slot props="{{ class: 'bx--tag__label' }}">
@@ -112,6 +113,7 @@
     class:bx--tag--cool-gray="{type === 'cool-gray'}"
     class:bx--tag--warm-gray="{type === 'warm-gray'}"
     class:bx--tag--high-contrast="{type === 'high-contrast'}"
+    class:bx--tag--outline="{type === 'outline'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -144,6 +146,7 @@
     class:bx--tag--cool-gray="{type === 'cool-gray'}"
     class:bx--tag--warm-gray="{type === 'warm-gray'}"
     class:bx--tag--high-contrast="{type === 'high-contrast'}"
+    class:bx--tag--outline="{type === 'outline'}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index 9396c8b9..5f4f5a33 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -27,6 +27,8 @@
 
 <Tag type="high-contrast">high-contrast</Tag>
 
+<Tag type="outline">outline</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 121612e1..4172d642 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -18,7 +18,8 @@ export interface TagProps
     | "gray"
     | "cool-gray"
     | "warm-gray"
-    | "high-contrast";
+    | "high-contrast"
+    | "outline";
 
   /**
    * @default "default"