@patternfly/react-core 6.5.0-prerelease.1 → 6.5.0-prerelease.11

package/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx

@@ -0,0 +1,89 @@
+import { useState, MouseEvent } from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionWithHeading = () => {
+  const [isExpanded1, setIsExpanded1] = useState(false);
+  const [isExpanded2, setIsExpanded2] = useState(false);
+  const [isExpandedDetached, setIsExpandedDetached] = useState(false);
+
+  const onToggle1 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded1(isExpanded);
+  };
+
+  const onToggle2 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded2(isExpanded);
+  };
+
+  const onToggleDetached = (isExpanded: boolean) => {
+    setIsExpandedDetached(isExpanded);
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <h4>Document with Expandable Sections</h4>
+        <p>This demonstrates how to use expandable sections with proper heading semantics.</p>
+
+        {/* Using toggleWrapper prop for proper heading semantics */}
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleText="Toggle as a heading"
+          onToggle={onToggle1}
+          isExpanded={isExpanded1}
+        >
+          <p>
+            This content is visible only when the component is expanded. The toggle text above functions as a proper
+            heading in the document structure, which is important for screen readers and other assistive technologies.
+          </p>
+          <p>
+            When using the <code>toggleWrapper</code> prop with heading elements (h1-h6), the button is rendered inside
+            the heading element, maintaining proper semantic structure.
+          </p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Detached Variant with Heading</h4>
+        <p>You can also use the detached variant with heading semantics:</p>
+
+        <ExpandableSectionToggle
+          toggleWrapper="h5"
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+          onToggle={onToggleDetached}
+        >
+          Detached Toggle with Heading
+        </ExpandableSectionToggle>
+
+        <ExpandableSection
+          isDetached
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+        >
+          <p>This is detached content that can be positioned anywhere in the DOM.</p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Custom Content with Heading</h4>
+        <p>You can also use custom content within heading wrappers:</p>
+
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleContent={
+            <span>
+              <CheckCircleIcon /> Custom Heading Content with Icon
+            </span>
+          }
+          onToggle={onToggle2}
+          isExpanded={isExpanded2}
+        >
+          <p>This expandable section uses custom content with an icon inside a heading wrapper.</p>
+        </ExpandableSection>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/Page/Page.tsx

@@ -266,6 +266,7 @@ class Page extends Component<PageProps, PageState> {
       isManagedSidebar,
       onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
       isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
+      isMobile: mobileView,
       width,
       height,
       getBreakpoint,

package/src/components/Page/PageContext.tsx

@@ -6,6 +6,7 @@ export interface PageContextProps {
   isManagedSidebar: boolean;
   onSidebarToggle: () => void;
   isSidebarOpen: boolean;
+  isMobile: boolean;
   width: number;
   height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -16,6 +17,7 @@ export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isSidebarOpen: false,
   onSidebarToggle: () => null,
+  isMobile: false,
   width: null,
   height: null,
   getBreakpoint,

package/src/components/Page/PageSidebar.tsx

@@ -35,7 +35,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
+    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen, isMobile }) => {
       const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
 
       return (
@@ -43,7 +43,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            sidebarOpen && styles.modifiers.expanded,
+            sidebarOpen && isMobile && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className
           )}

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="false"
-    class="pf-v6-c-page__sidebar pf-m-expanded ''"
+    class="pf-v6-c-page__sidebar ''"
     id="page-sidebar"
   >
     <div>

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Page Check dark page against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -55,7 +55,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -92,7 +92,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -237,7 +237,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -386,7 +386,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -629,7 +629,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -913,7 +913,7 @@ exports[`Page Check page to verify skip to content points to main content region
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1063,7 +1063,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -1106,7 +1106,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1251,7 +1251,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1400,7 +1400,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1545,7 +1545,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div

package/src/components/Progress/Progress.tsx

@@ -48,6 +48,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
+  hideStatusIcon?: boolean;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -94,6 +96,7 @@ class Progress extends Component<ProgressProps> {
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
       helperText,
+      hideStatusIcon,
       ...props
     } = this.props;
 
@@ -151,6 +154,7 @@ class Progress extends Component<ProgressProps> {
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
           helperText={helperText}
+          hideStatusIcon={hideStatusIcon}
         />
       </div>
     );

package/src/components/Progress/ProgressContainer.tsx

@@ -58,6 +58,8 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Hide the status icon, helpful when space is limited (such as within table cells) */
+  hideStatusIcon?: boolean;
 }
 
 const variantToIcon = {
@@ -76,9 +78,10 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
   tooltipPosition,
-  helperText
+  helperText,
+  hideStatusIcon = false
 }: ProgressContainerProps) => {
-  const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
+  const StatusIcon = !hideStatusIcon && variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
   const updateTooltip = (event: any) => {

package/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx

@@ -15,6 +15,7 @@ it('ProgressContainer should match snapshot (auto-generated)', () => {
       variant={'danger'}
       measureLocation={'outside'}
       value={42}
+      hideStatusIcon={false}
     />
   );
   expect(asFragment()).toMatchSnapshot();

package/src/components/Progress/__tests__/Progress.test.tsx

@@ -108,3 +108,35 @@ test('Renders passed helper text', () => {
 
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
+
+describe('hideStatusIcon prop behavior', () => {
+  test('shows status icon by default when hideStatusIcon is not set', () => {
+    render(<Progress id="default-status-icon-test" value={100} variant="success" />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with success variant', () => {
+    render(<Progress id="hide-icon-success" value={100} variant="success" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with danger variant', () => {
+    render(<Progress id="hide-icon-danger" value={50} variant="danger" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with warning variant', () => {
+    render(<Progress id="hide-icon-warning" value={75} variant="warning" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('shows status icon when hideStatusIcon is explicitly false', () => {
+    render(<Progress id="show-icon-success" value={100} variant="success" hideStatusIcon={false} />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+});

package/src/components/Progress/examples/Progress.md

@@ -107,20 +107,8 @@ When conveying status, you should ensure:
 
 ```
 
-### Inside success
+### Interactive status icon and measure location
 
-```ts file="./ProgressInsideSuccess.tsx"
-
-```
-
-### Outside failure
-
-```ts file="./ProgressOutsideFailure.tsx"
-
-```
-
-### Failure without measure
-
-```ts file="./ProgressFailureWithoutMeasure.tsx"
+```ts file="./ProgressInteractiveFailure.tsx"
 
 ```

package/src/components/Progress/examples/ProgressInteractiveFailure.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+  Radio,
+  Checkbox,
+  Form,
+  FormGroup
+} from '@patternfly/react-core';
+
+export const ProgressInteractiveFailure: React.FunctionComponent = () => {
+  const [measureLocation, setMeasureLocation] = useState<ProgressMeasureLocation>(ProgressMeasureLocation.inside);
+  const [hideStatusIcon, setHideStatusIcon] = useState<boolean>(false);
+
+  const measureLocationOptions = [
+    { value: ProgressMeasureLocation.inside, label: 'Inside' },
+    { value: ProgressMeasureLocation.outside, label: 'Outside' },
+    { value: ProgressMeasureLocation.top, label: 'Top' },
+    { value: ProgressMeasureLocation.none, label: 'None' }
+  ];
+
+  return (
+    <Form>
+      <FormGroup fieldId="measure-location" label="Measure location">
+        {measureLocationOptions.map((option) => (
+          <Radio
+            key={option.value}
+            id={`measure-location-${option.value}`}
+            name="measure-location"
+            label={option.label}
+            value={option.value}
+            isChecked={measureLocation === option.value}
+            onChange={() => setMeasureLocation(option.value)}
+          />
+        ))}
+      </FormGroup>
+      <FormGroup fieldId="hide-status-icon">
+        <Checkbox
+          id="hide-status-icon"
+          label="Hide status icon"
+          isChecked={hideStatusIcon}
+          onChange={(_, checked) => setHideStatusIcon(checked)}
+        />
+      </FormGroup>
+      <Progress
+        value={33}
+        title="Title"
+        measureLocation={measureLocation}
+        variant={ProgressVariant.danger}
+        hideStatusIcon={hideStatusIcon}
+      />
+    </Form>
+  );
+};

package/src/components/Tabs/Tabs.tsx

@@ -206,7 +206,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     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<TabsProps, TabsState> {
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
     const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
   expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
 });
 
+test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
+  render(
+    <Tabs isNav role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
+});
+
+test(`Renders with div wrapper by default`, () => {
+  render(
+    <Tabs>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when component="nav"`, () => {
+  render(
+    <Tabs component="nav">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when isNav is true`, () => {
+  render(
+    <Tabs isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
+  render(
+    <Tabs component="div" isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-29"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-17"
+      data-ouia-component-id="OUIA-Generated-Tabs-22"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-23"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-30"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-24"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

package/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 `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.