From ea6757d020fdc2287aac4b4ff3b15b4d72460e2a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 10 Nov 2021 19:46:20 -0800
Subject: [PATCH] Add autoWidth prop to `Tabs` (#901)

* feat(tabs): support auto width tabs

Closes #899

* docs(tabs): add auto width example
---
 COMPONENT_INDEX.md                 | 13 +++++++------
 docs/src/COMPONENT_API.json        | 11 +++++++++++
 docs/src/pages/components/Tabs.svx | 17 +++++++++++++++++
 src/Tabs/Tab.svelte                |  3 ++-
 src/Tabs/Tabs.svelte               |  6 ++++++
 types/Tabs/Tabs.svelte.d.ts        |  6 ++++++
 6 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6e0bf015..167272f8 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3986,12 +3986,13 @@ None.
 
 ### Props
 
-| Prop name       | Kind             | Reactive | Type                                      | Default value                    | Description                                 |
-| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- |
-| selected        | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>                   | Specify the selected tab index              |
-| type            | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code>           | Specify the type of tabs                    |
-| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
-| triggerHref     | <code>let</code> | No       | <code>string</code>                       | <code>"#"</code>                 | Specify the tab trigger href attribute      |
+| Prop name       | Kind             | Reactive | Type                                      | Default value                    | Description                                  |
+| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | -------------------------------------------- |
+| selected        | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>                   | Specify the selected tab index               |
+| type            | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code>           | Specify the type of tabs                     |
+| autoWidth       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>               | Set to `true` for tabs to have an auto-width |
+| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon  |
+| triggerHref     | <code>let</code> | No       | <code>string</code>                       | <code>"#"</code>                 | Specify the tab trigger href attribute       |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index f718c1ed..3c149a57 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -10997,6 +10997,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "autoWidth",
+          "kind": "let",
+          "description": "Set to `true` for tabs to have an auto-width",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",
diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index 8ee54f13..e89b5e44 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -20,6 +20,23 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
+### Auto width
+
+By default, the width of each tab is set to `10rem`.
+
+Set `autoWidth` to `true` for tabs to have an automatically set width.
+
+<Tabs autoWidth>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
 ### Reactive example
 
 <FileSource src="/framed/Tabs/TabsReactive" />
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 09d84ca0..c276e17e 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -22,7 +22,7 @@
 
   import { onMount, afterUpdate, getContext, tick } from "svelte";
 
-  const { selectedTab, add, update, change } = getContext("Tabs");
+  const { selectedTab, useAutoWidth, add, update, change } = getContext("Tabs");
 
   add({ id, label, disabled });
 
@@ -81,6 +81,7 @@
     id="{id}"
     href="{href}"
     class:bx--tabs__nav-link="{true}"
+    style="{$useAutoWidth ? 'width: auto' : undefined}"
   >
     <slot>{label}</slot>
   </a>
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 3b8e625d..a7b7f7b5 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -8,6 +8,9 @@
    */
   export let type = "default";
 
+  /** Set to `true` for tabs to have an auto-width */
+  export let autoWidth = false;
+
   /**
    * Specify the ARIA label for the chevron icon
    * @type {string}
@@ -27,6 +30,7 @@
   const tabsById = derived(tabs, (_) =>
     _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
+  const useAutoWidth = writable(autoWidth);
   const selectedTab = writable(undefined);
   const content = writable([]);
   const contentById = derived(content, (_) =>
@@ -39,6 +43,7 @@
     contentById,
     selectedTab,
     selectedContent,
+    useAutoWidth,
     add: (data) => {
       tabs.update((_) => [..._, { ...data, index: _.length }]);
     },
@@ -99,6 +104,7 @@
   $: if ($selectedTab) {
     dropdownHidden = true;
   }
+  $: useAutoWidth.set(autoWidth);
 </script>
 
 <div
diff --git a/types/Tabs/Tabs.svelte.d.ts b/types/Tabs/Tabs.svelte.d.ts
index 758b46ba..af27d978 100644
--- a/types/Tabs/Tabs.svelte.d.ts
+++ b/types/Tabs/Tabs.svelte.d.ts
@@ -15,6 +15,12 @@ export interface TabsProps
    */
   type?: "default" | "container";
 
+  /**
+   * Set to `true` for tabs to have an auto-width
+   * @default false
+   */
+  autoWidth?: boolean;
+
   /**
    * Specify the ARIA label for the chevron icon
    * @default "Show menu options"