feat(tabs): DLT-3162 add spread prop for horizontal distribution (#1135)

Author: francisrupert

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleTabs.vue

@@ -6,6 +6,7 @@
     :inverted="inverted"
     :borderless="borderless"
     :disabled="disabled"
+    :spread="spread"
     :orientation="orientation"
     :tab-list-class="orientation === 'vertical' ? 'd-w264' : undefined"
     :activation-mode="activationMode"
@@ -112,6 +113,11 @@ export default {
       default: 'manual',
     },
 
+    spread: {
+      type: String,
+      default: 'none',
+    },
+
     orientation: {
       type: String,
       default: 'horizontal',

apps/dialtone-documentation/docs/_data/tabs.json

@@ -20,6 +20,16 @@
       "applies": "N/A",
       "description": "Inverts the tablist to work on dark backgrounds."
     },
+    {
+      "class": "d-tablist--spread-grow",
+      "applies": ".d-tablist",
+      "description": "Tabs grow proportionally to fill available space. Longer labels get more room."
+    },
+    {
+      "class": "d-tablist--spread-equal",
+      "applies": ".d-tablist",
+      "description": "All tabs are the same width regardless of content length."
+    },
     {
       "class": "d-tab",
       "applies": "N/A",

apps/dialtone-documentation/docs/components/tabs.md

@@ -204,6 +204,66 @@ vueCode='
 '
 showHtmlWarning />
 
+## Spread
+
+Control how tabs distribute available horizontal space within the tab list. It only applies to horizontal tabs, and has no effect with `orientation="vertical"`.
+
+### Grow
+
+Tabs expand proportionally to fill the container. Longer labels receive more space.
+
+<code-well-header>
+  <div class="d-w100p">
+    <dt-tab-group spread="grow">
+      <template #tabs>
+        <dt-tab id="sg1" panel-id="sg2" selected>Tab 1</dt-tab>
+        <dt-tab id="sg3" panel-id="sg4">Tab the second</dt-tab>
+        <dt-tab id="sg5" panel-id="sg6">Tab the third</dt-tab>
+      </template>
+    </dt-tab-group>
+  </div>
+</code-well-header>
+
+<code-example-tabs
+vueCode='
+<dt-tab-group spread="grow">
+  <template #tabs>
+    <dt-tab id="1" panel-id="2" selected>Tab 1</dt-tab>
+    <dt-tab id="3" panel-id="4">Tab the second</dt-tab>
+    <dt-tab id="5" panel-id="6">Tab the third</dt-tab>
+  </template>
+</dt-tab-group>
+'
+showHtmlWarning />
+
+### Equal
+
+All tabs share the same width, regardless of label length.
+
+<code-well-header>
+  <div class="d-w100p">
+    <dt-tab-group spread="equal">
+      <template #tabs>
+        <dt-tab id="se1" panel-id="se2" selected>Tab 1</dt-tab>
+        <dt-tab id="se3" panel-id="se4">Tab the second</dt-tab>
+        <dt-tab id="se5" panel-id="se6">Tab the third</dt-tab>
+      </template>
+    </dt-tab-group>
+  </div>
+</code-well-header>
+
+<code-example-tabs
+vueCode='
+<dt-tab-group spread="equal">
+  <template #tabs>
+    <dt-tab id="1" panel-id="2" selected>Tab 1</dt-tab>
+    <dt-tab id="3" panel-id="4">Tab the second</dt-tab>
+    <dt-tab id="5" panel-id="6">Tab the third</dt-tab>
+  </template>
+</dt-tab-group>
+'
+showHtmlWarning />
+
 ## Sizes
 
 <code-well-header>

packages/combinator/src/variants/variants_tab_group.js

@@ -17,6 +17,46 @@ export default {
     },
   },
 
+  'spread tabs: equal': {
+    props: {
+      selected: { initialValue: 'panel-1' },
+      tabListClass: {
+        initialValue: 'd-w384',
+      },
+      spread: {
+        initialValue: 'equal',
+      },
+    },
+    slots: {
+      tabs: {
+        initialValue: '<dt-tab id="tab-1" panel-id="panel-1" selected>Tab 1</dt-tab><dt-tab id="tab-2" panel-id="panel-2">Tab 2</dt-tab><dt-tab id="tab-3" panel-id="panel-3">Tab the third</dt-tab>',
+      },
+      default: {
+        initialValue: '<div class="d-ba d-baw2 d-bas-dashed d-bc-subtle d-w100p d-py48"><dt-tab-panel id="panel-1" tab-id="tab-1"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>First</strong> tab content panel </dt-text></dt-tab-panel><dt-tab-panel id="panel-2" tab-id="tab-2"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>Second</strong> tab content panel </dt-text></dt-tab-panel><dt-tab-panel id="panel-3" tab-id="tab-3"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>Third</strong> tab content panel </dt-text></dt-tab-panel></div>',
+      },
+    },
+  },
+
+  'spread tabs: grow': {
+    props: {
+      selected: { initialValue: 'panel-1' },
+      tabListClass: {
+        initialValue: 'd-w384',
+      },
+      spread: {
+        initialValue: 'grow',
+      },
+    },
+    slots: {
+      tabs: {
+        initialValue: '<dt-tab id="tab-1" panel-id="panel-1" selected>Tab 1</dt-tab><dt-tab id="tab-2" panel-id="panel-2">Tab the second</dt-tab><dt-tab id="tab-3" panel-id="panel-3">Tab the third</dt-tab>',
+      },
+      default: {
+        initialValue: '<div class="d-ba d-baw2 d-bas-dashed d-bc-subtle d-w100p d-py48"><dt-tab-panel id="panel-1" tab-id="tab-1"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>First</strong> tab content panel </dt-text></dt-tab-panel><dt-tab-panel id="panel-2" tab-id="tab-2"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>Second</strong> tab content panel </dt-text></dt-tab-panel><dt-tab-panel id="panel-3" tab-id="tab-3"><dt-text as="p" kind="code" size="xs" tone="muted" align="center" class="d-p16"> <strong>Third</strong> tab content panel </dt-text></dt-tab-panel></div>',
+      },
+    },
+  },
+
   'muted, small': {
     props: {
       kind: { initialValue: 'muted' },

packages/dialtone-css/lib/build/less/components/emoji-picker.less

@@ -60,17 +60,14 @@
 
   &__tabset-list {
       gap: var(--dt-size-0);
-      justify-content: space-between;
 
       &::after {
         background-color: var(--dt-color-surface-moderate) !important;
       }
 
-      .d-tab {
-        --tab-padding-y: var(--dt-size-400);
-        --tab-padding-x: var(--dt-size-300);
-
-        flex-grow: 1;
+      .d-tablist__item {
+        --button-padding-y: var(--dt-size-350);
+        --button-padding-x: var(--dt-size-100);
 
         &.d-tab--selected {
           &::after {

packages/dialtone-css/lib/build/less/components/tabs.less

@@ -154,6 +154,27 @@
         }
     }
 
+    //  Spread — shared
+    &--spread-grow,
+    &--spread-equal {
+        flex-wrap: nowrap;
+    }
+
+    //  Spread grow — tabs grow proportionally to fill space
+    &--spread-grow {
+        > :where(.d-tablist__item) {
+            flex: 1 1 auto;
+        }
+    }
+
+    //  Spread equal — all tabs are the same width
+    &--spread-equal {
+        > :where(.d-tablist__item) {
+            flex: 1 1 0;
+            min-inline-size: 0;
+        }
+    }
+
     //  Inverted
     &--inverted {
         --tab-color-text: var(--dt-action-color-foreground-inverted-default);

packages/dialtone-vue/components/emoji_picker/modules/emoji_tabset.vue

@@ -3,6 +3,7 @@
     <dt-tab-group
       :selected="selectedTab"
       size="sm"
+      spread="equal"
       tab-list-class="d-emoji-picker__tabset-list"
     >
       <template #tabs>

packages/dialtone-vue/components/tab/index.js

@@ -8,4 +8,5 @@ export {
   TAB_LIST_SIZE_MODIFIERS,
   TAB_ACTIVATION_MODES,
   TAB_GROUP_KINDS,
+  TAB_SPREADS,
 } from './tabs_constants';

packages/dialtone-vue/components/tab/tab.test.js

@@ -61,12 +61,6 @@ describe('DtTab Tests', () => {
       expect(tab.text()).toBe(MOCK_DEFAULT_SLOT);
     });
 
-    it('should set data-content to match the slot text', () => {
-      const label = tab.find('[data-qa="dt-tab-label"]');
-
-      expect(label.attributes('data-content')).toBe(MOCK_DEFAULT_SLOT);
-    });
-
     describe('Selected Tab by default', () => {
       it('Group context should have set selected tab', () => {
         mockProps = { selected: true };

packages/dialtone-vue/components/tab/tab.vue

@@ -68,13 +68,7 @@
       <slot name="trailing" />
     </template>
     <!-- @slot default slot, defaults contains dt-button -->
-    <span
-      ref="tabLabel"
-      class="d-tablist__item-label"
-      data-qa="dt-tab-label"
-    >
-      <slot />
-    </span>
+    <slot />
   </dt-button>
 </template>
 
@@ -246,28 +240,12 @@ export default {
   },
 
   mounted () {
-    this.syncDataContent();
     if (this.selected) {
       this.groupContext.selected = this.panelId;
     }
   },
 
-  updated () {
-    this.syncDataContent();
-  },
-
   methods: {
-    // Sets data-content to match the rendered label text so CSS can use
-    // `content: attr(data-content)` on a hidden ::after pseudo-element to
-    // hold the bold-width and prevent layout shift on selection.
-    syncDataContent () {
-      const el = this.$refs.tabLabel;
-      if (!el) return;
-      const text = el.textContent?.trim() || '';
-      if (el.getAttribute('data-content') !== text) {
-        el.setAttribute('data-content', text);
-      }
-    },
   },
 };
 </script>