refactor(selected-index): add change event for programmatic tab change (

#1843) This change introduces an event to allow programmatic changes to the tab index improving the flexibility of the tab management
momentum-design · Dec 18, 2024 · 4df060f · 4df060f
1 parent 22755d8
commit 4df060f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 2 deletions.
diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts
@@ -17,7 +17,7 @@ import { Tabs } from "@/components/tabs/Tabs";
 import "@/components/toggle-switch/ToggleSwitch";
 import "@/components/tooltip/Tooltip";
 import svgWxm from "@img/wxm.svg";
-import { css, customElement, html, internalProperty, LitElement } from "lit-element";
+import { css, customElement, html, internalProperty, LitElement, property } from "lit-element";
 import { TemplateResult } from "lit-html";
 import { repeat } from "lit-html/directives/repeat";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
@@ -195,6 +195,7 @@ export class TabsTemplateSandbox extends LitElement {
   @internalProperty() private currentTabsOrder = this.defaultTabsOrder;
   @internalProperty() private isSingleButtonResetEnabled = false;
   closeTabName = "";
+  @property({ type: Number }) selectedTabIndex = 0;
 
   private setUpTabs() {
     this.tabs = {
@@ -364,6 +365,10 @@ export class TabsTemplateSandbox extends LitElement {
     if (draggableTabsOrder) this.currentTabsOrder = draggableTabsOrder.split(",");
   }
 
+  handleTabIndexChange() {
+    this.selectedTabIndex = this.selectedTabIndex === 0 ? 1 : 0;
+  }
+
   render() {
     return html`
       <div style="max-width: 600px; padding-top: 16px;">
@@ -509,6 +514,59 @@ export class TabsTemplateSandbox extends LitElement {
                   </button>
                 `}
           </md-tabs>
+          <h3>Allows the tab index to be changed programmatically without requiring a mouse click event on the tab item</h3>
+        <md-toggle-switch @click=${() => this.handleTabIndexChange()}>
+          Programmatically change tab index
+        </md-toggle-switch>
+        <div>
+          <md-tabs justified selected-index="${this.selectedTabIndex}">
+            <md-tab slot="tab" aria-label="Consult Label">
+              <span>Consult</span>
+            </md-tab>
+            <md-tab-panel slot="panel">
+              <md-list role="listbox">
+                <md-list-item slot="list-item" aria-label="item-1" shape="rounded">
+                  <div aria-label="item-1-div">
+                    <div>
+                      <p>Alan Johnson</p>
+                      <p>1234434</p>
+                    </div>
+                  </div>
+                </md-list-item>
+                <md-list-item slot="list-item" aria-label="item-2" shape="rounded">
+                  <div aria-label="item-2-div">
+                    <div>
+                      <p>Mark Corrigan</p>
+                      <p>43454334</p>
+                    </div>
+                  </div>
+                </md-list-item>
+              </md-list>
+            </md-tab-panel>
+            <md-tab slot="tab" aria-label="Transfer label" aria-label="address-book">
+              <span>Transfer</span>
+            </md-tab>
+            <md-tab-panel slot="panel">
+              <md-list role="listbox">
+                <md-list-item slot="list-item" aria-label="item-1">
+                  <div aria-label="item-1-div">
+                    <div>
+                      <p>Jermey Usborne</p>
+                      <p>83498347</p>
+                    </div>
+                  </div>
+                </md-list-item>
+                <md-list-item slot="list-item" aria-label="item-2">
+                  <div aria-label="item-2-div">
+                    <div>
+                      <p>Sophie Chapman</p>
+                      <p>22384758</p>
+                    </div>
+                  </div>
+                </md-list-item>
+              </md-list>
+            </md-tab-panel>
+          </md-tabs>
         </div>
         <br />
         <md-modal htmlId="modal-1" ?show=${this.isModalOpen} size="dialog" hideFooter hideHeader noExitOnEsc>

diff --git a/web-components/src/components/tabs/Tabs.ts b/web-components/src/components/tabs/Tabs.ts
@@ -55,7 +55,7 @@ export namespace Tabs {
     @property({ type: Boolean, attribute: "draggable" }) draggable = false;
     @property({ type: String }) direction: "horizontal" | "vertical" = "horizontal";
     @property({ type: Number, attribute: "more-items-scroll-limit" }) moreItemsScrollLimit = Number.MAX_SAFE_INTEGER;
-
+    @property({ type: Number, reflect: true, attribute: 'selected-index' }) selectedIndex = 0;
     @property({ type: Number }) delay = 0;
     @property({ type: Number }) animation = 100;
     @property({ type: String, attribute: "ghost-class" }) ghostClass = "";
@@ -602,6 +602,9 @@ export namespace Tabs {
     private updateSelectedTab(newSelectedIndex: number) {
       const { tabs, panels } = this;
       const oldSelectedIndex = this.tabs.findIndex((element) => element.hasAttribute("selected"));
+      if (oldSelectedIndex === -1) {
+        return;
+      }
 
       if (tabs && panels) {
         [oldSelectedIndex, newSelectedIndex].forEach((index) => {
@@ -1082,6 +1085,10 @@ export namespace Tabs {
       if (changedProperties.has("tabsId")) {
         this.selectTabFromStorage();
       }
+
+      if (changedProperties.has("selectedIndex")) {
+        this.updateSelectedTab(this.selectedIndex);
+      }
     }
 
     render() {