Add autoWidth prop to Tabs (#901)

* feat(tabs): support auto width tabs

Closes #899

* docs(tabs): add auto width example

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
 

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",

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" />

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>

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

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"