From d46a485d0ba7d7efc7133294b7df69be7ab5e7a0 Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Tue, 19 Dec 2023 12:36:52 -0800 Subject: [PATCH 1/7] tabs fn cleanup --- .../fast-foundation/src/tabs/tabs.ts | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts index 26a0a48e3d2..51af71bd117 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,7 @@ export class FASTTabs extends FASTElement { } } - protected setTabs = (): void => { + protected setTabs(): void { const gridHorizontalProperty: string = "gridColumn"; const gridVerticalProperty: string = "gridRow"; const gridProperty: string = this.isHorizontal() @@ -186,9 +182,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 +195,7 @@ export class FASTTabs extends FASTElement { ? tabpanel.setAttribute("hidden", "") : tabpanel.removeAttribute("hidden"); }); - }; + } private getTabIds(): Array { return this.tabs.map((tab: HTMLElement) => { @@ -293,7 +290,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 +311,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 +330,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(); From 523fe6fbaa83dce56d2fad81e39ad7f3c6867711 Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Tue, 19 Dec 2023 12:49:51 -0800 Subject: [PATCH 2/7] Change files --- ...st-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json 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..67a038e11e2 --- /dev/null +++ b/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "tabs fn cleanup", + "packageName": "@microsoft/fast-foundation", + "email": "quic_scomeau@qualcomm.com", + "dependentChangeType": "prerelease" +} From 382d1882682ba2a84a6069302daabac820038fbd Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Thu, 21 Dec 2023 07:43:56 -0800 Subject: [PATCH 3/7] template --- .../fast-foundation/docs/api-report.md | 2 +- .../fast-foundation/src/tabs/README.md | 18 +++++++++--------- .../fast-foundation/src/tabs/tabs.template.ts | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 7b6bd2bcbf0..bd1fb412bcd 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -1966,7 +1966,7 @@ export class FASTTabs extends FASTElement { // @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..f6fb58d478e 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` | protected | | | `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"; From 1cadd3e91b78310a7971aca4bf6d34c11de1ee1a Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Thu, 21 Dec 2023 08:39:23 -0800 Subject: [PATCH 4/7] add comment --- .../web-components/fast-foundation/docs/api-report.md | 1 - .../web-components/fast-foundation/src/tabs/README.md | 8 ++++---- packages/web-components/fast-foundation/src/tabs/tabs.ts | 5 +++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index bd1fb412bcd..6c297230a42 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -1965,7 +1965,6 @@ export class FASTTabs extends FASTElement { orientation: TabsOrientation; // @internal (undocumented) orientationChanged(): void; - // (undocumented) protected setTabs(): void; // @internal (undocumented) tabpanels: HTMLElement[]; diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md index f6fb58d478e..74f3b9a18cf 100644 --- a/packages/web-components/fast-foundation/src/tabs/README.md +++ b/packages/web-components/fast-foundation/src/tabs/README.md @@ -134,10 +134,10 @@ export const myTabs = Tabs.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------- | --------- | ------------------------------ | -------------------- | ------ | -------------- | -| `setTabs` | protected | | | `void` | | -| `adjust` | public | The adjust method for FASTTabs | `adjustment: number` | `void` | | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------- | --------- | --------------------------------------------------------------------------------- | -------------------- | ------ | -------------- | +| `setTabs` | protected | 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.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts index 51af71bd117..5b3e0d2ad04 100644 --- a/packages/web-components/fast-foundation/src/tabs/tabs.ts +++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts @@ -145,6 +145,11 @@ export class FASTTabs extends FASTElement { } } + /** + * Function that is invoked whenever the selected tab or the tab collection changes. + * + * @protected + */ protected setTabs(): void { const gridHorizontalProperty: string = "gridColumn"; const gridVerticalProperty: string = "gridRow"; From e3c1b40c65291d64f4abad6014933c16e7e1149c Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Thu, 21 Dec 2023 08:44:24 -0800 Subject: [PATCH 5/7] tweak --- packages/web-components/fast-foundation/src/tabs/tabs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts index 5b3e0d2ad04..b7e88c71d9e 100644 --- a/packages/web-components/fast-foundation/src/tabs/tabs.ts +++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts @@ -148,7 +148,7 @@ export class FASTTabs extends FASTElement { /** * Function that is invoked whenever the selected tab or the tab collection changes. * - * @protected + * @public */ protected setTabs(): void { const gridHorizontalProperty: string = "gridColumn"; From 49eb44096315808187f677c7fe49deef771d6bba Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Thu, 21 Dec 2023 08:47:04 -0800 Subject: [PATCH 6/7] read me --- .../web-components/fast-foundation/src/tabs/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md index 74f3b9a18cf..88757a44664 100644 --- a/packages/web-components/fast-foundation/src/tabs/README.md +++ b/packages/web-components/fast-foundation/src/tabs/README.md @@ -134,10 +134,10 @@ export const myTabs = Tabs.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------- | --------- | --------------------------------------------------------------------------------- | -------------------- | ------ | -------------- | -| `setTabs` | protected | Function that is invoked whenever the selected tab or the tab collection changes. | | `void` | | -| `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 From 88e1bf543df27c7f80c4b240754104b4877f4d78 Mon Sep 17 00:00:00 2001 From: Stephane Comeau Date: Thu, 4 Jan 2024 10:26:05 -0800 Subject: [PATCH 7/7] Update change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json Co-authored-by: Chris Holt --- ...ft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json b/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json index 67a038e11e2..371e8f0bc91 100644 --- a/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json +++ b/change/@microsoft-fast-foundation-879984ab-c986-4ae7-93f2-bbebf4530962.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "tabs fn cleanup", + "comment": "fix: allow tabs `setTabs` method to be extended", "packageName": "@microsoft/fast-foundation", "email": "quic_scomeau@qualcomm.com", "dependentChangeType": "prerelease"