@patternfly/react-core 6.7.0-prerelease.1 → 6.7.0-prerelease.3

package/src/components/Modal/examples/Modal.md

@@ -12,6 +12,10 @@ import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
+When using the Modal component, it is recommended to control it via the `isOpen` property rather than conditionally rendering the Modal.
+
+Conditional rendering can potentially lead to unforeseen issues, especially with animations enabled.
+
 ## Examples
 
 ### Basic modals
@@ -154,3 +158,11 @@ To customize which element inside the modal receives focus when initially opened
 ```ts file="./ModalCustomFocus.tsx"
 
 ```
+
+### Non animated modal
+
+To explicitly disable animations, set the `hasAnimations` property to `false` on the modal.
+
+```ts file="./ModalNotAnimated.tsx"
+
+```

package/src/components/Modal/examples/ModalNotAnimated.tsx

@@ -0,0 +1,44 @@
+import { Fragment, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, ModalVariant } from '@patternfly/react-core';
+
+export const ModalNotAnimated: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  return (
+    <Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show no animations modal
+      </Button>
+      <Modal
+        hasAnimations={false}
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="modal-not-animated-label"
+        aria-describedby="modal-not-animated-description"
+        elementToFocus="#modal-not-animated-confirm-button"
+      >
+        <ModalHeader title="Not Animated Modal Header" labelId="modal-not-animated-label" />
+        <ModalBody id="modal-not-animated-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button id="modal-not-animated-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Fragment>
+  );
+};

package/src/components/Nav/Nav.tsx

@@ -40,7 +40,7 @@ export interface NavProps
   /** The nav variant to use. Docked is in beta. */
   variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
   /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
-  isTextExpanded?: boolean;
+  isExpanded?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -121,7 +121,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
       ouiaId,
       ouiaSafe,
       variant,
-      isTextExpanded = false,
+      isExpanded = false,
       ...props
     } = this.props;
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
@@ -159,7 +159,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
                 isHorizontal && styles.modifiers.horizontal,
                 isDocked && styles.modifiers.docked,
                 variant === 'horizontal-subnav' && styles.modifiers.subnav,
-                isDocked && isTextExpanded && styles.modifiers.textExpanded,
+                isDocked && isExpanded && styles.modifiers.expanded,
                 this.state.isScrollable && styles.modifiers.scrollable,
                 className
               )}

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

@@ -275,9 +275,9 @@ describe('Nav', () => {
     expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Renders with ${styles.modifiers.textExpanded} class when isTextExpanded is true and variant is docked`, () => {
+  test(`Renders with ${styles.modifiers.expanded} class when isExpanded is true and variant is docked`, () => {
     renderNav(
-      <Nav isTextExpanded variant="docked" data-testid="text-expanded-nav">
+      <Nav isExpanded variant="docked" data-testid="expanded-nav">
         <NavList>
           {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
@@ -287,10 +287,10 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('text-expanded-nav')).toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('expanded-nav')).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is not passed`, () => {
+  test(`Does not render with ${styles.modifiers.expanded} class when isExpanded is not passed`, () => {
     renderNav(
       <Nav data-testid="nav">
         <NavList>
@@ -302,12 +302,12 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with ${styles.modifiers.textExpanded} class when isTextExpanded is true but variant is not docked`, () => {
+  test(`Does not render with ${styles.modifiers.expanded} class when isExpanded is true but variant is not docked`, () => {
     renderNav(
-      <Nav isTextExpanded data-testid="nav">
+      <Nav isExpanded data-testid="nav">
         <NavList>
           {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
@@ -317,6 +317,6 @@ describe('Nav', () => {
         </NavList>
       </Nav>
     );
-    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByTestId('nav')).not.toHaveClass(styles.modifiers.expanded);
   });
 });

package/src/components/Nav/examples/Nav.md

@@ -84,7 +84,7 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ### Docked
 
-The docked variant of `Navigation` displays only icons passed to child `NavItems` or `NavExpandable`. Text becomes visible when `isDockTextExpanded` or `isDockExpandableExpanded` are applied to an outer page or compass dock.
+The docked variant of `Navigation` displays only icons passed to child `NavItems` or `NavExpandable`. Text becomes visible when `isDockExpanded` is applied to an outer page or compass dock.
 
 `NavExpandable` items should include the `hasExpandableIcon` prop to indicate their expandable nature while in the collapsed state of the docked nav as the caret will not be rendered.
 

package/src/components/Page/Page.tsx

@@ -22,14 +22,10 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** @beta Indicates the layout variant */
   variant?: 'default' | 'docked';
-  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
+  /** @beta Flag indicating the docked nav is expanded. Only applies when variant is docked. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
-  isDockExpandableExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and
-   * will handle toggling the visibility of the text in individual isDocked components.
-   */
-  isDockTextExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should expand as an overlay instead of the default inline. */
+  isDockOverlay?: boolean;
   /** The horizontal masthead content (e.g. <Masthead /> or <PageHeader />). PageHeader is an alternative to Masthead
    * and should only be used to wrap custom header content. When using the docked variant, this content will only render at
    * mobile viewports.
@@ -140,7 +136,6 @@ class Page extends Component<PageProps, PageState> {
     defaultManagedSidebarIsOpen: true,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
-    isDockExpandableExpanded: false,
     onNotificationDrawerExpand: () => null,
     mainComponent: 'main',
     getBreakpoint,
@@ -255,8 +250,7 @@ class Page extends Component<PageProps, PageState> {
       children,
       variant,
       isDockExpanded = false,
-      isDockTextExpanded = false,
-      isDockExpandableExpanded = false,
+      isDockOverlay = false,
       masthead,
       dockContent,
       sidebar,
@@ -386,8 +380,7 @@ class Page extends Component<PageProps, PageState> {
                 className={css(
                   styles.pageDock,
                   isDockExpanded && styles.modifiers.expanded,
-                  isDockExpandableExpanded && styles.modifiers.expandableExpanded,
-                  isDockTextExpanded && styles.modifiers.textExpanded
+                  isDockOverlay && styles.modifiers.overlay
                 )}
               >
                 <div className={css(styles.pageDockMain)}>{dockContent}</div>

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

@@ -446,13 +446,6 @@ describe('Page docked variant', () => {
     expect(pageDock).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with ${styles.modifiers.textExpanded} by default when variant is docked`, () => {
-    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
-
-    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
-    expect(pageDock).not.toHaveClass(styles.modifiers.textExpanded);
-  });
-
   test(`Renders with ${styles.modifiers.expanded} when isDockExpanded is true and variant is docked`, () => {
     render(
       <Page
@@ -468,11 +461,12 @@ describe('Page docked variant', () => {
     expect(pageDock).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Renders with ${styles.modifiers.textExpanded} when isDockTextExpanded is true and variant is docked`, () => {
+  test(`Renders with ${styles.modifiers.overlay} when isDockOverlay is true and variant is docked`, () => {
     render(
       <Page
         variant="docked"
-        isDockTextExpanded
+        isDockExpanded
+        isDockOverlay
         dockContent={<>Dock content</>}
         masthead={<>Masthead</>}
         data-testid="page"
@@ -480,27 +474,7 @@ describe('Page docked variant', () => {
     );
 
     const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
-    expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
-  });
-
-  test(`Does not render with ${styles.modifiers.expandableExpanded} when by default and variant is docked`, () => {
-    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
-    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
-    expect(pageDock).not.toHaveClass(styles.modifiers.expandableExpanded);
-  });
-
-  test(`Renders with ${styles.modifiers.expandableExpanded} when isDockExpandableExpanded is true and variant is docked`, () => {
-    render(
-      <Page
-        variant="docked"
-        isDockExpandableExpanded
-        dockContent={<>Dock content</>}
-        masthead={<>Masthead</>}
-        data-testid="page"
-      ></Page>
-    );
-    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
-    expect(pageDock).toHaveClass(styles.modifiers.expandableExpanded);
+    expect(pageDock).toHaveClass(styles.modifiers.overlay);
   });
 
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -51,8 +51,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState<number>(0);
   const [isNavGroupExpanded, setIsNavGroupExpanded] = useState(false);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
-  const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
-  const [isDockExpandableExpanded, setIsDockExpandableExpanded] = useState(false);
+  const [isDockOverlay, setIsDockOverlay] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -69,7 +68,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   }, []);
 
   const handleDockClickOutside = (event: MouseEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
@@ -80,21 +79,22 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      (isDockExpandableExpanded || isDockExpanded)
+      isDockExpanded &&
+      (isDockOverlay || isMobile)
     ) {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
   const handleDockKeydown = (_event: KeyboardEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
     if (_event.key === 'Escape') {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
@@ -106,18 +106,17 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       window.removeEventListener('click', handleDockClickOutside);
       window.removeEventListener('keydown', handleDockKeydown);
     };
-  }, [isDockExpandableExpanded, isDockTextExpanded, isDockExpanded, isMobile]);
+  }, [isDockOverlay, isDockExpanded, isMobile]);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
 
-    if (!isMobile && isDockTextExpanded) {
+    if (isDockExpanded && !isDockOverlay && !isMobile) {
       return;
     }
 
-    setIsDockExpandableExpanded(false);
-    setIsDockTextExpanded(false);
     setIsDockExpanded(false);
+    setIsDockOverlay(false);
   };
 
   const navItem1Ref = useRef<HTMLAnchorElement>(null);
@@ -141,45 +140,29 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isMobile) {
-      setIsDockExpanded(!isDockExpanded);
+    const nextState = !isDockExpanded;
+    if (!nextState) {
+      setIsDockOverlay(false);
+    }
+    setIsDockExpanded(nextState);
 
+    if (isMobile) {
       if (isDockExpanded) {
         setTimeout(() => {
           mobileToggleRef.current?.focus();
         }, 200);
       }
-    } else {
-      const nextDockTextExpanded = !isDockTextExpanded;
-      setIsDockTextExpanded(nextDockTextExpanded);
-
-      if (!nextDockTextExpanded) {
-        setIsDockExpandableExpanded(false);
-      }
-
-      if (isDockExpandableExpanded) {
-        setIsDockExpandableExpanded(false);
-        setIsDockTextExpanded(false);
-      }
     }
   };
 
   const onToggleNavGroup = (_event: React.MouseEvent<HTMLButtonElement>, isExpanded: boolean) => {
-    if (!isDockExpandableExpanded && !isDockTextExpanded && !isDockExpanded) {
+    if (!isDockExpanded) {
       setIsNavGroupExpanded(true);
+      setIsDockOverlay(true);
+      setIsDockExpanded(true);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
-
-    if (!isMobile) {
-      if (!isDockExpandableExpanded && !isDockTextExpanded) {
-        setIsDockExpandableExpanded(true);
-      }
-
-      if (!isDockTextExpanded) {
-        setIsDockTextExpanded(false);
-      }
-    }
   };
 
   const mobileTextLogo = (
@@ -315,7 +298,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
               isHamburger
               onClick={onToggleDock}
               aria-label="Global navigation"
-              isExpanded={isDockTextExpanded}
+              isExpanded={isDockExpanded}
             />
           </MastheadToggle>
           <MastheadBrand>
@@ -409,7 +392,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     </NavItem>
                   </NavList>
                 </Nav>
-                {!isDockTextExpanded && !isDockExpanded && !isDockExpandableExpanded && (
+                {!isDockExpanded && (
                   <>
                     <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="System panel"></Tooltip>
                     <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Policy"></Tooltip>
@@ -426,7 +409,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                 gap={{ default: 'gapNone', md: 'gapMd' }}
               >
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={appsRef}
                       variant="plain"
@@ -451,7 +434,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                   )}
                 </ToolbarItem>
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" isDocked>
                       Settings
                     </Button>
@@ -464,7 +447,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                   )}
                 </ToolbarItem>
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={helpRef}
                       variant="plain"
@@ -514,8 +497,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       masthead={mobileMasthead}
       dock={dockContent}
       isDockExpanded={isDockExpanded}
-      isDockExpandableExpanded={isDockExpandableExpanded}
-      isDockTextExpanded={isDockTextExpanded}
+      isDockOverlay={isDockOverlay}
       main={mainContent}
       backgroundSrcDark="/assets/images/pf-background.svg"
       backgroundSrcLight="/assets/images/pf-background.svg"

package/src/demos/Nav.md

@@ -87,15 +87,15 @@ To save space in the UI, you can use docked navigation to replace text-labeled n
 
 This demo includes the following features:
 
-1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the mobile overlay with `isDockExpanded` and the desktop label visibility with `isDockTextExpanded`.
+1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the expanded state of the dock with `isDockExpanded` and the set whether the dock is an overlay with `isDockOverlay`. The expanded docked nav is automatically an overlay in mobile.
 
 2. Two separate [masthead](/components/masthead) components:
    - **Horizontal mobile masthead**: Shown on small viewports using `display={{ default: 'inline' }}`, with a hamburger menu toggle button, brand logo, and action buttons that should be immediately visible to users.
    - **Vertical docked masthead**: Uses `variant="docked"` to create a thinner navigation sidebar with a hamburger menu toggle button, nav items, and action buttons.
 
-3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isTextExpanded={isDockTextExpanded}` is passed to the `<Nav>` component.
+3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isExpanded={isDockExpanded}` is passed to the `<Nav>` component.
 
-4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isTextExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.
+4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.
 
 5. A `<MastheadLogo>` component that uses `isCompact` to show an icon-only logo when the dock is collapsed, and a full logo with text when expanded.
 

package/src/demos/examples/Nav/NavDockedNav.tsx

@@ -54,8 +54,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(1);
   const [isNavGroupExpanded, setIsNavGroupExpanded] = useState(false);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
-  const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
-  const [isDockExpandableExpanded, setIsDockExpandableExpanded] = useState(false);
+  const [isDockOverlay, setIsDockOverlay] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -72,7 +71,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
   }, []);
 
   const handleDockClickOutside = (event: MouseEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
@@ -83,21 +82,22 @@ export const NavDockedNav: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      (isDockExpandableExpanded || isDockExpanded)
+      isDockExpanded &&
+      (isDockOverlay || isMobile)
     ) {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
   const handleDockKeydown = (_event: KeyboardEvent) => {
-    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+    if (!isDockExpanded) {
       return;
     }
 
     if (_event.key === 'Escape') {
-      setIsDockExpandableExpanded(false);
       setIsDockExpanded(false);
+      setIsDockOverlay(false);
     }
   };
 
@@ -109,18 +109,17 @@ export const NavDockedNav: React.FunctionComponent = () => {
       window.removeEventListener('click', handleDockClickOutside);
       window.removeEventListener('keydown', handleDockKeydown);
     };
-  }, [isDockExpandableExpanded, isDockTextExpanded, isDockExpanded, isMobile]);
+  }, [isDockOverlay, isDockExpanded, isMobile]);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
 
-    if (!isMobile && isDockTextExpanded) {
+    if (isDockExpanded && !isDockOverlay && !isMobile) {
       return;
     }
 
-    setIsDockExpandableExpanded(false);
-    setIsDockTextExpanded(false);
     setIsDockExpanded(false);
+    setIsDockOverlay(false);
   };
 
   const mobileTextLogo = (
@@ -251,45 +250,29 @@ export const NavDockedNav: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isMobile) {
-      setIsDockExpanded(!isDockExpanded);
+    const nextState = !isDockExpanded;
+    if (!nextState) {
+      setIsDockOverlay(false);
+    }
+    setIsDockExpanded(nextState);
 
+    if (isMobile) {
       if (isDockExpanded) {
         setTimeout(() => {
           mobileToggleRef.current?.focus();
         }, 200);
       }
-    } else {
-      const nextDockTextExpanded = !isDockTextExpanded;
-      setIsDockTextExpanded(nextDockTextExpanded);
-
-      if (!nextDockTextExpanded) {
-        setIsDockExpandableExpanded(false);
-      }
-
-      if (isDockExpandableExpanded) {
-        setIsDockExpandableExpanded(false);
-        setIsDockTextExpanded(false);
-      }
     }
   };
 
   const onToggleNavGroup = (_event: React.MouseEvent<HTMLButtonElement>, isExpanded: boolean) => {
-    if (!isDockExpandableExpanded && !isDockTextExpanded && !isDockExpanded) {
+    if (!isDockExpanded) {
       setIsNavGroupExpanded(true);
+      setIsDockOverlay(true);
+      setIsDockExpanded(true);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
-
-    if (!isMobile) {
-      if (!isDockExpandableExpanded && !isDockTextExpanded) {
-        setIsDockExpandableExpanded(true);
-      }
-
-      if (!isDockTextExpanded) {
-        setIsDockTextExpanded(false);
-      }
-    }
   };
 
   // Mobile masthead - shown on mobile viewports only, hidden on desktop
@@ -339,7 +322,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
             isHamburger
             onClick={onToggleDock}
             aria-label="Global navigation"
-            isExpanded={isDockTextExpanded}
+            isExpanded={isDockExpanded}
           />
         </MastheadToggle>
         <MastheadBrand>
@@ -429,7 +412,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                   </NavItem>
                 </NavList>
               </Nav>
-              {!isDockTextExpanded && !isDockExpanded && !isDockExpandableExpanded && (
+              {!isDockExpanded && (
                 <>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="System panel"></Tooltip>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Policy"></Tooltip>
@@ -446,7 +429,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               <ToolbarItem>
-                {isDockTextExpanded || isDockExpanded ? (
+                {isDockExpanded ? (
                   <MenuToggle
                     ref={appsRef}
                     variant="plain"
@@ -471,7 +454,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                 )}
               </ToolbarItem>
               <ToolbarItem>
-                {isDockTextExpanded || isDockExpanded ? (
+                {isDockExpanded ? (
                   <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" isDocked>
                     Settings
                   </Button>
@@ -484,7 +467,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                 )}
               </ToolbarItem>
               <ToolbarItem>
-                {isDockTextExpanded || isDockExpanded ? (
+                {isDockExpanded ? (
                   <MenuToggle
                     ref={helpRef}
                     variant="plain"
@@ -537,8 +520,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
       <Page
         variant="docked"
         isDockExpanded={isDockExpanded}
-        isDockExpandableExpanded={isDockExpandableExpanded}
-        isDockTextExpanded={isDockTextExpanded}
+        isDockOverlay={isDockOverlay}
         masthead={mobileMasthead}
         dockContent={dockedMasthead}
         skipToContent={pageSkipToContent}