From ce3a34ac9c26c05f797124ec171245dcd072070a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 16:05:13 -0800
Subject: [PATCH] feat(tag): support small size variant

---
 COMPONENT_INDEX.md                |  5 ++++-
 docs/src/COMPONENT_API.json       | 21 ++++++++++++++++++++-
 docs/src/pages/components/Tag.svx | 11 +++++++++--
 src/Tag/Tag.svelte                |  6 ++++++
 src/Tag/TagSkeleton.svelte        |  6 ++++++
 types/Tag/Tag.d.ts                |  5 +++++
 types/Tag/TagSkeleton.d.ts        |  7 ++++++-
 7 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 14f61622..07189306 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3629,6 +3629,7 @@ None.
 | 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"</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              |
 | skeleton  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to display the skeleton state            |
@@ -3656,7 +3657,9 @@ None.
 
 ### Props
 
-None.
+| Prop name | Kind             | Reactive | Type                               | Default value          | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
+| size      | <code>let</code> | No       | <code>"sm" &#124; "default"</code> | <code>"default"</code> | --          |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e0671ea1..91b47b5a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7803,7 +7803,17 @@
     {
       "moduleName": "TagSkeleton",
       "filePath": "/src/Tag/TagSkeleton.svelte",
-      "props": [],
+      "props": [
+        {
+          "name": "size",
+          "kind": "let",
+          "type": "\"sm\" | \"default\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "span" },
@@ -7827,6 +7837,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "size",
+          "kind": "let",
+          "type": "\"sm\" | \"default\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "filter",
           "kind": "let",
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 19bc9b81..04423048 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -9,6 +9,10 @@
 
 <Tag>IBM Cloud</Tag>
 
+### Small size
+
+<Tag size="sm">IBM Cloud</Tag>
+
 ### Tag types
 
 <Tag type="red">red</Tag>
@@ -32,8 +36,11 @@
 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
+<Tag skeleton />
+
+### Skeleton (small)
+
+<Tag size="sm" skeleton />
\ No newline at end of file
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 747cfdd7..bfce62d1 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -7,6 +7,9 @@
    */
   export let type = undefined;
 
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+
   /** Set to `true` to use filterable variant */
   export let filter = false;
 
@@ -38,6 +41,7 @@
 
 {#if skeleton}
   <TagSkeleton
+    size="{size}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -52,6 +56,7 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"
@@ -89,6 +94,7 @@
       id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"
diff --git a/src/Tag/TagSkeleton.svelte b/src/Tag/TagSkeleton.svelte
index 8071cd53..651c9b4d 100644
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@@ -1,5 +1,11 @@
+<script>
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+</script>
+
 <span
   class:bx--tag="{true}"
+  class:bx--tag--sm="{size === 'sm'}"
   class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index 010de5fb..cf27439f 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -19,6 +19,11 @@ export interface TagProps
     | "warm-gray"
     | "high-contrast";
 
+  /**
+   * @default "default"
+   */
+  size?: "sm" | "default";
+
   /**
    * Set to `true` to use filterable variant
    * @default false
diff --git a/types/Tag/TagSkeleton.d.ts b/types/Tag/TagSkeleton.d.ts
index 09ef38f2..4b804129 100644
--- a/types/Tag/TagSkeleton.d.ts
+++ b/types/Tag/TagSkeleton.d.ts
@@ -1,6 +1,11 @@
 /// <reference types="svelte" />
 
-export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {}
+export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
+  /**
+   * @default "default"
+   */
+  size?: "sm" | "default";
+}
 
 export default class TagSkeleton {
   $$prop_def: TagSkeletonProps;