From 0dadec66d34eda608159f4ad7929386cda73985c Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 3 Nov 2025 17:55:28 -0500 Subject: [PATCH 1/4] feat: Added updates for site Navigation --- .../react-core/src/components/Tabs/Tabs.tsx | 2 +- .../src/components/Tabs/examples/Tabs.md | 8 +++++ .../components/Tabs/examples/TabsSiteNav.tsx | 35 +++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 5f4575ecfc5..9e834ba6e4c 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -529,7 +529,7 @@ class Tabs extends Component { const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement) => child.props); const uniqueId = id || getUniqueId(); - const Component: any = component === TabsComponent.nav ? 'nav' : 'div'; + const Component: any = component === TabsComponent.nav || isNav ? 'nav' : 'div'; const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey; const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded; diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 11e6ca62a0c..094482a76b4 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -189,6 +189,14 @@ Subtabs can also link to nav elements. ``` +### Tabs used for site navigation + +Site navigation tabs + +```ts file="./TabsSiteNav.tsx" + +``` + ### With separate content If a `` component is defined outside of a `` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content. diff --git a/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx new file mode 100644 index 00000000000..d2a6de4c58a --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx @@ -0,0 +1,35 @@ +import { useState } from 'react'; +import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; + +export const TabsSiteNav: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + return ( + + Users} href="#users" aria-label="Nav element content users"> + Users + + Containers} href="#containers"> + Containers + + Database} href="#database"> + Database + + Disabled} isDisabled href="#disabled"> + Disabled + + ARIA Disabled} isAriaDisabled href="#aria-disabled"> + ARIA Disabled + + Network} href="#network"> + Network + + + ); +}; From 142c8ba8a9e0082c8b6dec809444b364dcf0b10f Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 10:57:54 -0500 Subject: [PATCH 2/4] Update packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../react-core/src/components/Tabs/examples/TabsSiteNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx index d2a6de4c58a..32b7b99a651 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx @@ -11,7 +11,7 @@ export const TabsSiteNav: React.FunctionComponent = () => { setActiveTabKey(tabIndex); }; return ( - + Users} href="#users" aria-label="Nav element content users"> Users From f788a6f51f54a41ab78933b478e15627aef703b8 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 15:05:37 -0500 Subject: [PATCH 3/4] Updated with changes to allow a div to be set when using isNav. --- packages/react-core/src/components/Tabs/Tabs.tsx | 4 ++-- .../src/components/Tabs/examples/TabsSiteNav.tsx | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 9e834ba6e4c..2c5ad767ca0 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -206,7 +206,6 @@ class Tabs extends Component { backScrollAriaLabel: 'Scroll back', rightScrollAriaLabel: 'Scroll right', forwardScrollAriaLabel: 'Scroll forward', - component: TabsComponent.div, mountOnEnter: false, unmountOnExit: false, ouiaSafe: true, @@ -529,7 +528,8 @@ class Tabs extends Component { const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement) => child.props); const uniqueId = id || getUniqueId(); - const Component: any = component === TabsComponent.nav || isNav ? 'nav' : 'div'; + const defaultComponent = isNav && !component ? 'nav' : 'div'; + const Component: any = component === TabsComponent.nav || (isNav && component !== 'div') ? 'nav' : defaultComponent; const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey; const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded; diff --git a/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx index 32b7b99a651..54b4a8877f8 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx @@ -11,7 +11,12 @@ export const TabsSiteNav: React.FunctionComponent = () => { setActiveTabKey(tabIndex); }; return ( - + Users} href="#users" aria-label="Nav element content users"> Users From 58d388e6bba800fcf0b84a3b879ba678052cec70 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:30:22 -0500 Subject: [PATCH 4/4] Updated the code with feedback from reviews. --- packages/react-core/src/components/Tabs/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 2c5ad767ca0..1c997f8c095 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -529,7 +529,7 @@ class Tabs extends Component { const uniqueId = id || getUniqueId(); const defaultComponent = isNav && !component ? 'nav' : 'div'; - const Component: any = component === TabsComponent.nav || (isNav && component !== 'div') ? 'nav' : defaultComponent; + const Component: any = component !== undefined ? component : defaultComponent; const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey; const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;