feat(tabs): improves support for dynamically adding/removing tabs

PiperOrigin-RevId: 532511300

Author: material-web-copybara

tabs/demo/stories.ts

@@ -5,6 +5,7 @@
  */
 
 import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/standard-icon-button.js';
 import '@material/web/tabs/tabs.js';
 
 import {MaterialStoryInit} from './material-collection.js';
@@ -322,6 +323,92 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
   }
 };
 
+const dynamic: MaterialStoryInit<StoryKnobs> = {
+  name: 'Dynamic Tabs',
+  styles,
+  render(knobs) {
+    const inlineIcon = knobs.inlineIcon;
+    const vertical = knobs.vertical ? 'vertical' : '';
+    const variant = `primary ${vertical}` as Variant;
+    const classes = {vertical, scrolling: true};
+
+    function getTabs(e: Event) {
+      return ((e.target! as Element).getRootNode() as ShadowRoot)
+          .querySelector('md-tabs')!;
+    }
+
+    function addTab(e: Event) {
+      const tabs = getTabs(e);
+      const count = tabs.childElementCount;
+      const tab = document.createElement('md-tab');
+      tab.textContent = `Tab ${count + 1}`;
+      if (tabs.selectedItem !== undefined) {
+        tabs.selectedItem.after(tab);
+        tabs.selected++;
+      } else {
+        tabs.append(tab);
+        tabs.selected = count;
+      }
+    }
+    function removeTab(e: Event) {
+      const tabs = getTabs(e);
+      if (tabs.selectedItem === undefined) {
+        return;
+      }
+      tabs.selectedItem?.remove();
+      const count = tabs.childElementCount;
+      tabs.selected = Math.min(count - 1, tabs.selected);
+    }
+
+    function moveTabTowardsEnd(e: Event) {
+      const tabs = getTabs(e);
+      const next = tabs.selectedItem?.nextElementSibling;
+      if (next) {
+        next.after(tabs.selectedItem);
+        tabs.selected++;
+      }
+    }
+
+    function moveTabTowardsStart(e: Event) {
+      const tabs = getTabs(e);
+      const previous = tabs.selectedItem?.previousElementSibling;
+      if (previous) {
+        previous.before(tabs.selectedItem);
+        tabs.selected--;
+      }
+    }
+
+    return html`
+      <div>
+        <md-standard-icon-button @click=${
+        addTab}><md-icon>add</md-icon></md-standard-icon-button>
+        <md-standard-icon-button @click=${
+        removeTab}><md-icon>remove</md-icon></md-standard-icon-button>
+        <md-standard-icon-button @click=${
+        moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-standard-icon-button>
+        <md-standard-icon-button @click=${
+        moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-standard-icon-button>
+      </div>
+      <md-tabs
+          class=${classMap(classes)}
+          .variant=${variant}
+          .selected=${knobs.selected}
+          .disabled=${knobs.disabled}
+          .selectOnFocus=${knobs.selectOnFocus}
+      >
+        <md-tab .inlineIcon=${inlineIcon}>
+          Tab 1
+        </md-tab>
+        <md-tab .inlineIcon=${inlineIcon}>
+          Tab 2
+        </md-tab>
+        <md-tab .inlineIcon=${inlineIcon}>
+          Tab 3
+        </md-tab>
+      </md-tabs>`;
+  }
+};
+
 function getTabContentGenerator(knobs: StoryKnobs) {
   const contentKnob = knobs.content;
   const useIcon = contentKnob !== 'label';
@@ -333,4 +420,4 @@ function getTabContentGenerator(knobs: StoryKnobs) {
 
 /** Tabs stories. */
 export const stories =
-    [primary, secondary, scrolling, custom, primaryAndSecondary];
+    [primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];

tabs/lib/_tab.scss

@@ -226,13 +226,10 @@
     color: var(--_active-pressed-icon-color);
   }
 
-  // TODO (b/261201556) implement disabled and high contrast mode
-  // styling in beta version.
   // disabled state
   :host([disabled]) {
     cursor: default;
     pointer-events: none;
-    // TODO (b/261201556) implement disabled styling in beta version.
     opacity: 0.38;
   }
 

tabs/lib/_tabs.scss

@@ -10,7 +10,7 @@
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: end;
     overflow: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;

tabs/lib/tabs.ts

@@ -5,7 +5,7 @@
  */
 
 import {html, isServer, LitElement, PropertyValues} from 'lit';
-import {property, query} from 'lit/decorators.js';
+import {property, queryAssignedElements, state} from 'lit/decorators.js';
 
 import {Tab, Variant} from './tab.js';
 
@@ -67,15 +67,16 @@ export class Tabs extends LitElement {
    */
   @property({type: Boolean}) selectOnFocus = false;
 
-  @query('slot') private readonly itemsSlot?: HTMLSlotElement;
-
   private previousSelected = -1;
   private orientation = 'horizontal';
   private readonly scrollMargin = 48;
 
-  private get items() {
-    return this.itemsSlot?.assignedElements({flatten: true}) as Tab[] ?? [];
-  }
+  @queryAssignedElements({selector: 'md-tab', flatten: true})
+  private readonly items!: Tab[];
+
+  // this tracks if items have changed, which triggers rendering so they can
+  // be kept in sync
+  @state() private itemsDirty = false;
 
   private readonly selectedAttribute = `selected`;
 
@@ -229,16 +230,21 @@ export class Tabs extends LitElement {
       this.orientation =
           this.variant.includes('vertical') ? 'vertical' : 'horizontal';
     }
+    if (this.itemsDirty) {
+      this.itemsDirty = false;
+      this.previousSelected = -1;
+    }
   }
 
   protected override async updated(changed: PropertyValues) {
     const itemsOrVariantChanged =
-        changed.has('items') || changed.has('variant');
-    // sync variant with items.
+        changed.has('itemsDirty') || changed.has('variant');
+    // sync state with items.
     if (itemsOrVariantChanged || changed.has('disabled')) {
-      this.items.forEach(i => {
-        i.variant = this.variant;
-        i.disabled = this.disabled;
+      this.items.forEach((item, i) => {
+        item.selected = this.selected === i;
+        item.variant = this.variant;
+        item.disabled = this.disabled;
       });
     }
     if (itemsOrVariantChanged || changed.has('selected')) {
@@ -253,15 +259,15 @@ export class Tabs extends LitElement {
     }
   }
 
-  private updateFocusableItem(item: HTMLElement|null) {
+  private updateFocusableItem(focusableItem: HTMLElement|null) {
     const tabIndex = 'tabindex';
-    this.items.forEach(e => {
-      if (e === item) {
-        e.removeAttribute(tabIndex);
+    for (const item of this.items) {
+      if (item === focusableItem) {
+        item.removeAttribute(tabIndex);
       } else {
-        e.setAttribute(tabIndex, '-1');
+        item.setAttribute(tabIndex, '-1');
       }
-    });
+    }
   }
 
   protected override render() {
@@ -289,7 +295,7 @@ export class Tabs extends LitElement {
   }
 
   private handleSlotChange(e: Event) {
-    this.requestUpdate();
+    this.itemsDirty = true;
   }
 
   private async itemsUpdateComplete() {

tabs/tabs_test.ts

@@ -81,5 +81,28 @@ describe('<md-tabs>', () => {
       expect(harness.element.previousSelectedItem)
           .toBe(harness.harnessedItems[1].element);
     });
+
+    it('maintains selection when tabs are mutated', async () => {
+      const {harness} = await setupTest({selected: 1});
+      expect(harness.element.selectedItem.textContent).toBe('B');
+      const tab = document.createElement('md-tab');
+      tab.textContent = 'tab';
+      // add before selected
+      harness.element.prepend(tab);
+      await env.waitForStability();
+      expect(harness.element.selectedItem.textContent).toBe('A');
+      // move after selected
+      harness.element.selectedItem.after(tab);
+      await env.waitForStability();
+      expect(harness.element.selectedItem.textContent).toBe('tab');
+      // move before selected
+      harness.element.prepend(tab);
+      await env.waitForStability();
+      expect(harness.element.selectedItem.textContent).toBe('A');
+      // remove
+      tab.remove();
+      await env.waitForStability();
+      expect(harness.element.selectedItem.textContent).toBe('B');
+    });
   });
 });