Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEAT: Tabs tabOrder enhancement #6894

Closed
wants to merge 9 commits into from
Closed

FEAT: Tabs tabOrder enhancement #6894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3c25c84
working
scomea Jan 16, 2024
1b29f6b
adjust
scomea Jan 17, 2024
40552ee
setindex
scomea Jan 17, 2024
bcfe7bd
customTabOrder
scomea Jan 22, 2024
df8312a
fix tests
scomea Jan 23, 2024
216e699
example
scomea Jan 23, 2024
633b386
shared panel
scomea Jan 23, 2024
420efc1
tweak
scomea Jan 23, 2024
e17f4a1
narrator hack
scomea Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions packages/web-components/fast-foundation/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1955,17 +1955,33 @@ export class FASTTabPanel extends FASTElement {
//
// @public
export class FASTTabs extends FASTElement {
activeid: string;
activeid: string | undefined;
// @internal (undocumented)
activeidChanged(oldValue: string, newValue: string): void;
activetab: HTMLElement;
activeidChanged(): void;
get activetab(): HTMLElement | undefined;
set activetab(tabElement: HTMLElement | undefined);
get activeTabIndex(): number;
set activeTabIndex(index: number);
adjust(adjustment: number): void;
// @internal (undocumented)
connectedCallback(): void;
customTabOrder: string[] | undefined;
// (undocumented)
customTabOrderChanged(): void;
// @internal (undocumented)
disconnectedCallback(): void;
// @internal
handleTabKeyDown: (event: KeyboardEvent) => void;
// @internal
handleTabMouseDown: (event: MouseEvent) => void;
orientation: TabsOrientation;
// @internal (undocumented)
orientationChanged(): void;
protected setTabs(): void;
// @internal
tabList: HTMLElement;
// @internal
tabOrder: string[];
// @internal (undocumented)
tabpanels: HTMLElement[];
// @internal (undocumented)
Expand All @@ -1974,6 +1990,7 @@ export class FASTTabs extends FASTElement {
tabs: HTMLElement[];
// @internal (undocumented)
tabsChanged(): void;
protected updateActiveid(): void;
}

// @internal
Expand Down
22 changes: 13 additions & 9 deletions packages/web-components/fast-foundation/src/tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,18 +126,22 @@ 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 | |
| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------- | ------- | -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | -------------- |
| `orientation` | public | `TabsOrientation` | | The orientation | |
| `activeid` | public | `string or undefined` | | The id of the active tab | |
| `customTabOrder` | public | `string[] or undefined` | | An array of id's that specifies the order of tabs. This overrides the component's default DOM order based tabOrder | |
| `activetab` | public | `HTMLElement or undefined` | | Sets the active tab Element | |
| `activeTabIndex` | public | `number` | | Sets the active tab index based on tabOrder. If the target tab is not focusable setting this will have no effect. | |

#### Methods

| 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` | |
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ----------------------- | --------- | ------------------------------------------------------------- | -------------------- | ------ | -------------- |
| `customTabOrderChanged` | public | | | `void` | |
| `setTabs` | public | Function that is invoked whenever the tab collection changes. | | `void` | |
| `updateActiveid` | protected | Function that is invoked whenever the active tab changes. | | `void` | |
| `adjust` | public | The adjust method for FASTTabs | `adjustment: number` | `void` | |

#### Events

Expand Down
29 changes: 29 additions & 0 deletions packages/web-components/fast-foundation/src/tabs/stories/tabs.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,32 @@ DisabledTabs.args = {
],
},
};

const tabOrderStoryTemplate = html<StoryArgs<FASTTabs>>`
<fast-tabs :customTabOrder=${["t2", "t3", "t1"]}>
<fast-tab id="t1" aria-controls="tp1">Tab 1</fast-tab>
<fast-tab id="t2" aria-controls="tp2">Tab 2</fast-tab>
<fast-tab id="t3" aria-controls="tp3">Tab 3</fast-tab>
<fast-tab-panel id="tp1">Tab 1</fast-tab-panel>
<fast-tab-panel id="tp2">Tab 2</fast-tab-panel>
<fast-tab-panel id="tp3">Tab 3</fast-tab-panel>
</fast-tabs>
`;

export const TabsWithTabOrder: Story<FASTTabs> = renderComponent(
tabOrderStoryTemplate
).bind({});

const tabOrderSharedPanelStoryTemplate = html<StoryArgs<FASTTabs>>`
<fast-tabs :customTabOrder=${["t2", "t3", "t1"]}>
<fast-tab id="t1" aria-controls="tp1">Tab 1</fast-tab>
<fast-tab id="t2" aria-controls="tp2">Tab 2</fast-tab>
<fast-tab id="t3" aria-controls="tp2">Tab 3</fast-tab>
<fast-tab-panel id="tp1">Tab 1</fast-tab-panel>
<fast-tab-panel id="tp2">Tab 2 and 3 share this</fast-tab-panel>
</fast-tabs>
`;

export const TabsWithSharedPanel: Story<FASTTabs> = renderComponent(
tabOrderSharedPanelStoryTemplate
).bind({});
4 changes: 2 additions & 2 deletions packages/web-components/fast-foundation/src/tabs/tabs.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
import { ElementViewTemplate, html, ref, 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";
Expand All @@ -12,7 +12,7 @@ export function tabsTemplate<T extends FASTTabs>(
): ElementViewTemplate<T> {
return html<T>`
${startSlotTemplate(options)}
<div class="tablist" part="tablist" role="tablist">
<div class="tablist" part="tablist" role="tablist" ${ref("tabList")}>
<slot name="tab" ${slotted("tabs")}></slot>
</div>
${endSlotTemplate(options)}
Expand Down
Loading
Loading