@patternfly/react-core 6.5.0-prerelease.8 → 6.5.0

package/src/components/OverflowMenu/OverflowMenu.tsx

@@ -3,18 +3,21 @@ import styles from '@patternfly/react-styles/css/components/OverflowMenu/overflo
 import { css } from '@patternfly/react-styles';
 import { OverflowMenuContext } from './OverflowMenuContext';
 import { debounce } from '../../helpers/util';
-import { globalWidthBreakpoints } from '../../helpers/constants';
+import { globalWidthBreakpoints, globalHeightBreakpoints } from '../../helpers/constants';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { PickOptional } from '../../helpers/typeUtils';
 
 export interface OverflowMenuProps extends React.HTMLProps<HTMLDivElement> {
   /** Any elements that can be rendered in the menu */
   children?: any;
   /** Additional classes added to the OverflowMenu. */
   className?: string;
-  /** Indicates breakpoint at which to switch between horizontal menu and vertical dropdown */
+  /** Indicates breakpoint at which to switch between expanded and collapsed states. The "sm" breakpoint does not apply to vertical overflow menus. */
   breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** A container reference to base the specified breakpoint on instead of the viewport width. */
   breakpointReference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** Indicates the overflow menu orientation is vertical and should respond to height changes instead of width. */
+  isVertical?: boolean;
 }
 
 export interface OverflowMenuState extends React.HTMLProps<HTMLDivElement> {
@@ -24,6 +27,11 @@ export interface OverflowMenuState extends React.HTMLProps<HTMLDivElement> {
 
 class OverflowMenu extends Component<OverflowMenuProps, OverflowMenuState> {
   static displayName = 'OverflowMenu';
+
+  static defaultProps: PickOptional<OverflowMenuProps> = {
+    isVertical: false
+  };
+
   constructor(props: OverflowMenuProps) {
     super(props);
     this.state = {
@@ -69,6 +77,15 @@ class OverflowMenu extends Component<OverflowMenuProps, OverflowMenuState> {
   }
 
   handleResize = () => {
+    const { isVertical } = this.props;
+    if (isVertical) {
+      this.handleResizeHeight();
+    } else {
+      this.handleResizeWidth();
+    }
+  };
+
+  handleResizeWidth = () => {
     const breakpointWidth = globalWidthBreakpoints[this.props.breakpoint];
     if (!breakpointWidth) {
       // eslint-disable-next-line no-console
@@ -83,14 +100,35 @@ class OverflowMenu extends Component<OverflowMenuProps, OverflowMenuState> {
     }
   };
 
+  handleResizeHeight = () => {
+    const breakpointHeight = globalHeightBreakpoints[this.props.breakpoint];
+    if (breakpointHeight === 0) {
+      // eslint-disable-next-line no-console
+      console.warn('The "sm" breakpoint does not apply to vertical overflow menus.');
+      return;
+    }
+
+    if (!breakpointHeight) {
+      // eslint-disable-next-line no-console
+      console.error('OverflowMenu will not be visible without a valid breakpoint.');
+      return;
+    }
+
+    const relativeHeight = this.state.breakpointRef ? this.state.breakpointRef.clientHeight : window.innerHeight;
+    const isBelowBreakpoint = relativeHeight < breakpointHeight;
+    if (this.state.isBelowBreakpoint !== isBelowBreakpoint) {
+      this.setState({ isBelowBreakpoint });
+    }
+  };
+
   handleResizeWithDelay = debounce(this.handleResize, 250);
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { className, breakpoint, children, breakpointReference, ...props } = this.props;
+    const { className, breakpoint, children, breakpointReference, isVertical, ...props } = this.props;
 
     return (
-      <div {...props} className={css(styles.overflowMenu, className)}>
+      <div {...props} className={css(styles.overflowMenu, isVertical && styles.modifiers.vertical, className)}>
         <OverflowMenuContext.Provider value={{ isBelowBreakpoint: this.state.isBelowBreakpoint }}>
           {children}
         </OverflowMenuContext.Provider>

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-menu__list-item"
-    data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+    data-ouia-component-id="OUIA-Generated-DropdownItem-:r0:"
     data-ouia-component-type="PF6/DropdownItem"
     data-ouia-safe="true"
     role="none"

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

@@ -79,4 +79,22 @@ describe('OverflowMenu', () => {
 
     expect(resizeObserver).toHaveBeenCalledWith(containerRef.current, expect.any(Function));
   });
+
+  test(`applies ${styles.modifiers.vertical} when isVertical is passed`, () => {
+    render(<OverflowMenu breakpoint="md" isVertical data-testid="test-id" />);
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.vertical);
+  });
+
+  test('warns when using "sm" breakpoint and isVertical is passed', () => {
+    const warnMock = jest.fn() as any;
+    const originalConsole = global.console;
+    global.console = { ...originalConsole, warn: warnMock } as any;
+
+    try {
+      render(<OverflowMenu breakpoint="sm" isVertical />);
+      expect(warnMock).toHaveBeenCalledWith('The "sm" breakpoint does not apply to vertical overflow menus.');
+    } finally {
+      global.console = originalConsole;
+    }
+  });
 });

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -27,6 +27,14 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ```
 
+### Vertical
+
+Passing `isVertical` to `OverflowMenu` will change its behavior to respond to breakpoints based on window height instead of width.
+
+```ts file="./OverflowMenuSimpleVertical.tsx"
+
+```
+
 ### Group types
 
 ```ts file="./OverflowMenuGroupTypes.tsx"
@@ -45,7 +53,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ```
 
-### Breakpoint on container
+### Breakpoint on container width
 
 By passing in the `breakpointReference` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.
 
@@ -54,3 +62,11 @@ You can change the container width in this example by adjusting the slider. As t
 ```ts file="./OverflowMenuBreakpointOnContainer.tsx"
 
 ```
+
+### Breakpoint on container height
+
+By passing in the `breakpointReference` and `isVertical` properties, the overflow menu's breakpoint will be determined relative to the height of the reference container rather than the window height.
+
+```ts isFullscreen file="./OverflowMenuBreakpointOnContainerHeight.tsx"
+
+```

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainerHeight.tsx

@@ -0,0 +1,109 @@
+import { useRef, useState } from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Slider,
+  SliderOnChangeEvent,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const OverflowMenuBreakpointOnContainerHeight: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [containerHeight, setContainerHeight] = useState(100);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onChange = (_event: SliderOnChangeEvent, value: number) => {
+    setContainerHeight(value);
+  };
+
+  const containerStyles = {
+    height: `${containerHeight}%`,
+    padding: '1rem',
+    borderWidth: '2px',
+    borderStyle: 'dashed'
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={4} key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <>
+      <span id="overflowMenu-hasBreakpointOnContainer-height-slider-label">Current container height</span>:{' '}
+      {containerHeight}%
+      <Slider
+        value={containerHeight}
+        onChange={onChange}
+        max={100}
+        min={20}
+        step={20}
+        showTicks
+        showBoundaries={false}
+        aria-labelledby="overflowMenu-hasBreakpointOnContainer-height-slider-label"
+      />
+      <div style={{ height: '100%' }}>
+        <div ref={containerRef} id="height-breakpoint-reference-container" style={containerStyles}>
+          <OverflowMenu breakpointReference={containerRef} breakpoint="md" isVertical>
+            <OverflowMenuContent>
+              <OverflowMenuItem>Item 1</OverflowMenuItem>
+              <OverflowMenuItem>Item 2</OverflowMenuItem>
+              <OverflowMenuGroup>
+                <OverflowMenuItem>Item 3</OverflowMenuItem>
+                <OverflowMenuItem>Item 4</OverflowMenuItem>
+                <OverflowMenuItem>Item 5</OverflowMenuItem>
+              </OverflowMenuGroup>
+            </OverflowMenuContent>
+            <OverflowMenuControl>
+              <Dropdown
+                onSelect={onSelect}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label="Height breakpoint on container example overflow menu"
+                    variant="plain"
+                    onClick={onToggle}
+                    isExpanded={isOpen}
+                    icon={<EllipsisVIcon />}
+                  />
+                )}
+                isOpen={isOpen}
+                onOpenChange={(isOpen) => setIsOpen(isOpen)}
+              >
+                <DropdownList>{dropdownItems}</DropdownList>
+              </Dropdown>
+            </OverflowMenuControl>
+          </OverflowMenu>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={4} key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="md" isVertical>
+      <OverflowMenuContent>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuGroup>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Simple example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+              icon={<EllipsisVIcon />}
+            />
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};

package/src/components/Page/Page.tsx

@@ -20,8 +20,18 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Masthead component (e.g. <Masthead />) */
+  /** @beta Indicates the layout variant */
+  variant?: 'default' | 'docked';
+  /** @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 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. */
   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.
    */
@@ -229,7 +239,11 @@ class Page extends Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
+      variant,
+      isDockExpanded = false,
+      isDockTextExpanded = false,
       masthead,
+      dockContent,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -336,6 +350,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
+            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)}`,
@@ -344,7 +359,22 @@ class Page extends Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {masthead}
+          {variant === 'docked' ? (
+            <>
+              {masthead}
+              <div
+                className={css(
+                  styles.pageDock,
+                  isDockExpanded && styles.modifiers.expanded,
+                  isDockTextExpanded && styles.modifiers.textExpanded
+                )}
+              >
+                <div className={css(styles.pageDockMain)}>{dockContent}</div>
+              </div>
+            </>
+          ) : (
+            masthead
+          )}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,10 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the group has stuck styling, applied when the group is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
@@ -27,17 +31,25 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   hasOverflowScroll?: boolean;
   /** Adds an accessible name to the page group when the hasOverflowScroll prop is set to true. */
   'aria-label'?: string;
+  /** Adds plain styling to the page group. */
+  isPlain?: boolean;
+  /** @beta Prevents the page group from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...props
 }: PageGroupProps) => {
   const { height, getVerticalBreakpoint } = useContext(PageContext);
@@ -55,11 +67,17 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel })}

package/src/components/Page/PageSection.tsx

@@ -51,6 +51,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the section has stuck styling, applied when the section is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the bottom */
@@ -67,6 +71,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Sets the base component to render. Defaults to section */
   component?: keyof React.JSX.IntrinsicElements;
+  /** Adds plain styling to the page section. */
+  isPlain?: boolean;
+  /** @beta Prevents the page section from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 const variantType = {
@@ -92,12 +100,16 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isWidthLimited = false,
   isCenterAligned = false,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
   component = 'section',
   hasBodyWrapper = true,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = useContext(PageContext);
@@ -118,6 +130,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
@@ -126,6 +142,8 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}

package/src/components/Page/PageSidebar.tsx

@@ -50,7 +50,9 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!sidebarOpen}
           {...props}
         >
-          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>{children}</PageSidebarContext.Provider>
+          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>
+            <div className={css(styles.pageSidebarMain)}>{children}</div>
+          </PageSidebarContext.Provider>
         </div>
       );
     }}

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

@@ -7,8 +7,12 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     class="pf-v6-c-page__sidebar ''"
     id="page-sidebar"
   >
-    <div>
-      ReactNode
+    <div
+      class="pf-v6-c-page__sidebar-main"
+    >
+      <div>
+        ReactNode
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -390,3 +390,101 @@ 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.docked} class when variant is docked`, () => {
+    render(<Page {...props} variant="docked" data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.docked);
+  });
+
+  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.getByText('Dock content')).toBeInTheDocument();
+  });
+
+  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" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
+    expect(pageDockMain).toBeInTheDocument();
+  });
+});