Skip to content

feat(component): add anchor navigation functionality to <post-tab> component #6344

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

Closed
wants to merge 5 commits into from
Closed

feat(component): add anchor navigation functionality to <post-tab> component #6344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c519650
feat(component): implement initial functionality of Tabs-anchor navig…
alionazherdetska Sep 29, 2025
35477e3
chenged the used property
alionazherdetska Sep 29, 2025
49f5a4e
Update post-tab-header.tsx
alionazherdetska Sep 30, 2025
f7c7088
Update post-tabs.tsx
alionazherdetska Sep 30, 2025
6874075
Update post-tabs.tsx
alionazherdetska Sep 30, 2025
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
30 changes: 15 additions & 15 deletions packages/components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,30 +448,30 @@ export namespace Components {
}
interface PostTabHeader {
/**
* The name of the panel controlled by the tab header.
* The name of the tab, used to associate it with a tab panel or identify the active tab in navigation mode.
*/
"panel": string;
"name": string;
}
interface PostTabPanel {
/**
* The name of the panel, used to associate it with a tab header.
* The name of the tab that this panel is associated with.
*/
"name": string;
"for": string;
}
interface PostTabs {
/**
* The name of the panel that is initially shown. If not specified, it defaults to the panel associated with the first tab. **Changing this value after initialization has no effect.**
* The name of the tab that is initially active. If not specified, it defaults to the first tab. **Changing this value after initialization has no effect.**
*/
"activePanel"?: HTMLPostTabPanelElement['name'];
"activeTab"?: string;
/**
* When set to true, this property allows the tabs container to span the full width of the screen, from edge to edge.
* @default false
*/
"fullWidth": boolean;
/**
* Shows the panel with the given name and selects its associated tab. Any other panel that was previously shown becomes hidden and its associated tab is unselected.
* Shows the panel with the given name and selects its associated tab. In navigation mode, only updates the active tab state. Any other panel that was previously shown becomes hidden and its associated tab is unselected.
*/
"show": (panelName: string) => Promise<void>;
"show": (tabName: string) => Promise<void>;
}
interface PostTogglebutton {
/**
Expand Down Expand Up @@ -1297,28 +1297,28 @@ declare namespace LocalJSX {
}
interface PostTabHeader {
/**
* The name of the panel controlled by the tab header.
* The name of the tab, used to associate it with a tab panel or identify the active tab in navigation mode.
*/
"panel": string;
"name": string;
}
interface PostTabPanel {
/**
* The name of the panel, used to associate it with a tab header.
* The name of the tab that this panel is associated with.
*/
"name": string;
"for": string;
}
interface PostTabs {
/**
* The name of the panel that is initially shown. If not specified, it defaults to the panel associated with the first tab. **Changing this value after initialization has no effect.**
* The name of the tab that is initially active. If not specified, it defaults to the first tab. **Changing this value after initialization has no effect.**
*/
"activePanel"?: HTMLPostTabPanelElement['name'];
"activeTab"?: string;
/**
* When set to true, this property allows the tabs container to span the full width of the screen, from edge to edge.
* @default false
*/
"fullWidth"?: boolean;
/**
* An event emitted after the active tab changes, when the fade in transition of its associated panel is finished. The payload is the name of the newly shown panel.
* An event emitted after the active tab changes, when the fade in transition of its associated panel is finished. The payload is the name of the newly active tab.
*/
"onPostChange"?: (event: PostTabsCustomEvent<string>) => void;
}
Expand Down
34 changes: 25 additions & 9 deletions packages/components/src/components/post-tab-header/post-tab-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { checkRequiredAndType } from '@/utils';
import { nanoid } from 'nanoid';

/**
* @slot default - Slot for the content of the tab header.
* @slot default - Slot for the content of the tab header. Can contain text or an <a> element for navigation mode.
*/

@Component({
Expand All @@ -16,29 +16,45 @@ export class PostTabHeader {
@Element() host: HTMLPostTabHeaderElement;

@State() tabId: string;
@State() isNavigationMode = false;

/**
* The name of the panel controlled by the tab header.
* The name of the tab, used to associate it with a tab panel or identify the active tab in navigation mode.
*/
@Prop({ reflect: true }) readonly panel!: string;
@Prop({ reflect: true }) readonly name!: string;

@Watch('panel')
validateFor() {
checkRequiredAndType(this, 'panel', 'string');
@Watch('name')
validateName() {
checkRequiredAndType(this, 'name', 'string');
}

componentWillLoad() {
this.tabId = `tab-${this.host.id || nanoid(6)}`;
this.checkNavigationMode();
}

componentDidLoad() {
// Re-check navigation mode after content is loaded
this.checkNavigationMode();
}

private checkNavigationMode() {
const hasAnchor = this.host.querySelector('a') !== null;
this.isNavigationMode = hasAnchor;
}

render() {
const role = this.isNavigationMode ? undefined : 'tab';
const ariaSelected = this.isNavigationMode ? undefined : 'false';
const tabindex = this.isNavigationMode ? undefined : '-1';

return (
<Host
id={this.tabId}
role="tab"
role={role}
data-version={version}
aria-selected="false"
tabindex="-1"
aria-selected={ariaSelected}
tabindex={tabindex}
class="tab-title"
slot="tabs"
>
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/components/post-tab-header/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | --------- | --------------------------------------------------- | -------- | ----------- |
| `panel` _(required)_ | `panel` | The name of the panel controlled by the tab header. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------- | --------- | --------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `name` _(required)_ | `name` | The name of the tab, used to associate it with a tab panel or identify the active tab in navigation mode. | `string` | `undefined` |


## Slots

| Slot | Description |
| ----------- | --------------------------------------- |
| `"default"` | Slot for the content of the tab header. |
| Slot | Description |
| ----------- | ----------------------------------------------------------------------------------------------- |
| `"default"` | Slot for the content of the tab header. Can contain text or an <a> element for navigation mode. |


----------------------------------------------
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/components/post-tab-panel/post-tab-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ export class PostTabPanel {
@State() panelId: string;

/**
* The name of the panel, used to associate it with a tab header.
* The name of the tab that this panel is associated with.
*/
@Prop({ reflect: true }) readonly name!: string;
@Prop({ reflect: true }) readonly for!: string;

@Watch('name')
validateName() {
checkRequiredAndType(this, 'name', 'string');
@Watch('for')
validateFor() {
checkRequiredAndType(this, 'for', 'string');
}
componentWillLoad() {
this.validateName();
this.validateFor();
// get the id set on the host element or use a random id by default
this.panelId = `panel-${this.host.id || nanoid(6)}`;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/post-tab-panel/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | --------- | -------------------------------------------------------------- | -------- | ----------- |
| `name` _(required)_ | `name` | The name of the panel, used to associate it with a tab header. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------ | --------- | ------------------------------------------------------- | -------- | ----------- |
| `for` _(required)_ | `for` | The name of the tab that this panel is associated with. | `string` | `undefined` |


## Slots
Expand Down
Loading
Loading