From 70a3b79ed3028c90cd606e983a878b54e7e50350 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Thu, 18 Mar 2021 15:51:17 -0700
Subject: [PATCH] feat(tabs): support "container" type for TabsSkeleton

---
 COMPONENT_INDEX.md                 |  7 ++++---
 docs/src/COMPONENT_API.json        | 10 ++++++++++
 docs/src/pages/components/Tabs.svx |  8 ++++++--
 src/Tabs/TabsSkeleton.svelte       | 24 ++++++++++++++----------
 types/Tabs/TabsSkeleton.d.ts       |  6 ++++++
 5 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 3543cdfd..1fe2a38b 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3682,9 +3682,10 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                | Default value  | Description                          |
-| :-------- | :--------------- | :------- | :------------------ | -------------- | ------------------------------------ |
-| count     | <code>let</code> | No       | <code>number</code> | <code>4</code> | Specify the number of tabs to render |
+| Prop name | Kind             | Reactive | Type                                      | Default value          | Description                          |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
+| count     | <code>let</code> | No       | <code>number</code>                       | <code>4</code>         | Specify the number of tabs to render |
+| type      | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs             |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index aee2c87c..620a86ff 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9148,6 +9148,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of tabs",
+          "type": "\"default\" | \"container\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],
diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index f76ca7c8..8ee54f13 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -37,6 +37,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
-### Skeleton
+### Skeleton (default)
 
-<TabsSkeleton count={3} />
\ No newline at end of file
+<TabsSkeleton count={3} />
+
+### Skeleton (container)
+
+<TabsSkeleton type="container" count={3} />
\ No newline at end of file
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte
index 9d5ed52b..a623f583 100644
--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@@ -1,27 +1,31 @@
 <script>
   /** Specify the number of tabs to render */
   export let count = 4;
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"}
+   */
+  export let type = "default";
 </script>
 
 <div
   class:bx--tabs="{true}"
   class:bx--skeleton="{true}"
+  class:bx--tabs--scrollable="{true}"
+  class:bx--tabs--scrollable--container="{type === 'container'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--tabs-trigger="{true}">
-    <div class:bx--tabs-trigger-text="{true}">&nbsp;</div>
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-  <ul class:bx--tabs__nav="{true}" class:bx--tabs__nav--hidden="{true}">
-    {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
-      <li class:bx--tabs__nav-item="{true}">
-        <div class:bx--tabs__nav-link="{true}">&nbsp;</div>
+  <ul class:bx--tabs--scrollable__nav="{true}">
+    {#each Array.from({ length: count }, (_, i) => i) as item}
+      <li class:bx--tabs--scrollable__nav-item="{true}">
+        <div class:bx--tabs__nav-link="{true}">
+          <span></span>
+        </div>
       </li>
     {/each}
   </ul>
diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts
index c6abc7a5..d9ff46dd 100644
--- a/types/Tabs/TabsSkeleton.d.ts
+++ b/types/Tabs/TabsSkeleton.d.ts
@@ -8,6 +8,12 @@ export interface TabsSkeletonProps
    * @default 4
    */
   count?: number;
+
+  /**
+   * Specify the type of tabs
+   * @default "default"
+   */
+  type?: "default" | "container";
 }
 
 export default class TabsSkeleton extends SvelteComponentTyped<