Scrollable tabs

change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Scrollable tabs for Tabs and AnchorTabs.",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/anchor-tab/styles.ts

@@ -26,6 +26,7 @@ export const styles = css`
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        text-wrap: nowrap;
         --ni-private-active-indicator-width: 2px;
         --ni-private-focus-indicator-width: 1px;
         --ni-private-indicator-lines-gap: 1px;

packages/nimble-components/src/anchor-tabs/index.ts

@@ -26,9 +26,10 @@ import {
     FoundationElementDefinition,
     FoundationElement
 } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-import { template } from './template';
+import { styles } from '../patterns/tabs/styles';
+import { template } from '../patterns/tabs/template';
 import type { AnchorTab } from '../anchor-tab';
+import type { TabsOwner } from '../patterns/tabs/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -41,7 +42,7 @@ export type TabsOptions = FoundationElementDefinition & StartEndOptions;
 /**
  * A nimble-styled set of anchor tabs
  */
-export class AnchorTabs extends FoundationElement {
+export class AnchorTabs extends FoundationElement implements TabsOwner {
     /**
      * The id of the active tab
      *
@@ -58,6 +59,12 @@ export class AnchorTabs extends FoundationElement {
     @observable
     public tabs!: HTMLElement[];
 
+    /**
+     * @internal
+     */
+    @observable
+    public showScrollButtons = false;
+
     /**
      * A reference to the active tab
      * @public
@@ -70,14 +77,44 @@ export class AnchorTabs extends FoundationElement {
      */
     public tablist!: HTMLElement;
 
+    /**
+     * @internal
+     */
+    public readonly leftScrollButton?: HTMLElement;
+
+    /**
+     * @internal
+     */
+    public readonly tabSlotName = 'anchortab';
+
+    private readonly tabListResizeObserver: ResizeObserver;
     private tabIds: string[] = [];
 
+    public constructor() {
+        super();
+        this.tabListResizeObserver = new ResizeObserver(entries => {
+            let tabListVisibleWidth = entries[0]?.contentRect.width;
+            if (tabListVisibleWidth !== undefined) {
+                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                tabListVisibleWidth = Math.ceil(tabListVisibleWidth);
+                if (this.showScrollButtons) {
+                    tabListVisibleWidth += buttonWidth * 2;
+                }
+                this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;
+            }
+        });
+    }
+
     /**
      * @internal
      */
     public activeidChanged(_oldValue: string, _newValue: string): void {
         if (this.$fastController.isConnected) {
             this.setTabs();
+            this.activetab?.scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+            });
         }
     }
 
@@ -91,15 +128,43 @@ export class AnchorTabs extends FoundationElement {
         }
     }
 
+    /**
+     * @internal
+     */
+    public onScrollLeftClick(): void {
+        this.tablist.scrollBy({
+            left: -this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+
+    /**
+     * @internal
+     */
+    public onScrollRightClick(): void {
+        this.tablist.scrollBy({
+            left: this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+
     /**
      * @internal
      */
     public override connectedCallback(): void {
         super.connectedCallback();
-
+        this.tabListResizeObserver.observe(this.tablist);
         this.tabIds = this.getTabIds();
     }
 
+    /**
+     * @internal
+     */
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabListResizeObserver.disconnect();
+    }
+
     private readonly isDisabledElement = (el: Element): el is HTMLElement => {
         return el.getAttribute('aria-disabled') === 'true';
     };
@@ -277,6 +342,8 @@ export class AnchorTabs extends FoundationElement {
                 tab === focusedTab ? 'true' : 'false'
             );
         });
+
+        focusedTab.scrollIntoView({ block: 'nearest', inline: 'start' });
     };
 
     private getTabAnchor(tab: AnchorTab): HTMLAnchorElement {

packages/nimble-components/src/anchor-tabs/testing/anchor-tabs.pageobject.ts

@@ -0,0 +1,13 @@
+import type { AnchorTabs } from '..';
+import { anchorTabTag } from '../../anchor-tab';
+import { TabsBasePageObject } from '../../patterns/tabs/testing/tabs-base.pageobject';
+
+/**
+ * Page object for the `nimble-anchor-tabs` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class AnchorTabsPageObject extends TabsBasePageObject<AnchorTabs> {
+    public constructor(tabsElement: AnchorTabs) {
+        super(tabsElement, anchorTabTag);
+    }
+}

packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts

@@ -14,11 +14,13 @@ import '../../anchor-tab';
 import { anchorTabTag, type AnchorTab } from '../../anchor-tab';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
+import { AnchorTabsPageObject } from '../testing/anchor-tabs.pageobject';
 
 describe('AnchorTabs', () => {
     let element: AnchorTabs;
     let connect: () => Promise<void>;
     let disconnect: () => Promise<void>;
+    let pageObject: AnchorTabsPageObject;
 
     function tab(index: number): AnchorTab {
         return element.children[index] as AnchorTab;
@@ -42,6 +44,7 @@ describe('AnchorTabs', () => {
         beforeEach(async () => {
             ({ element, connect, disconnect } = await setup());
             await connect();
+            pageObject = new AnchorTabsPageObject(element);
         });
 
         afterEach(async () => {
@@ -118,8 +121,7 @@ describe('AnchorTabs', () => {
             expect(tab(0).tabIndex).toBe(-1);
             expect(tab(1).tabIndex).toBe(0);
             expect(tab(2).tabIndex).toBe(-1);
-            tab(0).dispatchEvent(new Event('click'));
-            await waitForUpdatesAsync();
+            await pageObject.clickTab(0);
             expect(tab(0).tabIndex).toBe(0);
             expect(tab(1).tabIndex).toBe(-1);
             expect(tab(2).tabIndex).toBe(-1);
@@ -130,9 +132,7 @@ describe('AnchorTabs', () => {
             anchor(0).addEventListener('click', () => {
                 timesClicked += 1;
             });
-            tab(0).dispatchEvent(
-                new KeyboardEvent('keydown', { key: keySpace })
-            );
+            await pageObject.pressKeyOnTab(0, keySpace);
             await waitForUpdatesAsync();
             expect(timesClicked).toBe(1);
         });
@@ -142,9 +142,7 @@ describe('AnchorTabs', () => {
             anchor(0).addEventListener('click', () => {
                 timesClicked += 1;
             });
-            tab(0).dispatchEvent(
-                new KeyboardEvent('keydown', { key: keyEnter })
-            );
+            await pageObject.pressKeyOnTab(0, keyEnter);
             await waitForUpdatesAsync();
             expect(timesClicked).toBe(1);
         });
@@ -374,4 +372,111 @@ describe('AnchorTabs', () => {
             expect(document.activeElement).toBe(tab(0));
         });
     });
+
+    describe('scroll buttons', () => {
+        async function setup(): Promise<Fixture<AnchorTabs>> {
+            return await fixture<AnchorTabs>(
+                html`<${anchorTabsTag} activeid="tab-two">
+                    <${anchorTabTag}>Tab 1</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-two">Tab 2</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-three">Tab 3</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-four">Tab 4</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-five">Tab 5</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-six">Tab 6</${anchorTabTag}>
+                </${anchorTabsTag}>`
+            );
+        }
+
+        let tabsPageObject: AnchorTabsPageObject;
+
+        beforeEach(async () => {
+            ({ element, connect, disconnect } = await setup());
+            await connect();
+            tabsPageObject = new AnchorTabsPageObject(element);
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('should not show scroll buttons when the tabs fit within the container', () => {
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when the tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when the tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.setTabsWidth(1000);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should scroll left when the left scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = 'tab-six'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeLessThan(
+                currentScrollOffset
+            );
+        });
+
+        it('should not scroll left when the left scroll button is clicked and the first tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0);
+        });
+
+        it('should scroll right when the right scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0);
+        });
+
+        it('should not scroll right when the right scroll button is clicked and the last tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = 'tab-six'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(
+                currentScrollOffset
+            );
+        });
+
+        it('should show scroll buttons when new tab is added and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab is removed and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(500);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.removeTab(6);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when tab label is updated and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.updateTabLabel(
+                0,
+                'New Tab With Extremely Long Name'
+            );
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(550);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.updateTabLabel(6, 'Tab 6');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+    });
 });