Page resize observer & Toolbar/PageHeaderTools responsiveness based on page width

packages/react-core/src/components/Masthead/Masthead.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
+
 export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
   /** Content rendered inside of the masthead */
   children?: React.ReactNode;
@@ -33,22 +35,27 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
   children,
   className,
   backgroundColor = 'dark',
-  display,
+  display = {
+    md: 'inline'
+  },
   inset,
   ...props
-}: MastheadProps) => (
-  <header
-    className={css(
-      styles.masthead,
-      formatBreakpointMods(display, styles, 'display-'),
-      formatBreakpointMods(inset, styles),
-      backgroundColor === 'light' && styles.modifiers.light,
-      backgroundColor === 'light200' && styles.modifiers.light_200,
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </header>
-);
+}: MastheadProps) => {
+  const { width, getBreakpoint } = React.useContext(PageContext);
+  return (
+    <header
+      className={css(
+        styles.masthead,
+        formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
+        formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
+        backgroundColor === 'light' && styles.modifiers.light,
+        backgroundColor === 'light200' && styles.modifiers.light_200,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </header>
+  );
+};
 Masthead.displayName = 'Masthead';

packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Masthead verify basic 1`] = `
 <header
-  className="pf-c-masthead"
+  className="pf-c-masthead pf-m-display-inline-on-md"
 >
   test
 </header>
@@ -13,7 +13,7 @@ exports[`Masthead verify custom class 1`] = `
   className="custom-css"
 >
   <header
-    className="pf-c-masthead custom-css"
+    className="pf-c-masthead pf-m-display-inline-on-md custom-css"
   >
     test
   </header>
@@ -23,7 +23,7 @@ exports[`Masthead verify custom class 1`] = `
 exports[`Masthead verify full structure 1`] = `
 <Masthead>
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     <MastheadToggle>
       <div
@@ -94,7 +94,7 @@ exports[`Masthead verify inset2xl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
   >
     test
   </header>
@@ -115,7 +115,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -136,7 +136,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
   >
     test
   </header>
@@ -157,7 +157,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
   >
     test
   </header>
@@ -178,7 +178,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
   >
     test
   </header>
@@ -199,7 +199,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
   >
     test
   </header>
@@ -220,7 +220,7 @@ exports[`Masthead verify insetXl inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    className="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
   >
     test
   </header>
@@ -241,7 +241,7 @@ exports[`Masthead verify insetXs inset breakpoints 1`] = `
   }
 >
   <header
-    className="pf-c-masthead"
+    className="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>

packages/react-core/src/components/Nav/Nav.tsx

@@ -38,7 +38,7 @@ export interface NavProps
   variant?: 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav';
 }
 
-export const NavContext = React.createContext<{
+export interface NavContextProps {
   onSelect?: (
     event: React.FormEvent<HTMLInputElement>,
     groupId: number | string,
@@ -57,7 +57,9 @@ export const NavContext = React.createContext<{
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
-}>({});
+}
+export const navContextDefaults = {};
+export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
 
 export class Nav extends React.Component<
   NavProps,

packages/react-core/src/components/Nav/NavList.tsx

@@ -6,7 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
-import { canUseDOM } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface NavListProps
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
@@ -35,6 +35,7 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   navList = React.createRef<HTMLUListElement>();
+  observer: any = () => {};
 
   handleScrollButtons = () => {
     const container = this.navList.current;
@@ -91,16 +92,12 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   componentDidMount() {
-    if (canUseDOM) {
-      window.addEventListener('resize', this.handleScrollButtons, false);
-    }
+    this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons);
     this.handleScrollButtons();
   }
 
   componentWillUnmount() {
-    if (canUseDOM) {
-      window.removeEventListener('resize', this.handleScrollButtons, false);
-    }
+    this.observer();
   }
 
   render() {

packages/react-core/src/components/Page/Page.tsx

@@ -5,6 +5,8 @@ import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpo
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 import { PageGroup, PageGroupProps } from './PageGroup';
+import { getResizeObserver } from '../../helpers/resizeObserver';
+import { getBreakpoint } from '../../helpers/util';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -15,13 +17,17 @@ export interface PageContextProps {
   isManagedSidebar: boolean;
   onNavToggle: () => void;
   isNavOpen: boolean;
+  width: number;
+  getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
-
-const PageContext = React.createContext<PageContextProps>({
+export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isNavOpen: false,
-  onNavToggle: () => null
-});
+  onNavToggle: () => null,
+  width: null,
+  getBreakpoint
+};
+export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
 
 export const PageContextProvider = PageContext.Provider;
 export const PageContextConsumer = PageContext.Consumer;
@@ -67,6 +73,13 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * Returns object { mobileView: boolean, windowSize: number }
    */
   onPageResize?: (object: any) => void;
+  /**
+   * 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 getBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getBreakpoint function here:
+   * 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';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Tertiary nav component for the page */
@@ -87,6 +100,7 @@ export interface PageState {
   desktopIsNavOpen: boolean;
   mobileIsNavOpen: boolean;
   mobileView: boolean;
+  width: number;
 }
 
 export class Page extends React.Component<PageProps, PageState> {
@@ -98,9 +112,12 @@ export class Page extends React.Component<PageProps, PageState> {
     onPageResize: (): void => null,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
-    onNotificationDrawerExpand: () => null
+    onNotificationDrawerExpand: () => null,
+    getBreakpoint
   };
   mainRef = React.createRef<HTMLDivElement>();
+  pageRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
 
   constructor(props: PageProps) {
     super(props);
@@ -110,16 +127,15 @@ export class Page extends React.Component<PageProps, PageState> {
     this.state = {
       desktopIsNavOpen: managedSidebarOpen,
       mobileIsNavOpen: false,
-      mobileView: false
+      mobileView: false,
+      width: null
     };
   }
 
   componentDidMount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      if (canUseDOM) {
-        window.addEventListener('resize', this.handleResize);
-      }
+      this.observer = getResizeObserver(this.pageRef.current, this.handleResize);
       const currentRef = this.mainRef.current;
       if (currentRef) {
         currentRef.addEventListener('mousedown', this.handleMainClick);
@@ -133,9 +149,7 @@ export class Page extends React.Component<PageProps, PageState> {
   componentWillUnmount() {
     const { isManagedSidebar, onPageResize } = this.props;
     if (isManagedSidebar || onPageResize) {
-      if (canUseDOM) {
-        window.removeEventListener('resize', this.handleResize);
-      }
+      this.observer();
       const currentRef = this.mainRef.current;
       if (currentRef) {
         currentRef.removeEventListener('mousedown', this.handleMainClick);
@@ -144,7 +158,13 @@ export class Page extends React.Component<PageProps, PageState> {
     }
   }
 
-  getWindowWidth = () => (canUseDOM ? window.innerWidth : 1200);
+  getWindowWidth = () => {
+    if (canUseDOM) {
+      return this.pageRef.current ? this.pageRef.current.clientWidth : window.innerWidth;
+    } else {
+      return 1200;
+    }
+  };
 
   isMobile = () =>
     // eslint-disable-next-line radix
@@ -159,6 +179,7 @@ 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 });
   };
 
   handleResize = debounce(this.resize, 250);
@@ -201,6 +222,7 @@ export class Page extends React.Component<PageProps, PageState> {
       defaultManagedSidebarIsOpen,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPageResize,
+      getBreakpoint,
       mainAriaLabel,
       mainTabIndex,
       tertiaryNav,
@@ -210,12 +232,14 @@ export class Page extends React.Component<PageProps, PageState> {
       groupProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen } = this.state;
+    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
 
     const context = {
       isManagedSidebar,
       onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
-      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
+      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
+      width,
+      getBreakpoint
     };
 
     let nav = null;
@@ -270,7 +294,16 @@ export class Page extends React.Component<PageProps, PageState> {
 
     return (
       <PageContextProvider value={context}>
-        <div {...rest} className={css(styles.page, className)}>
+        <div
+          ref={this.pageRef}
+          {...rest}
+          className={css(
+            styles.page,
+            width !== null && 'pf-m-resize-observer',
+            width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
+            className
+          )}
+        >
           {skipToContent}
           {header}
           {sidebar}