[fix]: vertical tablist and start and end slots in tabs were broken (#34704)

Author: eljefe223

change/@fluentui-web-components-d129a012-34ca-4275-83f1-64b0f37715d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix start and end slot for tabs",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -759,7 +759,7 @@ export class BaseTablist extends FASTElement {
     activeid: string;
     // @internal (undocumented)
     protected activeidChanged(oldValue: string, newValue: string): void;
-    activetab: HTMLElement;
+    activetab: Tab;
     adjust(adjustment: number): void;
     // @internal (undocumented)
     connectedCallback(): void;
@@ -772,8 +772,12 @@ export class BaseTablist extends FASTElement {
     // @internal (undocumented)
     protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
     protected setTabs(): void;
+    // @internal
+    slottedTabs: Node[];
+    // @internal
+    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
     // @internal (undocumented)
-    tabs: HTMLElement[];
+    tabs: Tab[];
     // @internal (undocumented)
     protected tabsChanged(): void;
 }
@@ -2803,6 +2807,9 @@ export function isDropdownOption(value: Node | null, tagName?: string): value is
 // @public
 export function isListbox(element?: Node | null, tagName?: string): element is Listbox;
 
+// @public
+export function isTab(element?: Node | null, tagName?: string): element is Tab;
+
 // @public
 export function isTreeItem(element?: Node | null, tagName?: string): element is BaseTreeItem;
 

packages/web-components/src/index.ts

@@ -245,7 +245,7 @@ export {
   SwitchStyles,
   SwitchTemplate,
 } from './switch/index.js';
-export { Tab, TabOptions, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
+export { isTab, Tab, TabOptions, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
 export { TabPanel, TabPanelTemplate, TabPanelStyles, TabPanelDefinition } from './tab-panel/index.js';
 export {
   Tabs,

packages/web-components/src/tab/index.ts

@@ -1,4 +1,5 @@
 export { definition as TabDefinition } from './tab.definition.js';
+export { isTab } from './tab.options.js';
 export { Tab } from './tab.js';
 export type { TabOptions } from './tab.js';
 export { styles as TabStyles } from './tab.styles.js';

packages/web-components/src/tab/tab.options.ts

@@ -0,0 +1,17 @@
+import type { Tab } from './tab.js';
+
+/**
+ * Predicate function that determines if the element should be considered a tab.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a tab.
+ * @public
+ */
+export function isTab(element?: Node | null, tagName: string = '-tab'): element is Tab {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+
+  return (element as Element).tagName.toLowerCase().endsWith(tagName);
+}

packages/web-components/src/tab/tab.styles.ts

@@ -24,7 +24,8 @@ export const styles = css`
 
   :host {
     position: relative;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
     cursor: pointer;
     box-sizing: border-box;
     justify-content: center;
@@ -36,6 +37,7 @@ export const styles = css`
     grid-row: 1;
     padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
     border-radius: ${borderRadiusMedium};
+    gap: 4px;
   }
   :host .tab-content {
     display: inline-flex;
@@ -83,12 +85,6 @@ export const styles = css`
   ::slotted([slot='end']) {
     display: flex;
   }
-  ::slotted([slot='start']) {
-    margin-inline-end: 11px;
-  }
-  ::slotted([slot='end']) {
-    margin-inline-start: 11px;
-  }
   :host([disabled]) {
     cursor: not-allowed;
     fill: ${colorNeutralForegroundDisabled};
@@ -108,6 +104,15 @@ export const styles = css`
     box-shadow: 0 0 0 3px ${colorStrokeFocus2};
     outline: 1px solid ${colorStrokeFocus1};
   }
+
+  :host([data-hasIndent]) {
+    display: grid;
+    grid-template-columns: 20px 1fr auto;
+  }
+
+  :host([data-hasIndent]) .tab-content {
+    grid-column: 2;
+  }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`
     :host([aria-selected='true'])::after {

packages/web-components/src/tablist/tablist.base.ts

@@ -12,6 +12,8 @@ import {
 import { getDirection } from '../utils/index.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
 import { isFocusableElement } from '../utils/focusable-element.js';
+import type { Tab } from '../tab/tab.js';
+import { isTab } from '../tab/tab.options.js';
 import { TablistOrientation } from './tablist.options.js';
 
 /**
@@ -105,10 +107,25 @@ export class BaseTablist extends FASTElement {
   }
 
   /**
+   * Content slotted in the tab slot.
    * @internal
    */
   @observable
-  public tabs!: HTMLElement[];
+  public slottedTabs!: Node[];
+
+  /**
+   * Updates the tabs property when content in the tabs slot changes.
+   * @internal
+   */
+  public slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void {
+    this.tabs = (next?.filter(tab => isTab(tab)) as Tab[]) ?? [];
+  }
+
+  /**
+   * @internal
+   */
+  @observable
+  public tabs!: Tab[];
   /**
    * @internal
    */
@@ -134,7 +151,7 @@ export class BaseTablist extends FASTElement {
    * A reference to the active tab
    * @public
    */
-  public activetab!: HTMLElement;
+  public activetab!: Tab;
 
   private prevActiveTabIndex: number = 0;
   private activeTabIndex: number = 0;
@@ -163,10 +180,11 @@ export class BaseTablist extends FASTElement {
   protected setTabs(): void {
     this.activeTabIndex = this.getActiveIndex();
 
-    this.tabs.forEach((tab: HTMLElement, index: number) => {
+    const hasStartSlot = this.tabs.some(tab => tab.start.assignedNodes().length > 0);
+
+    this.tabs.forEach((tab: Tab, index: number) => {
       if (tab.slot === 'tab') {
         const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
-
         const tabId: string = this.tabIds[index];
         tab.setAttribute('id', tabId);
         tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
@@ -177,6 +195,10 @@ export class BaseTablist extends FASTElement {
           this.activetab = tab;
           this.activeid = tabId;
         }
+        // Only set the data-hasIndent attribute if the tab has a start slot and the orientation is vertical
+        if (hasStartSlot && this.orientation === TablistOrientation.vertical) {
+          tab.setAttribute('data-hasIndent', '');
+        }
       }
     });
   }
@@ -195,7 +217,7 @@ export class BaseTablist extends FASTElement {
   }
 
   private handleTabClick = (event: MouseEvent): void => {
-    const selectedTab = event.currentTarget as HTMLElement;
+    const selectedTab = event.currentTarget as Tab;
     if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
       this.prevActiveTabIndex = this.activeTabIndex;
       this.activeTabIndex = this.tabs.indexOf(selectedTab);
@@ -269,8 +291,8 @@ export class BaseTablist extends FASTElement {
     }
   }
 
-  private activateTabByIndex(group: HTMLElement[], index: number) {
-    const tab: HTMLElement = group[index] as HTMLElement;
+  private activateTabByIndex(group: Tab[], index: number) {
+    const tab = group[index];
     this.activetab = tab;
     this.prevActiveTabIndex = this.activeTabIndex;
     this.activeTabIndex = index;

packages/web-components/src/tablist/tablist.spec.ts

@@ -345,4 +345,21 @@ test.describe('Tablist', () => {
     await expect(secondPanel).toBeVisible();
     await expect(thirdPanel).toBeHidden();
   });
+
+  test('should set data-hasIndent on all tabs when any tab has a start slot', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate({
+      attributes: { orientation: 'vertical' },
+      innerHTML: /* html */ `
+        <fluent-tab>Tab one</fluent-tab>
+        <fluent-tab><span slot="start">T</span>Tab two</fluent-tab>
+        <fluent-tab>Tab three</fluent-tab>
+      `,
+    });
+    const tabs = element.locator('fluent-tab');
+
+    await expect(tabs.nth(0)).toHaveAttribute('data-hasIndent');
+    await expect(tabs.nth(1)).toHaveAttribute('data-hasIndent');
+    await expect(tabs.nth(2)).toHaveAttribute('data-hasIndent');
+  });
 });

packages/web-components/src/tablist/tablist.stories.ts

@@ -1,4 +1,4 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
 import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Tablist as FluentTablist } from './tablist.js';
 import { TablistAppearance as TablistAppearanceValues, TablistOrientation, TablistSize } from './tablist.options.js';
@@ -19,7 +19,27 @@ const storyTemplate = html<StoryArgs<FluentTablist>>`
       ${ref('tablist')}
     >
       <fluent-tab id="first-tab">First Tab</fluent-tab>
-      <fluent-tab id="second-tab">Second Tab</fluent-tab>
+      <fluent-tab id="second-tab">
+        ${when(
+          story => story.hasStartSlot,
+          html`<span slot="start">
+            <svg
+              fill="currentColor"
+              aria-hidden="true"
+              width="20px"
+              height="20px"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </span> `,
+        )}
+        Second Tab
+      </fluent-tab>
       <fluent-tab id="third-tab">Third Tab</fluent-tab>
       <fluent-tab id="fourth-tab">Fourth Tab</fluent-tab>
     </fluent-tablist>
@@ -78,6 +98,12 @@ export default {
 
 export const Default: Story = {};
 
+export const HorizontalWithStartSlot: Story = {
+  args: {
+    hasStartSlot: true,
+  },
+};
+
 export const VerticalOrientation: Story = {
   args: {
     orientation: TablistOrientation.vertical,
@@ -91,6 +117,20 @@ export const VerticalOrientation: Story = {
   ],
 };
 
+export const VerticalOrientationWithStartSlot: Story = {
+  args: {
+    orientation: TablistOrientation.vertical,
+    hasStartSlot: true,
+  },
+  decorators: [
+    Story => {
+      const story = Story() as HTMLDivElement;
+      story.style.flexDirection = 'row';
+      return story;
+    },
+  ],
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,

packages/web-components/src/tablist/tablist.styles.ts

@@ -45,8 +45,8 @@ export const styles = css`
     flex-direction: column;
   }
 
-  :host ::slotted([role='tab']) {
-    align-items: flex-start;
+  :host([orientation='vertical']) ::slotted([role='tab']) {
+    justify-content: flex-start;
   }
 
   /* indicator animation  */