@patternfly/react-core 6.5.0-prerelease.61 → 6.5.0-prerelease.63

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.60","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.62","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.60","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.62","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.60","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.62","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.61",
+  "version": "6.5.0-prerelease.63",
   "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.26",
-    "@patternfly/react-styles": "^6.5.0-prerelease.20",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.19",
+    "@patternfly/react-icons": "^6.5.0-prerelease.28",
+    "@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": "69b6225ca40cfbb583516375a59b95c9590a2592"
+  "gitHead": "b1d4b8d38afd6c84f6d381b610b4af13586dacfe"
 }

package/src/components/Button/Button.tsx

@@ -4,8 +4,8 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
-import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
+import RhUiStarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-fill-icon';
+import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import { hamburgerIcon } from './hamburgerIcon';
 
@@ -211,10 +211,10 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       iconContent = (
         <>
           <span className={css('pf-v6-c-button__icon-favorite')}>
-            <OutlinedStarIcon />
+            <RhUiStarIcon />
           </span>
           <span className={css('pf-v6-c-button__icon-favorited')}>
-            <StarIcon />
+            <RhUiStarFillIcon />
           </span>
         </>
       );

package/src/components/Button/examples/Button.md

@@ -9,12 +9,12 @@ ouia: true
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/Button/examples/ButtonPlainHasNoPadding.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@patternfly/react-core';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 export const ButtonPlainHasNoPadding: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" hasNoPadding aria-label="More info" icon={<QuestionCircleIcon />} />
+    <Button variant="plain" hasNoPadding aria-label="More info" icon={<RhUiQuestionMarkCircleFillIcon />} />
     which is placed inline with text
   </p>
 );

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
@@ -32,7 +32,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" icon={<PlusCircleIcon />}>
         Link
       </Button>
-      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+      <Button variant="link" icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
         Link
       </Button>
       <Button variant="link" isInline>

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/examples/Compass.md

@@ -20,7 +20,7 @@ import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 import './compass.css';
 

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/InputGroup/examples/InputGroup.md

@@ -9,7 +9,7 @@ import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useRef } from 'react';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
 export const InputGroupWithPopover: React.FunctionComponent = () => {
@@ -23,7 +23,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef1.current}
           >
-            <Button variant="control" aria-label="popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="control" aria-label="popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>
@@ -44,7 +44,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef2.current}
           >
-            <Button variant="plain" aria-label="Popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="plain" aria-label="Popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>

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>
+    </>
+  );
+};