@patternfly/react-core 6.5.0-prerelease.62 → 6.5.0-prerelease.64

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.61","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.63","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.61","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.63","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.61","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.63","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.62",
+  "version": "6.5.0-prerelease.64",
   "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.27",
-    "@patternfly/react-styles": "^6.5.0-prerelease.20",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.19",
+    "@patternfly/react-icons": "^6.5.0-prerelease.29",
+    "@patternfly/react-styles": "^6.5.0-prerelease.21",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.20",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.75",
+    "@patternfly/patternfly": "6.5.0-prerelease.78",
     "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": "be84c3eebc2aeff7b86dc28b4a553ad140553c3a"
+  "gitHead": "e47cb62c1acf1d92a2b40dcaffd5fa015278a1e2"
 }

package/src/components/Compass/Compass.tsx

@@ -8,9 +8,17 @@ import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_comp
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Compass. */
   className?: string;
+  /** The horizontal masthead content (e.g. <Masthead />). This masthead will only render when dock content is passed and only at mobile viewports. */
+  masthead?: React.ReactNode;
   /** Content of the docked navigation area of the layout */
   dock?: React.ReactNode;
-  /** Content placed at the top of the layout */
+  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
+  isDockExpanded?: 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.
+   */
+  isDockTextExpanded?: boolean;
+  /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
   isHeaderExpanded?: boolean;
@@ -40,7 +48,10 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
+  masthead,
   dock,
+  isDockExpanded,
+  isDockTextExpanded,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -72,7 +83,18 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {...props}
       style={{ ...props.style, ...backgroundImageStyles }}
     >
-      {dock && <div className={css(`${styles.compass}__dock`)}>{dock}</div>}
+      {dock && masthead}
+      {dock && (
+        <div
+          className={css(
+            `${styles.compass}__dock`,
+            isDockExpanded && styles.modifiers.expanded,
+            isDockTextExpanded && styles.modifiers.textExpanded
+          )}
+        >
+          {dock}
+        </div>
+      )}
       {header && (
         <div
           className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}

package/src/components/Compass/CompassDockMain.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+export interface CompassDockMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the compass dock main container. */
+  className?: string;
+  /** Content of the compass dock main container. */
+  children?: React.ReactNode;
+}
+
+export const CompassDockMain: React.FunctionComponent<CompassDockMainProps> = ({
+  className,
+  children,
+  ...props
+}: CompassDockMainProps) => (
+  <div className={css(styles.compassDockMain, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassDockMain.displayName = 'CompassDockMain';

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

@@ -180,3 +180,33 @@ test(`Does not render with ${styles.modifiers.docked} class when dock is not pas
   render(<Compass data-testid="compass" />);
   expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.docked);
 });
+
+test('Does not render masthead content when dock is not passed', () => {
+  render(<Compass masthead="Masthead content" />);
+  expect(screen.queryByText('Masthead content')).not.toBeInTheDocument();
+});
+
+test('Renders masthead content when dock is passed', () => {
+  render(<Compass masthead={<div>Masthead content</div>} dock={<div>Dock content</div>} />);
+  expect(screen.getByText('Masthead content')).toBeVisible();
+});
+
+test(`Renders dock with ${styles.modifiers.expanded} class when isDockExpanded is true`, () => {
+  render(<Compass dock="Dock content" isDockExpanded />);
+  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders dock without ${styles.modifiers.expanded} class when isDockExpanded is false`, () => {
+  render(<Compass dock="Dock content" isDockExpanded={false} />);
+  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders dock with ${styles.modifiers.textExpanded} class when isDockTextExpanded is true`, () => {
+  render(<Compass dock="Dock content" isDockTextExpanded />);
+  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Renders dock without ${styles.modifiers.textExpanded} class when isDockTextExpanded is false`, () => {
+  render(<Compass dock="Dock content" isDockTextExpanded={false} />);
+  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.textExpanded);
+});

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { CompassDockMain } from '../CompassDockMain';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-compass-dock-main">
+      <CompassDockMain />
+    </div>
+  );
+  expect(screen.getByTestId('test-compass-dock-main').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassDockMain>Test content</CompassDockMain>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassDockMain className="custom-class">Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassDockMain} class`, () => {
+  render(<CompassDockMain>Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassDockMain, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassDockMain id="custom-id">Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassDockMain>
+      <div>Test content</div>
+    </CompassDockMain>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/__snapshots__/CompassDockMain.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__dock-main"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/index.ts

@@ -1,5 +1,6 @@
 export * from './Compass';
 export * from './CompassContent';
+export * from './CompassDockMain';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';

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

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
+import RhUiDocumentIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-icon';
 
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
 import { EmptyStateBody } from '../EmptyStateBody';
@@ -71,7 +71,7 @@ describe('EmptyState', () => {
   });
 
   test('Header with icon', () => {
-    const { asFragment } = render(<EmptyStateHeader titleText="Empty state" icon={AddressBookIcon} />);
+    const { asFragment } = render(<EmptyStateHeader titleText="Empty state" icon={RhUiDocumentIcon} />);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -40,11 +40,11 @@ exports[`EmptyState Header with icon 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 448 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"
+          d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
         />
       </svg>
     </div>

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

@@ -188,7 +188,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
         width="1em"
       >
         <path
-          d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
+          d="M26.463 16.845a9.635 9.635 0 0 0-.002-1.688l3.41-1.974a.5.5 0 0 0 .235-.548 14.47 14.47 0 0 0-4.142-7.167.5.5 0 0 0-.594-.07l-3.404 1.97c-.469-.326-.96-.61-1.466-.85V2.58a.5.5 0 0 0-.356-.48 14.662 14.662 0 0 0-8.288 0 .5.5 0 0 0-.356.48v3.944c-.513.245-1.003.528-1.462.846L6.63 5.397a.5.5 0 0 0-.594.07 14.47 14.47 0 0 0-4.142 7.168.5.5 0 0 0 .236.548l3.407 1.972a9.635 9.635 0 0 0 .002 1.688l-3.41 1.974a.5.5 0 0 0-.235.548 14.47 14.47 0 0 0 4.142 7.167c.16.154.405.18.594.07l3.404-1.97c.469.326.96.61 1.466.85v3.938a.5.5 0 0 0 .356.48c1.333.398 2.728.6 4.144.6s2.81-.202 4.144-.6a.5.5 0 0 0 .356-.48v-3.944a10.449 10.449 0 0 0 1.462-.846l3.408 1.973a.5.5 0 0 0 .594-.07 14.47 14.47 0 0 0 4.142-7.168.5.5 0 0 0-.236-.548l-3.407-1.972ZM16 21c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5Z"
         />
       </svg>
     </span>

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__/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

@@ -24,9 +24,9 @@ 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 the docked nav should display text on desktop. Only applies when variant is docked, and will handle
-   * setting isTextExpanded on individual isDocked components.
-   * */
+  /** @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;

package/src/components/Toolbar/Toolbar.tsx

@@ -38,8 +38,12 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should stick to the top of its container */
+  /** Flag indicating the toolbar should stick to the top of its container. This property applies both the sticky position and styling. */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar should have sticky positioning to the top of its container */
+  isStickyBase?: boolean;
+  /** @beta Flag indicating the toolbar should have stuck styling, when the toolbar is not at the top of the scroll container */
+  isStickyStuck?: boolean;
   /** @beta Flag indicating the toolbar has a vertical orientation */
   isVertical?: boolean;
   /** Insets at various breakpoints. */
@@ -144,6 +148,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       children,
       isFullHeight,
       isStatic,
+      isStickyBase,
+      isStickyStuck,
       inset,
       isSticky,
       isVertical,
@@ -171,6 +177,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isStickyBase && styles.modifiers.stickyBase,
+              isStickyStuck && styles.modifiers.stickyStuck,
               isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,