diff --git a/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json b/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json new file mode 100644 index 00000000000..371e8f0bc91 --- /dev/null +++ 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": "quic_scomeau@qualcomm.com", + "dependentChangeType": "prerelease" +} diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 7b6bd2bcbf0..6c297230a42 100644 --- 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 index a968d37d1e9..88757a44664 100644 --- 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 index 4d98139a436..192ff626579 100644 --- 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 index 26a0a48e3d2..b7e88c71d9e 100644 --- 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 { 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();