From b2560a21ac690a7be5b741697bfd87e00a2d2143 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 22 Jan 2021 13:04:42 -0800
Subject: [PATCH] feat(tag): support custom icon variant

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

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f0012a7b..263c27ba 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3593,6 +3593,7 @@ None.
 | disabled  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to disable a filterable tag              |
 | 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 6564f1f6..787022ad 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7720,6 +7720,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 0b197a1d..42b18770 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -1,5 +1,7 @@
 <script>
   import { Tag } from "carbon-components-svelte";
+  import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
+  import Document16 from "carbon-icons-svelte/lib/Document16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -25,6 +27,13 @@
 
 <Tag filter on:click>Filterable</Tag>
 
+### Custom icon
+
+Note: rendering a custom icon cannnot be used with the filterable variant.
+
+<Tag icon={IbmCloud16}>IBM Cloud</Tag>
+<Tag icon={Document16} type="blue">API documentation</Tag>
+
 ### Skeleton
 
 <Tag skeleton />
\ No newline at end of file
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 3ead6e74..d5bcb159 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -19,6 +19,12 @@
   /** Set the title for the close button in a filterable tag */
   export let title = "Clear filter";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -53,6 +59,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'}"
+      {...$$restProps}
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -71,7 +78,8 @@
       </button>
     </div>
   {:else}
-    <span
+    <div
+      id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--red="{type === 'red'}"
@@ -85,12 +93,20 @@
       class:bx--tag--cool-gray="{type === 'cool-gray'}"
       class:bx--tag--warm-gray="{type === 'warm-gray'}"
       class:bx--tag--high-contrast="{type === 'high-contrast'}"
+      {...$$restProps}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-      <slot />
-    </span>
+      {#if icon}
+        <div class:bx--tag__custom-icon="{true}">
+          <svelte:component this="{icon}" />
+        </div>
+      {/if}
+      <span>
+        <slot />
+      </span>
+    </div>
   {/if}
 {/if}
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index db53c202..7e5cc57e 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Tag } from "../types";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
 </script>
 
 <Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
@@ -28,4 +29,6 @@
 
 <Tag filter on:click>Filterable</Tag>
 
+<Tag icon="{Add16}">Custom icon</Tag>
+
 <Tag skeleton />
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index ee4e105a..20d122dc 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -43,6 +43,11 @@ export interface TagProps
    */
   title?: string;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
   /**
    * Set an id for the filterable tag
    * @default "ccs-" + Math.random().toString(36)