@patternfly/react-core 6.6.1-prerelease.4 → 6.6.1-prerelease.6

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.5","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.5","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.4",
+  "version": "6.6.1-prerelease.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.1-prerelease.0",
-    "@patternfly/react-styles": "^6.6.1-prerelease.0",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.0",
+    "@patternfly/react-icons": "^6.6.1-prerelease.1",
+    "@patternfly/react-styles": "^6.6.1-prerelease.1",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.1",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.20",
+    "@patternfly/patternfly": "6.6.0-prerelease.39",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "1fe30b1dc78a10ff784587cf7ce03d96125fbfb7"
+  "gitHead": "652853d353e9440be40a7fbb8dfc04706137558a"
 }

package/src/components/Compass/Compass.tsx

@@ -12,6 +12,8 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   dock?: React.ReactNode;
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
+  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
+  isDockExpandableExpanded?: boolean;
   /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
    * will handle toggling the visibility of the text in individual isDocked components.
    */
@@ -45,6 +47,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   masthead,
   dock,
   isDockExpanded,
+  isDockExpandableExpanded,
   isDockTextExpanded,
   header,
   isHeaderExpanded = true,
@@ -69,6 +72,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
           className={css(
             `${styles.compass}__dock`,
             isDockExpanded && styles.modifiers.expanded,
+            isDockExpandableExpanded && styles.modifiers.expandableExpanded,
             isDockTextExpanded && styles.modifiers.textExpanded
           )}
         >

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

@@ -94,6 +94,21 @@ test('Renders footer without expanded class and with inert when isFooterExpanded
   expect(footerElement).toHaveAttribute('inert');
 });
 
+test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded />);
+  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded);
+});
+
+test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded={false} />);
+  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+});
+
+test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => {
+  render(<Compass dock={<div>Dock content</div>} />);
+  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+});
+
 test('Renders with drawer when drawerContent is provided', () => {
   render(<Compass drawerContent={<div>Drawer content</div>} />);
   expect(screen.getByText('Drawer content')).toBeVisible();

package/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

@@ -23,9 +23,7 @@ exports[`Matches snapshot with icon 1`] = `
 
 exports[`Matches snapshot without icon 1`] = `
 <DocumentFragment>
-  <li
-    class=""
-  >
+  <li>
     <span>
       List item content
     </span>

package/src/components/Nav/NavExpandable.tsx

@@ -8,6 +8,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { IS_INERT } from '../../helpers/inert';
+import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
 
 export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -17,6 +18,8 @@ export interface NavExpandableProps
   srText?: string;
   /** Boolean to pragmatically expand or collapse section */
   isExpanded?: boolean;
+  /** Adds an expandable icon to indicate the section is expandable */
+  hasExpandableIcon?: boolean;
   /** Anything that can be rendered inside of the expandable list */
   children?: React.ReactNode;
   /** Additional classes added to the container */
@@ -50,7 +53,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
     className: '',
     groupId: null as string,
     isActive: false,
-    id: ''
+    id: '',
+    hasExpandableIcon: false
   };
 
   state = {
@@ -100,6 +104,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       id,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
+      hasExpandableIcon,
       buttonProps,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onExpand,
@@ -137,7 +142,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         {...buttonProps}
                       >
                         {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
-                        {typeof title !== 'string' ? <span className={css(styles.navLinkText)}>{title}</span> : title}
+                        {hasExpandableIcon && (
+                          <span className={css(styles.navLinkExpandableIcon)}>
+                            <RhUiEllipsisHorizontalFillIcon />
+                          </span>
+                        )}
+                        <span className={css(styles.navLinkText)}>{title}</span>
                         <span className={css(styles.navToggle)}>
                           <span className={css(styles.navToggleIcon)}>
                             <RhMicronsCaretDownIcon />

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -12,7 +12,11 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-expanded="false"
       class="pf-v6-c-nav__link"
     >
-      string
+      <span
+        class="pf-v6-c-nav__link-text"
+      >
+        string
+      </span>
       <span
         class="pf-v6-c-nav__toggle"
       >

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -30,3 +30,24 @@ test('Does not render nav link icon wrapper when icon prop is not provided', ()
   const button = screen.getByRole('button', { name: 'NavExpandable' });
   expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument();
 });
+
+test(`Renders with expandable icon when hasExpandableIcon is true`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" hasExpandableIcon={true}></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).toBeInTheDocument();
+});
+
+test(`Does not render expandable icon when hasExpandableIcon is false`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" hasExpandableIcon={false}></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument();
+});
+
+test(`Does not render expandable icon by default`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument();
+});

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

@@ -196,7 +196,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           class="pf-v6-c-nav__link"
           id="grp-1"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -329,7 +333,11 @@ exports[`Nav Expandable Nav List 1`] = `
           class="pf-v6-c-nav__link"
           id="grp-1"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -461,7 +469,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-expanded="false"
           class="pf-v6-c-nav__link"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -1017,7 +1029,6 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"

package/src/components/Nav/examples/Nav.md

@@ -9,11 +9,12 @@ ouia: true
 import { useState } from 'react';
 import './nav.css';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
-import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 
 ## Examples
 
@@ -81,6 +82,18 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
+### Docked
+
+The docked variant of `Navigation` displays only icons passed to child `NavItems` or `NavExpandable`. Text becomes visible when `isDockTextExpanded` or `isDockExpandableExpanded` are applied to an outer page or compass dock.
+
+`NavExpandable` items should include the `hasExpandableIcon` prop to indicate their expandable nature while in the collapsed state of the docked nav as the caret will not be rendered.
+
+See the [docked nav demo](/components/navigation/react-demos#docked-nav) for a fully functional example.
+
+```ts file="./NavDocked.tsx"
+
+```
+
 ## Types
 
 ### NavSelectClickHandler

package/src/components/Nav/examples/NavDocked.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Nav, NavItem, NavList, NavExpandable } from '@patternfly/react-core';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
+
+export const NavDocked: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = useState(0);
+  const [isGroupExpanded, setIsGroupExpanded] = useState(false);
+
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
+    setIsGroupExpanded(result.isExpanded);
+  };
+
+  return (
+    <Nav variant="docked" onSelect={onSelect} onToggle={onToggle} aria-label="Default global" ouiaId="DefaultNav">
+      <NavList>
+        <NavItem
+          icon={<RhUiCubesIcon />}
+          preventDefault
+          id="nav-default-link1"
+          to="#nav-default-link1"
+          itemId={0}
+          isActive={activeItem === 0}
+        >
+          Default Link 1
+        </NavItem>
+        <NavItem
+          icon={<RhUiCloudIcon />}
+          preventDefault
+          id="nav-default-link2"
+          to="#nav-default-link2"
+          itemId={1}
+          isActive={activeItem === 1}
+        >
+          Default Link 2
+        </NavItem>
+        <NavItem
+          icon={<RhUiCodeIcon />}
+          preventDefault
+          id="nav-default-link3"
+          to="#nav-default-link3"
+          itemId={2}
+          isActive={activeItem === 2}
+        >
+          Default Link 3
+        </NavItem>
+        <NavExpandable
+          title="Expandable Group 1"
+          groupId="nav-expandable-group-1"
+          icon={<RhUiFolderIcon />}
+          isExpanded={isGroupExpanded}
+          hasExpandableIcon
+          buttonProps={{ 'aria-label': 'Expandable Group 1' }}
+        >
+          <NavItem
+            preventDefault
+            id="expandable-1"
+            to="#expandable-1"
+            groupId="nav-expandable-group-1"
+            itemId={3}
+            isActive={activeItem === 3}
+          >
+            Subnav 1 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-2"
+            to="#expandable-2"
+            groupId="nav-expandable-group-1"
+            itemId={4}
+            isActive={activeItem === 4}
+          >
+            Subnav 1 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-3"
+            to="#expandable-3"
+            groupId="nav-expandable-group-1"
+            itemId={5}
+            isActive={activeItem === 5}
+          >
+            Subnav 1 Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavIcons.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
-import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
@@ -22,7 +22,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link1"
           itemId={0}
           isActive={activeItem === 0}
-          icon={<CubeIcon />}
+          icon={<RhUiCubesIcon />}
         >
           Link 1
         </NavItem>
@@ -32,7 +32,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link2"
           itemId={1}
           isActive={activeItem === 1}
-          icon={<RhUiFolderFillIcon />}
+          icon={<RhUiFolderIcon />}
         >
           Link 2
         </NavItem>
@@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link3"
           itemId={2}
           isActive={activeItem === 2}
-          icon={<RhUiCloudFillIcon />}
+          icon={<RhUiCloudIcon />}
         >
           Link 3
         </NavItem>
@@ -56,7 +56,7 @@ export const NavIcons: React.FunctionComponent = () => {
         >
           Link 4
         </NavItem>
-        <NavExpandable title="Expandable" icon={<RhUiFolderOpenFillIcon />} groupId="nav-icon-expandable">
+        <NavExpandable title="Expandable" icon={<RhUiFolderOpenIcon />} groupId="nav-icon-expandable">
           <NavItem
             preventDefault
             id="nav-icon-expandable-link1"

package/src/components/Page/Page.tsx

@@ -24,11 +24,16 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'docked';
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
   isDockExpanded?: boolean;
+  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
+  isDockExpandableExpanded?: boolean;
   /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and
    * will handle toggling the visibility of the text in individual isDocked components.
    */
   isDockTextExpanded?: boolean;
-  /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
+  /** The horizontal masthead content (e.g. <Masthead /> or <PageHeader />). PageHeader is an alternative to Masthead
+   * and should only be used to wrap custom header content. When using the docked variant, this content will only render at
+   * mobile viewports.
+   */
   masthead?: React.ReactNode;
   /** @beta Content to render in the vertical dock when variant of docked is used. At mobile viewports, this content will be replaced with the content passed to masthead. */
   dockContent?: React.ReactNode;
@@ -131,6 +136,7 @@ class Page extends Component<PageProps, PageState> {
     defaultManagedSidebarIsOpen: true,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
+    isDockExpandableExpanded: false,
     onNotificationDrawerExpand: () => null,
     mainComponent: 'main',
     getBreakpoint,
@@ -245,6 +251,7 @@ class Page extends Component<PageProps, PageState> {
       variant,
       isDockExpanded = false,
       isDockTextExpanded = false,
+      isDockExpandableExpanded = false,
       masthead,
       dockContent,
       sidebar,
@@ -371,6 +378,7 @@ class Page extends Component<PageProps, PageState> {
                 className={css(
                   styles.pageDock,
                   isDockExpanded && styles.modifiers.expanded,
+                  isDockExpandableExpanded && styles.modifiers.expandableExpanded,
                   isDockTextExpanded && styles.modifiers.textExpanded
                 )}
               >

package/src/components/Page/PageHeader.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageHeaderProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the page header. This should be custom header content, rather than the PatternFly Masthead. */
+  children?: React.ReactNode;
+  /** Additional classes added to the page header */
+  className?: string;
+  /** Sets the base component to render. Defaults to header */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
+  className,
+  children,
+  component = 'header',
+  ...props
+}: PageHeaderProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageHeader, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageHeader.displayName = 'PageHeader';

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

@@ -9,6 +9,7 @@ import { Nav, NavList, NavItem } from '../../Nav';
 import { SkipToContent } from '../../SkipToContent';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
+import { PageHeader } from '../PageHeader';
 import { Masthead } from '../../Masthead';
 
 import styles from '@patternfly/react-styles/css/components/Page/page';
@@ -481,10 +482,42 @@ describe('Page docked variant', () => {
     expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
   });
 
+  test(`Does not render with ${styles.modifiers.expandableExpanded} when by default and variant is docked`, () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.expandableExpanded);
+  });
+
+  test(`Renders with ${styles.modifiers.expandableExpanded} when isDockExpandableExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockExpandableExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.expandableExpanded);
+  });
+
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
     render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
     const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
+
+  test('Renders PageHeader when passed to the masthead prop', () => {
+    render(
+      <Page {...props} masthead={<PageHeader>Custom header</PageHeader>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const header = screen.getByText('Custom header');
+    expect(header).toHaveClass(styles.pageHeader);
+    expect(header.parentElement).toHaveClass(styles.page);
+  });
 });

package/src/components/Page/__tests__/PageHeader.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageHeader } from '../PageHeader';
+
+test('Renders children', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageHeader} by default`, () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass(styles.pageHeader, { exact: true });
+});
+
+test('Renders as a div by default', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('HEADER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageHeader component="div">Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageHeader className="custom-class">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageHeader id="custom-id">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveAttribute('id', 'custom-id');
+});

package/src/components/Page/examples/Page.md

@@ -3,7 +3,16 @@ id: Page
 section: components
 cssPrefix: pf-v6-c-page
 propComponents:
-  ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
+  [
+    'Page',
+    'PageHeader',
+    'PageSidebar',
+    'PageSidebarBody',
+    'PageSection',
+    'PageGroup',
+    'PageBreadcrumb',
+    'PageToggleButton'
+  ]
 ---
 
 import { useState, useLayoutEffect, useRef } from 'react';
@@ -16,7 +25,7 @@ import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_p
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) or a `<PageHeader>`
 
 The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
 
@@ -24,6 +33,14 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
+### Page header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts file="./PageHeaderContent.tsx"
+
+```
+
 ### Vertical navigation
 
 To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.

package/src/components/Page/examples/PageHeaderContent.tsx

@@ -0,0 +1,19 @@
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+
+export const PageHeaderContent: React.FunctionComponent = () => {
+  const pageHeader = <PageHeader>Page header</PageHeader>;
+
+  return (
+    <Page masthead={pageHeader}>
+      <PageSection aria-labelledby="header-example-section-1">
+        <h2 id="header-example-section-1">Page header example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="header-example-section-2">
+        <h2 id="header-example-section-2">Page header example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="header-example-section-3">
+        <h2 id="header-example-section-3">Page header example section 3</h2>
+      </PageSection>
+    </Page>
+  );
+};