@patternfly/react-core 4.228.0 → 4.230.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.228.0",
+  "version": "4.230.0",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.79.0",
-    "@patternfly/react-styles": "^4.78.0",
-    "@patternfly/react-tokens": "^4.80.0",
+    "@patternfly/react-icons": "^4.81.0",
+    "@patternfly/react-styles": "^4.80.0",
+    "@patternfly/react-tokens": "^4.82.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f02b0e0e72ea0aa326e1d512b1da0397b10e7f9a"
+  "gitHead": "2d27d7f9f3eddbd9a38b6e8574d18deeb0a87c7b"
 }

package/src/components/DescriptionList/DescriptionList.tsx

@@ -30,6 +30,8 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   isFluid?: boolean;
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
+  /** Sets the display size of the descriptions in the description list.*/
+  displaySize?: 'lg' | '2xl';
   /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
@@ -56,6 +58,8 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Sets the description list's term column width.*/
+  termWidth?: string;
   /** Sets the horizontal description list's term column width at various breakpoints. */
   horizontalTermWidthModifier?: {
     default?: string;
@@ -86,8 +90,10 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isCompact,
   isFluid,
   isFillColumns,
+  displaySize,
   columnModifier,
   autoFitMinModifier,
+  termWidth,
   horizontalTermWidthModifier,
   orientation,
   style,
@@ -99,6 +105,12 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
     };
   }
+  if (termWidth) {
+    style = {
+      ...style,
+      ...{ '--pf-c-description-list__term--width': termWidth }
+    };
+  }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
@@ -119,6 +131,8 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
         isCompact && styles.modifiers.compact,
         isFluid && styles.modifiers.fluid,
         isFillColumns && styles.modifiers.fillColumns,
+        displaySize === 'lg' && styles.modifiers.displayLg,
+        displaySize === '2xl' && styles.modifiers.display_2xl,
         className
       )}
       style={style}

package/src/components/DescriptionList/DescriptionListGroup.tsx

@@ -18,4 +18,5 @@ export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupP
     {children}
   </div>
 );
+
 DescriptionListGroup.displayName = 'DescriptionListGroup';

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -11,10 +11,11 @@ propComponents:
     'DescriptionListTermHelpText',
     'DescriptionListTermHelpTextButton',
     'Popover',
+    'Card'
   ]
 ---
 
-import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover } from '@patternfly/react-core';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
@@ -84,6 +85,11 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListColumnFill.tsx'
 ```
 
+### Display size
+
+```ts file='./DescriptionListWithDisplaySize.tsx'
+```
+
 ## Responsive column definitions
 
 ### Default responsive columns
@@ -120,6 +126,30 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListDefaultInlineGrid.tsx'
 ```
 
+## Card variants
+
+A [card component](/components/card) can be used in place of a description list group.
+
+### Description list with card
+
+```ts file='./DescriptionListWithCard.tsx'
+```
+
+### Description list with display size and card
+
+```ts file='./DescriptionListDisplaySizeAndCard.tsx'
+```
+
+### Display size with card, three column on large breakpoint
+
+```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
+```
+
+### Display size with card, horizontal, modified term width
+
+```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
+```
+
 ## Auto fit
 
 ### Auto-fit basic

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCard.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size-with-card"
+          name="toggle-display-size-with-card"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+        <Card component="div">
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" isHorizontal columnModifier={{ lg: '2Col' }} termWidth="10ch">
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" columnModifier={{ lg: '3Col' }}>
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isSelectable, setSelectable] = React.useState<boolean>(false);
+
+  const toggleSelectable = (checked: boolean) => {
+    setSelectable(checked ? true : false);
+    setIsChecked(checked);
+  };
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="isSelectable"
+          isChecked={isChecked}
+          onChange={toggleSelectable}
+          aria-label="set isSelectable"
+          id="toggle-isSelectable"
+          name="toggle-isSelectable"
+        />
+      </div>
+      <DescriptionList columnModifier={{ lg: '2Col' }}>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/DescriptionList/examples/DescriptionListWithDisplaySize.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithDisplaySize: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size"
+          name="toggle-display-size"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </DescriptionListGroup>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -192,11 +192,12 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     }
   }, [flyoutVisible, flyoutTarget]);
 
-  const handleFlyout = (event: React.KeyboardEvent) => {
-    const key = event.key;
+  const handleFlyout = (event: React.KeyboardEvent | React.MouseEvent) => {
+    const key = (event as React.KeyboardEvent).key;
     const target = event.target;
+    const type = event.type;
 
-    if (key === ' ' || key === 'Enter' || key === 'ArrowRight') {
+    if (key === ' ' || key === 'Enter' || key === 'ArrowRight' || type === 'click') {
       event.stopPropagation();
       if (!flyoutVisible) {
         showFlyout(true);
@@ -251,7 +252,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   if (isOnPath) {
     additionalProps['aria-expanded'] = true;
   } else if (hasFlyout) {
-    additionalProps['aria-haspopup'] = true;
+    additionalProps['aria-haspopup'] = 'menu';
     additionalProps['aria-expanded'] = flyoutVisible;
   }
   const getAriaCurrent = () => {
@@ -309,12 +310,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
             {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && { role: 'menuitem' })}
+            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
             {...(!hasCheck && {
               onClick: (event: any) => {
                 onItemSelect(event, onSelect);
                 _drill && _drill();
+                flyoutMenu && handleFlyout(event);
               }
             })}
             {...(hasCheck && { htmlFor: randomId })}

package/src/components/Nav/NavItem.tsx

@@ -150,6 +150,11 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     </span>
   );
 
+  const ariaFlyoutProps = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': flyoutVisible
+  };
+
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
     return (
@@ -164,6 +169,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         )}
         aria-current={isActive ? 'page' : null}
         tabIndex={isNavOpen ? null : '-1'}
+        {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
         {children}

package/src/components/Page/Page.tsx

@@ -4,9 +4,10 @@ import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
-import { PageGroup, PageGroupProps } from './PageGroup';
+import { PageBreadcrumbProps } from './PageBreadcrumb';
+import { PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { getBreakpoint } from '../../helpers/util';
+import { formatBreakpointMods, getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -18,14 +19,19 @@ export interface PageContextProps {
   onNavToggle: () => void;
   isNavOpen: boolean;
   width: number;
+  height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  getVerticalBreakpoint: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
+
 export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isNavOpen: false,
   onNavToggle: () => null,
   width: null,
-  getBreakpoint
+  height: null,
+  getBreakpoint,
+  getVerticalBreakpoint
 };
 export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
 
@@ -80,6 +86,13 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
    */
   getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getVerticalBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Tertiary nav component for the page */
@@ -94,6 +107,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   additionalGroupedContent?: React.ReactNode;
   /** Additional props of the group */
   groupProps?: PageGroupProps;
+  /** Additional props of the breadcrumb */
+  breadcrumbProps?: PageBreadcrumbProps;
 }
 
 export interface PageState {
@@ -101,6 +116,7 @@ export interface PageState {
   mobileIsNavOpen: boolean;
   mobileView: boolean;
   width: number;
+  height: number;
 }
 
 export class Page extends React.Component<PageProps, PageState> {
@@ -113,7 +129,8 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
-    getBreakpoint
+    getBreakpoint,
+    getVerticalBreakpoint
   };
   mainRef = React.createRef<HTMLDivElement>();
   pageRef = React.createRef<HTMLDivElement>();
@@ -128,7 +145,8 @@ export class Page extends React.Component<PageProps, PageState> {
       desktopIsNavOpen: managedSidebarOpen,
       mobileIsNavOpen: false,
       mobileView: false,
-      width: null
+      width: null,
+      height: null
     };
   }
 
@@ -179,7 +197,8 @@ export class Page extends React.Component<PageProps, PageState> {
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
     }
-    this.pageRef.current && this.setState({ width: this.pageRef.current.clientWidth });
+    this.pageRef.current &&
+      this.setState({ width: this.pageRef.current.clientWidth, height: this.pageRef.current.clientHeight });
   };
 
   handleResize = debounce(this.resize, 250);
@@ -223,6 +242,7 @@ export class Page extends React.Component<PageProps, PageState> {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPageResize,
       getBreakpoint,
+      getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
       tertiaryNav,
@@ -230,16 +250,19 @@ export class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
+      breadcrumbProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
+    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width, height } = this.state;
 
     const context = {
       isManagedSidebar,
       onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
       isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
       width,
-      getBreakpoint
+      height,
+      getBreakpoint,
+      getVerticalBreakpoint
     };
 
     let nav = null;
@@ -253,25 +276,38 @@ export class Page extends React.Component<PageProps, PageState> {
       nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
     }
 
-    let crumb = null;
-    if (breadcrumb && isBreadcrumbWidthLimited) {
-      crumb = (
-        <section className={css(styles.pageMainBreadcrumb, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{breadcrumb}</div>
-        </section>
-      );
-    } else if (breadcrumb) {
-      crumb = <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>;
-    }
+    const crumb = breadcrumb ? (
+      <section
+        className={css(
+          styles.pageMainBreadcrumb,
+          isBreadcrumbWidthLimited && styles.modifiers.limitWidth,
+          formatBreakpointMods(
+            breadcrumbProps?.stickyOnBreakpoint,
+            styles,
+            'sticky-',
+            getVerticalBreakpoint(height),
+            true
+          )
+        )}
+      >
+        {isBreadcrumbWidthLimited ? <div className={css(styles.pageMainBody)}>{breadcrumb}</div> : breadcrumb}
+      </section>
+    ) : null;
 
     const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
-      <PageGroup {...groupProps}>
+      <div
+        className={css(
+          styles.pageMainGroup,
+          formatBreakpointMods(groupProps?.stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true)
+        )}
+        {...groupProps}
+      >
         {isTertiaryNavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
-      </PageGroup>
+      </div>
     ) : null;
 
     const main = (
@@ -299,8 +335,9 @@ export class Page extends React.Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
-            width !== null && 'pf-m-resize-observer',
+            width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
+            height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
             className
           )}
         >