@patternfly/react-core 6.5.0-prerelease.57 → 6.5.0-prerelease.59

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.5.0-prerelease.56","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.5.0-prerelease.58","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.5.0-prerelease.56","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.5.0-prerelease.58","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.5.0-prerelease.56","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.5.0-prerelease.58","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.57",
+  "version": "6.5.0-prerelease.59",
   "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.5.0-prerelease.24",
-    "@patternfly/react-styles": "^6.5.0-prerelease.17",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.16",
+    "@patternfly/react-icons": "^6.5.0-prerelease.25",
+    "@patternfly/react-styles": "^6.5.0-prerelease.18",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.17",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.67",
+    "@patternfly/patternfly": "6.5.0-prerelease.71",
     "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": "29497f3ff194a3f5a23019f52d2ffd8fb0a9d252"
+  "gitHead": "6558bdd10eb90061e973dcc37ec971eb2b1a354d"
 }

package/src/components/Button/Button.tsx

@@ -109,6 +109,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   hamburgerVariant?: 'expand' | 'collapse';
   /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
   isCircle?: boolean;
+  /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */
+  isDocked?: boolean;
+  /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */
+  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -134,6 +138,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isHamburger,
   hamburgerVariant,
   isCircle,
+  isDocked = false,
+  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -265,6 +271,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
+        isDocked && styles.modifiers.docked,
+        isDocked && isTextExpanded && styles.modifiers.textExpanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -555,6 +555,48 @@ describe('Favorite button', () => {
   });
 });
 
+describe('Dock variant', () => {
+  test(`Renders with class ${styles.modifiers.docked} when isDocked = true`, () => {
+    render(<Button isDocked>Dock Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with class ${styles.modifiers.docked} when isDocked is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => {
+    render(
+      <Button isTextExpanded isDocked>
+        Text Expanded Button
+      </Button>
+    );
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+    render(<Button>Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => {
+    render(<Button isTextExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => {
+    render(
+      <Button isDocked isTextExpanded>
+        Dock Text Expanded Button
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass(styles.modifiers.docked);
+    expect(button).toHaveClass(styles.modifiers.textExpanded);
+  });
+});
+
 test(`Renders basic button`, () => {
   const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
   expect(asFragment()).toMatchSnapshot();

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

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Compass/Compass.tsx

@@ -68,7 +68,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
 
   const compassContent = (
     <div
-      className={css(styles.compass, dock !== undefined && styles.modifiers.dock, className)}
+      className={css(styles.compass, dock !== undefined && styles.modifiers.docked, className)}
       {...props}
       style={{ ...props.style, ...backgroundImageStyles }}
     >

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

@@ -171,12 +171,12 @@ test('Matches the snapshot with drawer', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+test(`Renders with ${styles.modifiers.docked} class when dock is passed`, () => {
   render(<Compass dock={<div>Dock content</div>} data-testid="compass" />);
-  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.docked);
 });
 
-test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+test(`Does not render with ${styles.modifiers.docked} class when dock is not passed`, () => {
   render(<Compass data-testid="compass" />);
-  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.dock);
+  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.docked);
 });

package/src/components/Masthead/MastheadLogo.tsx

@@ -11,12 +11,15 @@ export interface MastheadLogoProps extends React.DetailedHTMLProps<
   className?: string;
   /** Component type of the masthead logo. */
   component?: React.ElementType<any> | React.ComponentType<any>;
+  /** @beta Flag indicating the logo is a compact variant. Used in docked layouts. */
+  isCompact?: boolean;
 }
 
 export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
   children,
   className,
   component,
+  isCompact = false,
   ...props
 }: MastheadLogoProps) => {
   let Component = component as any;
@@ -28,7 +31,11 @@ export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
     }
   }
   return (
-    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+    <Component
+      className={css(styles.mastheadLogo, isCompact && styles.modifiers.compact, className)}
+      {...(Component === 'a' && { tabIndex: 0 })}
+      {...props}
+    >
       {children}
     </Component>
   );

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

@@ -127,6 +127,29 @@ describe('MastheadLogo', () => {
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Renders with ${styles.modifiers.compact} class when isCompact is true`, () => {
+    render(
+      <MastheadLogo isCompact data-testid="compact-logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('compact-logo')).toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is false`, () => {
+    render(
+      <MastheadLogo isCompact={false} data-testid="logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is not passed`, () => {
+    render(<MastheadLogo data-testid="logo">test</MastheadLogo>);
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
 });
 
 describe('MastheadContent', () => {

package/src/components/MenuToggle/MenuToggle.tsx

@@ -53,6 +53,10 @@ export interface MenuToggleProps
   isCircle?: boolean;
   /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
+  /** @beta Flag indicating the menu toggle is a docked variant. For use in docked navigation. */
+  isDocked?: boolean;
+  /** @beta Flag indicating the docked toggle should display text. Only applies when isDocked is true. */
+  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -88,6 +92,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isInForm: false,
     isPlaceholder: false,
     isCircle: false,
+    isDocked: false,
+    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -106,6 +112,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isPlaceholder,
       isCircle,
       isSettings,
+      isDocked,
+      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -190,6 +198,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isDisabled && styles.modifiers.disabled,
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
+            isDocked && styles.modifiers.docked,
+            isDocked && isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );

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

@@ -155,3 +155,43 @@ test('Does not render custom icon when icon prop and isSettings are passed', ()
   );
   expect(screen.queryByText('Custom icon')).not.toBeInTheDocument();
 });
+
+test(`Renders with class ${styles.modifiers.docked} when isDocked is passed`, () => {
+  render(<MenuToggle isDocked>Dock Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.docked);
+});
+
+test(`Does not render with class ${styles.modifiers.docked} when isDocked is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
+});
+
+test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed and isDocked is passed`, () => {
+  render(
+    <MenuToggle isTextExpanded isDocked>
+      Text Expanded Toggle
+    </MenuToggle>
+  );
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  render(<MenuToggle>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is passed but isDocked is not passed`, () => {
+  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are passed`, () => {
+  render(
+    <MenuToggle isDocked isTextExpanded>
+      Dock Text Expanded Toggle
+    </MenuToggle>
+  );
+  const button = screen.getByRole('button');
+  expect(button).toHaveClass(styles.modifiers.docked);
+  expect(button).toHaveClass(styles.modifiers.textExpanded);
+});

package/src/components/Nav/Nav.tsx

@@ -39,6 +39,8 @@ export interface NavProps
   'aria-label'?: string;
   /** The nav variant to use. Docked is in beta. */
   variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
+  /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
+  isTextExpanded?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -119,10 +121,11 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
       ouiaId,
       ouiaSafe,
       variant,
+      isTextExpanded = false,
       ...props
     } = this.props;
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
-
+    const isDocked = variant === 'docked';
     return (
       <SSRSafeIds prefix="pf-" ouiaComponentType={`Nav${variant ? `-${variant}` : ''}`}>
         {(_, generatedOuiaId) => (
@@ -154,8 +157,9 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
               className={css(
                 styles.nav,
                 isHorizontal && styles.modifiers.horizontal,
-                variant === 'docked' && styles.modifiers.docked,
+                isDocked && styles.modifiers.docked,
                 variant === 'horizontal-subnav' && styles.modifiers.subnav,
+                isDocked && isTextExpanded && styles.modifiers.textExpanded,
                 this.state.isScrollable && styles.modifiers.scrollable,
                 className
               )}

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

@@ -274,4 +274,49 @@ describe('Nav', () => {
     );
     expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
   });
+
+  test(`Renders with ${styles.modifiers.textExpanded} class when isTextExpanded is true and variant is docked`, () => {
+    renderNav(
+      <Nav isTextExpanded variant="docked" data-testid="text-expanded-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('text-expanded-nav')).toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is not passed`, () => {
+    renderNav(
+      <Nav data-testid="nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is true but variant is not docked`, () => {
+    renderNav(
+      <Nav isTextExpanded data-testid="nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+  });
 });

package/src/components/Page/Page.tsx

@@ -22,8 +22,16 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** @beta Indicates the layout variant */
   variant?: 'default' | 'docked';
-  /** Masthead component (e.g. <Masthead />) */
+  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
+  isDockExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and will handle
+   * setting isTextExpanded on 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. */
   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;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
    * will render without a sidebar.
    */
@@ -232,7 +240,10 @@ class Page extends Component<PageProps, PageState> {
       className,
       children,
       variant,
+      isDockExpanded = false,
+      isDockTextExpanded = false,
       masthead,
+      dockContent,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -339,7 +350,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
-            variant === 'docked' && styles.modifiers.dock,
+            variant === 'docked' && styles.modifiers.docked,
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -349,9 +360,18 @@ class Page extends Component<PageProps, PageState> {
         >
           {skipToContent}
           {variant === 'docked' ? (
-            <div className={css(styles.pageDock)}>
-              <div className={css(styles.pageDockMain)}>{masthead}</div>
-            </div>
+            <>
+              {masthead}
+              <div
+                className={css(
+                  styles.pageDock,
+                  isDockExpanded && styles.modifiers.expanded,
+                  isDockTextExpanded && styles.modifiers.textExpanded
+                )}
+              >
+                <div className={css(styles.pageDockMain)}>{dockContent}</div>
+              </div>
+            </>
           ) : (
             masthead
           )}

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

@@ -389,28 +389,102 @@ describe('Page', () => {
 
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
+});
+
+describe('Page docked variant', () => {
+  test(`Does not render with docked classes when variant is default`, () => {
+    render(<Page {...props} variant="default" data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.docked);
+    expect(page.querySelector(`.${styles.pageDock}`)).not.toBeInTheDocument();
+    expect(page.querySelector(`.${styles.pageDockMain}`)).not.toBeInTheDocument();
+  });
+
+  test(`Does not render with docked classes when variant is not passed`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.docked);
+    expect(page.querySelector(`.${styles.pageDock}`)).not.toBeInTheDocument();
+    expect(page.querySelector(`.${styles.pageDockMain}`)).not.toBeInTheDocument();
+  });
 
-  test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
     render(<Page {...props} variant="docked" data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
-    render(<Page {...props} variant="default" data-testid="page"></Page>);
+  test('Renders dock content when dockContent and variant="docked" is passed', () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+    expect(screen.getByText('Dock content')).toBeInTheDocument();
   });
 
-  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
-    render(<Page data-testid="page"></Page>);
-    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  test('Renders masthead content when masthead and variant="docked" is passed', () => {
+    render(
+      <Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead content</>} data-testid="page"></Page>
+    );
+
+    expect(screen.getByText('Masthead content')).toBeInTheDocument();
+  });
+
+  test(`Renders with ${styles.pageDock} wrapper when 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).toBeInTheDocument();
+  });
+
+  test(`Does not render with ${styles.modifiers.expanded} by default when 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.expanded);
+  });
+
+  test(`Does not render with ${styles.modifiers.textExpanded} by default when 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.textExpanded);
+  });
+
+  test(`Renders with ${styles.modifiers.expanded} when isDockExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.expanded);
+  });
+
+  test(`Renders with ${styles.modifiers.textExpanded} when isDockTextExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockTextExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
   });
 
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
-    render(<Page variant="docked" masthead={<>Masthead</>} data-testid="page"></Page>);
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
-    const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`);
+    const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
 });

package/src/demos/Nav.md

@@ -3,7 +3,7 @@ id: Navigation
 section: components
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef } from 'react';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -12,6 +12,13 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
@@ -70,3 +77,27 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 ```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 
 ```
+
+### Docked nav
+
+To save space in the UI, you can use docked navigation to replace text-labeled navigation items with relevant icons. On mobile (or narrow viewports), docked navigation appears as an overlay, while on desktop (or wider viewports) it displays as a persistent vertical sidebar that can toggle between icon-only and text+icon modes.
+
+This demo includes the following features:
+
+1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the mobile overlay with `isDockExpanded` and the desktop label visibility with `isDockTextExpanded`.
+
+2. Two separate [masthead](/components/masthead) components:
+   - **Horizontal mobile masthead**: Shown on small viewports using `display={{ default: 'inline' }}`, with a hamburger menu toggle button, brand logo, and action buttons that should be immediately visible to users.
+   - **Vertical docked masthead**: Uses `variant="docked"` to create a thinner navigation sidebar with a hamburger menu toggle button, nav items, and action buttons.
+
+3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isTextExpanded={isDockTextExpanded}` is passed to the `<Nav>` component.
+
+4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isTextExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.
+
+5. A `<MastheadLogo>` component that uses `isCompact` to show an icon-only logo when the dock is collapsed, and a full logo with text when expanded.
+
+**Note**: For better keyboard accessibility, ensure that focus shifts between the hamburger menu toggle button in the mobile masthead and the docked overlay menu toggle button as the navigation is opened and closed.
+
+```ts file="./examples/Nav/NavDockedNav.tsx" isFullscreen
+
+```

package/src/demos/Page.md

@@ -52,9 +52,3 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
-
-### Docked nav
-
-```ts file='./examples/Page/PageDockedNav.tsx' isFullscreen
-
-```