feat(tabs): DLT-3114 add vertical orientation variant (#1120)

Author: francisrupert

apps/dialtone-documentation/docs/.vuepress/baseComponents/ClampedTableWrapper.vue

@@ -51,14 +51,14 @@
     </div>
     <div
       v-if="shouldShowButton"
-      class="dialtone-doc-table-clamped__more d-ps-absolute d-bn16 d-l50p"
+      class="dialtone-doc-table-clamped__more d-ps-absolute d-bn8 d-l50p"
       aria-hidden="true"
     >
       <dt-button
         class="dialtone-doc-table-clamped__more-btn d-bgc-secondary d-bs-sm"
         kind="muted"
         importance="outlined"
-        size="sm"
+        size="xs"
         @click="() => handleExpand(scrollRef)"
       >
         {{ buttonLabel }}

apps/dialtone-documentation/docs/.vuepress/baseComponents/CodeExampleTabs.vue

@@ -2,7 +2,7 @@
   <dt-tab-group
     class="code-example-tab-group"
     activation-mode="auto"
-    size="sm"
+    size="xs"
     @change="selectedPanelId = $event.selected"
   >
     <template #tabs>
@@ -38,7 +38,7 @@
       :id="vuePanelId"
       :tab-id="vueTabId"
     >
-      <div ref="vuePanelRef" v-dt-scrollbar class="language-html d-hmx332" data-ext="html">
+      <div ref="vuePanelRef" v-dt-scrollbar class="language-html d-hmx164" data-ext="html">
         <pre class="language-html" v-html="highlightedVue" />
       </div>
     </dt-tab-panel>
@@ -55,20 +55,20 @@
       >
         Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
       </dt-banner>
-      <div ref="htmlPanelRef" v-dt-scrollbar class="language-html d-hmx332" data-ext="html">
+      <div ref="htmlPanelRef" v-dt-scrollbar class="language-html d-hmx164" data-ext="html">
         <pre class="language-html" v-html="highlightedHtml" />
       </div>
     </dt-tab-panel>
     <div
       v-if="shouldShowButton"
-      class="code-example-tab-group__more d-ps-absolute d-bn16 d-l50p"
+      class="code-example-tab-group__more d-ps-absolute d-bn8 d-l50p"
       aria-hidden="true"
     >
       <dt-button
         class="code-example-tab-group__more-btn d-bgc-secondary d-bs-sm"
         kind="muted"
         importance="outlined"
-        size="sm"
+        size="xs"
         @click="expandCodeBlocks"
       >
         Show all
@@ -148,7 +148,7 @@ const selectedPanelId = ref(vuePanelId);
 const vuePanelRef = ref(null);
 const htmlPanelRef = ref(null);
 const { shouldShowButton, handleExpand, initExpandable } = useDocExpandable({
-  maxHeightClass: 'd-hmx332',
+  maxHeightClass: 'd-hmx164',
 });
 
 /**

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

@@ -6,6 +6,8 @@
     :inverted="inverted"
     :borderless="borderless"
     :disabled="disabled"
+    :orientation="orientation"
+    :tab-list-class="orientation === 'vertical' ? 'd-w264' : undefined"
     :activation-mode="activationMode"
     @before-change="confirmBeforeLeave"
   >
@@ -38,7 +40,7 @@
       </dt-tab>
     </template>
     <div
-      class="d-ba d-bas-dashed d-mt16 d-bar4 d-bc-subtle"
+      class="d-ba d-baw2 d-bas-dashed d-bc-subtle d-w100p d-plc-center d-py48"
       :class="{
         'd-fc-primary-inverted': inverted,
       }"
@@ -115,6 +117,11 @@ export default {
       type: String,
       default: 'manual',
     },
+
+    orientation: {
+      type: String,
+      default: 'horizontal',
+    },
   },
 
   methods: {

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

@@ -9,9 +9,10 @@ keywords: ["tab panel", "tab navigation", "d-tabs", "DtTabs", "dt-tabs", "segmen
 ---
 
 <code-well-header>
-  <div class="d-w100p">
+  <dt-stack class="d-w100p" gap="500">
     <example-tabs />
-  </div>
+    <example-tabs ref="verticalTabsExample" orientation="vertical" />
+  </dt-stack>
 </code-well-header>
 
 ## Variants
@@ -282,7 +283,9 @@ vueCode='
 '
 showHtmlWarning />
 
-## Icon Support
+## Slots
+
+### Icon
 
 Use the `#startIcon` or `#endIcon` slot on `dt-tab` to add an icon. The slot provides `iconSize` to match the tab's size.
 
@@ -292,59 +295,72 @@ Use the `#startIcon` or `#endIcon` slot on `dt-tab` to add an icon. The slot pro
 
 <code-well-header>
   <div class="d-w100p">
-    <dt-tab-group>
+    <dt-tab-group ref="iconTabsExample">
       <template #tabs>
         <dt-tab id="1" panel-id="2" selected>
+          First
           <template #startIcon="{ iconSize }">
             <dt-icon name="box-select" :size="iconSize" />
           </template>
-          First
         </dt-tab>
         <dt-tab id="3" panel-id="4">
           Second
+          <template #startIcon="{ iconSize }">
+            <dt-icon name="box-select" :size="iconSize" />
+          </template>
+          <template #endIcon="{ iconSize }">
+            <dt-icon name="box-select" :size="iconSize" />
+          </template>
         </dt-tab>
         <dt-tab id="5" panel-id="6">
+          Third
           <template #endIcon="{ iconSize }">
             <dt-icon name="box-select" :size="iconSize" />
           </template>
-          Third
         </dt-tab>
       </template>
     </dt-tab-group>
   </div>
 </code-well-header>
 
 <code-example-tabs
+:htmlCode='() => $refs.iconTabsExample'
 vueCode='
 <dt-tab-group>
   <template #tabs>
     <dt-tab id="1" panel-id="2" selected>
+      First
       <template #startIcon="{ iconSize }">
         <dt-icon name="box-select" :size="iconSize" />
       </template>
-      First
     </dt-tab>
     <dt-tab id="3" panel-id="4">
       Second
+      <template #startIcon="{ iconSize }">
+        <dt-icon name="box-select" :size="iconSize" />
+      </template>
+      <template #endIcon="{ iconSize }">
+        <dt-icon name="box-select" :size="iconSize" />
+      </template>
     </dt-tab>
     <dt-tab id="5" panel-id="6">
+      Third
       <template #endIcon="{ iconSize }">
         <dt-icon name="box-select" :size="iconSize" />
       </template>
-      Third
     </dt-tab>
   </template>
 </dt-tab-group>
 '
 showHtmlWarning />
 
-## Leading & Trailing
+### Leading & Trailing
 
 Use the `#leading` and `#trailing` slots on `dt-tab` to render content like badges or count indicators alongside tab labels. Use `leading-class` and `trailing-class` to adjust padding.
 
 <code-well-header>
   <div class="d-w100p">
-    <dt-tab-group>
+    <dt-tab-group ref="leadingTrailingTabsExample">
       <template #tabs>
         <dt-tab id="lt1" panel-id="lt2" selected trailing-class="d-pr8">
           Inbox
@@ -367,6 +383,7 @@ Use the `#leading` and `#trailing` slots on `dt-tab` to render content like badg
 </code-well-header>
 
 <code-example-tabs
+:htmlCode='() => $refs.leadingTrailingTabsExample'
 vueCode='
 <dt-tab-group>
   <template #tabs>
@@ -390,6 +407,27 @@ vueCode='
 '
 showHtmlWarning />
 
+## Orientation
+
+Set `orientation="vertical"` to stack tabs vertically alongside the panel.
+
+<code-well-header>
+  <example-tabs ref="verticalTabsExample" orientation="vertical" />
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.verticalTabsExample'
+vueCode='
+<dt-tab-group orientation="vertical">
+  <template #tabs>
+    <dt-tab id="1" panel-id="2" selected>First</dt-tab>
+    <dt-tab id="3" panel-id="4">Second</dt-tab>
+    <dt-tab id="5" panel-id="6">Third</dt-tab>
+  </template>
+</dt-tab-group>
+'
+showHtmlWarning />
+
 ## Advanced Usages
 
 ### Automatic Mode