feat(tabs): support auto width tabs

Closes #899

COMPONENT_INDEX.md

@@ -3985,9 +3985,10 @@ 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                     |
+| 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       |
 

docs/src/COMPONENT_API.json

@@ -10985,6 +10985,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",

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"