fix: Tabs fn should be overrideable (#6880)

* tabs fn cleanup * Change files * template * add comment * tweak * read me * Update change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json Co-authored-by: Chris Holt <[email protected]> --------- Co-authored-by: Stephane Comeau <[email protected]> Co-authored-by: Chris Holt <[email protected]>
microsoft · Jun 10, 2024 · c25a452 · c25a452
1 parent 357c5c4
commit c25a452
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 26 deletions.
diff --git a/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json b/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: allow tabs `setTabs` method to be extended",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1965,8 +1965,7 @@ export class FASTTabs extends FASTElement {
     orientation: TabsOrientation;
     // @internal (undocumented)
     orientationChanged(): void;
-    // (undocumented)
-    protected setTabs: () => void;
+    protected setTabs(): void;
     // @internal (undocumented)
     tabpanels: HTMLElement[];
     // @internal (undocumented)

diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -126,18 +126,18 @@ export const myTabs = Tabs.compose({
 
 #### Fields
 
-| Name          | Privacy   | Type              | Default | Description                   | Inherited From |
-| ------------- | --------- | ----------------- | ------- | ----------------------------- | -------------- |
-| `orientation` | public    | `TabsOrientation` |         | The orientation               |                |
-| `activeid`    | public    | `string`          |         | The id of the active tab      |                |
-| `activetab`   | public    | `HTMLElement`     |         | A reference to the active tab |                |
-| `setTabs`     | protected |                   |         |                               |                |
+| Name          | Privacy | Type              | Default | Description                   | Inherited From |
+| ------------- | ------- | ----------------- | ------- | ----------------------------- | -------------- |
+| `orientation` | public  | `TabsOrientation` |         | The orientation               |                |
+| `activeid`    | public  | `string`          |         | The id of the active tab      |                |
+| `activetab`   | public  | `HTMLElement`     |         | A reference to the active tab |                |
 
 #### Methods
 
-| Name     | Privacy | Description                    | Parameters           | Return | Inherited From |
-| -------- | ------- | ------------------------------ | -------------------- | ------ | -------------- |
-| `adjust` | public  | The adjust method for FASTTabs | `adjustment: number` | `void` |                |
+| Name      | Privacy | Description                                                                       | Parameters           | Return | Inherited From |
+| --------- | ------- | --------------------------------------------------------------------------------- | -------------------- | ------ | -------------- |
+| `setTabs` | public  | Function that is invoked whenever the selected tab or the tab collection changes. |                      | `void` |                |
+| `adjust`  | public  | The adjust method for FASTTabs                                                    | `adjustment: number` | `void` |                |
 
 #### Events
 

diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
@@ -1,4 +1,4 @@
-import { ElementViewTemplate, html, ref, slotted, when } from "@microsoft/fast-element";
+import { ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
 import { endSlotTemplate, startSlotTemplate } from "../patterns/index.js";
 import type { FASTTabs } from "./tabs.js";
 import type { TabsOptions } from "./tabs.options.js";

diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -41,7 +41,6 @@ export class FASTTabs extends FASTElement {
     public orientationChanged(): void {
         if (this.$fastController.isConnected) {
             this.setTabs();
-            this.setTabPanels();
         }
     }
     /**
@@ -65,7 +64,6 @@ export class FASTTabs extends FASTElement {
                 (item: HTMLElement) => item.id === oldValue
             );
             this.setTabs();
-            this.setTabPanels();
         }
     }
 
@@ -86,7 +84,6 @@ export class FASTTabs extends FASTElement {
             this.tabpanelIds = this.getTabPanelIds();
 
             this.setTabs();
-            this.setTabPanels();
         }
     }
 
@@ -107,7 +104,6 @@ export class FASTTabs extends FASTElement {
             this.tabpanelIds = this.getTabPanelIds();
 
             this.setTabs();
-            this.setTabPanels();
         }
     }
 
@@ -149,7 +145,12 @@ export class FASTTabs extends FASTElement {
         }
     }
 
-    protected setTabs = (): void => {
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void {
         const gridHorizontalProperty: string = "gridColumn";
         const gridVerticalProperty: string = "gridRow";
         const gridProperty: string = this.isHorizontal()
@@ -186,9 +187,10 @@ export class FASTTabs extends FASTElement {
                 ? tab.classList.add("vertical")
                 : tab.classList.remove("vertical");
         });
-    };
+        this.setTabPanels();
+    }
 
-    private setTabPanels = (): void => {
+    private setTabPanels(): void {
         this.tabpanels.forEach((tabpanel: HTMLElement, index: number) => {
             const tabId: string = this.tabIds[index];
             const tabpanelId: string = this.tabpanelIds[index];
@@ -198,7 +200,7 @@ export class FASTTabs extends FASTElement {
                 ? tabpanel.setAttribute("hidden", "")
                 : tabpanel.removeAttribute("hidden");
         });
-    };
+    }
 
     private getTabIds(): Array<string> {
         return this.tabs.map((tab: HTMLElement) => {
@@ -293,7 +295,7 @@ export class FASTTabs extends FASTElement {
         }
     }
 
-    private adjustForward = (e: KeyboardEvent): void => {
+    private adjustForward(e: KeyboardEvent): void {
         const group: HTMLElement[] = this.tabs;
         let index: number = 0;
 
@@ -314,9 +316,9 @@ export class FASTTabs extends FASTElement {
                 index += 1;
             }
         }
-    };
+    }
 
-    private adjustBackward = (e: KeyboardEvent): void => {
+    private adjustBackward(e: KeyboardEvent): void {
         const group: HTMLElement[] = this.tabs;
         let index: number = 0;
 
@@ -333,16 +335,16 @@ export class FASTTabs extends FASTElement {
                 index -= 1;
             }
         }
-    };
+    }
 
-    private moveToTabByIndex = (group: HTMLElement[], index: number) => {
+    private moveToTabByIndex(group: HTMLElement[], index: number) {
         const tab: HTMLElement = group[index] as HTMLElement;
         this.activetab = tab;
         this.prevActiveTabIndex = this.activeTabIndex;
         this.activeTabIndex = index;
         tab.focus();
         this.setComponent();
-    };
+    }
 
     private focusTab(): void {
         this.tabs[this.activeTabIndex].focus();