From 6c7c0696be6680778312398629af8008b1584efa Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 28 Sep 2026 11:00:45 -0400
Subject: [PATCH 01/10] feat(Page,Compass,Nav,MenuToggle,Button): simplify
 docked nav expand props

---
 packages/react-core/package.json              |  2 +-
 .../src/components/Button/Button.tsx          |  3 +-
 .../src/components/Compass/Compass.tsx        | 16 ++---
 .../src/components/MenuToggle/MenuToggle.tsx  |  5 --
 .../react-core/src/components/Nav/Nav.tsx     |  6 +-
 .../react-core/src/components/Page/Page.tsx   | 17 ++----
 .../Compass/examples/CompassDockDemo.tsx      | 59 +++++++------------
 .../src/demos/examples/Nav/NavDockedNav.tsx   | 59 +++++++------------
 packages/react-docs/package.json              |  2 +-
 packages/react-icons/package.json             |  2 +-
 packages/react-styles/package.json            |  2 +-
 packages/react-tokens/package.json            |  4 +-
 .../react-tokens/scripts/generateTokens.mjs   |  2 +-
 yarn.lock                                     | 28 ++++-----
 14 files changed, 79 insertions(+), 128 deletions(-)

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 7593821872c..5dad1562844 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 46d903f15a0..6912c165230 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -139,7 +139,6 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   hamburgerVariant,
   isCircle,
   isDocked = false,
-  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -272,7 +271,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
         isDocked && styles.modifiers.docked,
-        isDocked && isTextExpanded && styles.modifiers.textExpanded,
+        isDocked && isExpanded && styles.modifiers.expanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}
diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
index d62bef6448c..7b75bcadcd1 100644
--- a/packages/react-core/src/components/Compass/Compass.tsx
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -10,14 +10,10 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   masthead?: React.ReactNode;
   /** Content of the docked navigation area of the layout */
   dock?: React.ReactNode;
-  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
+  /** @beta Flag indicating the docked nav is expanded. Only applies when dock content is passed. */
   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 dock content is passed, and
-   * will handle toggling the visibility of the text in individual isDocked components.
-   */
-  isDockTextExpanded?: boolean;
+  /** @beta Indicates if the docked nav should expand as an overlay instead of the default inline. */
+  isDockOverlay?: boolean;
   /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -47,8 +43,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   masthead,
   dock,
   isDockExpanded,
-  isDockExpandableExpanded,
-  isDockTextExpanded,
+  isDockOverlay,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -72,8 +67,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
           className={css(
             `${styles.compass}__dock`,
             isDockExpanded && styles.modifiers.expanded,
-            isDockExpandableExpanded && styles.modifiers.expandableExpanded,
-            isDockTextExpanded && styles.modifiers.textExpanded
+            isDockOverlay && styles.modifiers.overlay
           )}
         >
           {dock}
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index aa5f8d6ba12..73646fd7df8 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -55,8 +55,6 @@ export interface MenuToggleProps
   isSettings?: boolean;
   /** @beta Flag indicating the menu toggle is a docked variant. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked toggle should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -95,7 +93,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isPlaceholder: false,
     isCircle: false,
     isDocked: false,
-    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true,
     'aria-haspopup': 'menu'
@@ -116,7 +113,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isCircle,
       isSettings,
       isDocked,
-      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -204,7 +200,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
             isDocked && styles.modifiers.docked,
-            isDocked && isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
index baf646a69ad..7c126720e71 100644
--- a/packages/react-core/src/components/Nav/Nav.tsx
+++ b/packages/react-core/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
               )}
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 117bd1305ae..b546d510e25 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/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 Indicates if 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>
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
index 7339582b058..2a8f0fe1c63 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
+++ b/packages/react-core/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,21 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      (isDockExpandableExpanded || isDockExpanded)
+      isDockExpanded
     ) {
-      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 +105,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) {
       return;
     }
 
-    setIsDockExpandableExpanded(false);
-    setIsDockTextExpanded(false);
     setIsDockExpanded(false);
+    setIsDockOverlay(false);
   };
 
   const navItem1Ref = useRef<HTMLAnchorElement>(null);
@@ -141,43 +139,31 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isMobile) {
-      setIsDockExpanded(!isDockExpanded);
+    setIsDockExpanded(!isDockExpanded);
 
+    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);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
 
     if (!isMobile) {
-      if (!isDockExpandableExpanded && !isDockTextExpanded) {
-        setIsDockExpandableExpanded(true);
+      if (!isDockOverlay) {
+        setIsDockOverlay(true);
       }
 
-      if (!isDockTextExpanded) {
-        setIsDockTextExpanded(false);
+      if (!isDockExpanded) {
+        setIsDockExpanded(true);
       }
     }
   };
@@ -315,7 +301,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
               isHamburger
               onClick={onToggleDock}
               aria-label="Global navigation"
-              isExpanded={isDockTextExpanded}
+              isExpanded={isDockExpanded}
             />
           </MastheadToggle>
           <MastheadBrand>
@@ -409,7 +395,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 +412,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                 gap={{ default: 'gapNone', md: 'gapMd' }}
               >
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={appsRef}
                       variant="plain"
@@ -451,7 +437,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 +450,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                   )}
                 </ToolbarItem>
                 <ToolbarItem>
-                  {isDockTextExpanded || isDockExpanded ? (
+                  {isDockExpanded ? (
                     <MenuToggle
                       ref={helpRef}
                       variant="plain"
@@ -514,8 +500,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"
diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
index 40f73573023..685dd359222 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
+++ b/packages/react-core/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,21 @@ export const NavDockedNav: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      (isDockExpandableExpanded || isDockExpanded)
+      isDockExpanded
     ) {
-      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 +108,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) {
       return;
     }
 
-    setIsDockExpandableExpanded(false);
-    setIsDockTextExpanded(false);
     setIsDockExpanded(false);
+    setIsDockOverlay(false);
   };
 
   const mobileTextLogo = (
@@ -251,43 +249,31 @@ export const NavDockedNav: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isMobile) {
-      setIsDockExpanded(!isDockExpanded);
+    setIsDockExpanded(!isDockExpanded);
 
+    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);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
 
     if (!isMobile) {
-      if (!isDockExpandableExpanded && !isDockTextExpanded) {
-        setIsDockExpandableExpanded(true);
+      if (!isDockOverlay) {
+        setIsDockOverlay(true);
       }
 
-      if (!isDockTextExpanded) {
-        setIsDockTextExpanded(false);
+      if (!isDockExpanded) {
+        setIsDockExpanded(true);
       }
     }
   };
@@ -339,7 +325,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
             isHamburger
             onClick={onToggleDock}
             aria-label="Global navigation"
-            isExpanded={isDockTextExpanded}
+            isExpanded={isDockExpanded}
           />
         </MastheadToggle>
         <MastheadBrand>
@@ -429,7 +415,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 +432,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
               gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               <ToolbarItem>
-                {isDockTextExpanded || isDockExpanded ? (
+                {isDockExpanded ? (
                   <MenuToggle
                     ref={appsRef}
                     variant="plain"
@@ -471,7 +457,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 +470,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                 )}
               </ToolbarItem>
               <ToolbarItem>
-                {isDockTextExpanded || isDockExpanded ? (
+                {isDockExpanded ? (
                   <MenuToggle
                     ref={helpRef}
                     variant="plain"
@@ -537,8 +523,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
       <Page
         variant="docked"
         isDockExpanded={isDockExpanded}
-        isDockExpandableExpanded={isDockExpandableExpanded}
-        isDockTextExpanded={isDockTextExpanded}
+        isDockOverlay={isDockOverlay}
         masthead={mobileMasthead}
         dockContent={dockedMasthead}
         skipToContent={pageSkipToContent}
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 6c89ec08976..9ecedde2240 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 36759190291..6344c2b5e49 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -38,7 +38,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "@rhds/icons": "^2.3.1",
     "fs-extra": "^11.3.3"
   },
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index d80d1d73cc4..4df21e04bfe 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index da5bf647cf7..0101a5e72e0 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,8 +29,8 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@adobe/css-tools": "^4.5.0",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "fs-extra": "^11.3.3"
   }
 }
diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs
index a5943f5f5c3..ed3ff54d7d2 100644
--- a/packages/react-tokens/scripts/generateTokens.mjs
+++ b/packages/react-tokens/scripts/generateTokens.mjs
@@ -97,7 +97,7 @@ export function generateTokens() {
   const cssFiles = glob
     .sync(['{**/{components,layouts}/**/*.css', '**/patternfly-charts.css', '**/patternfly-variables.css}'].join(','), {
       cwd: pfStylesDir,
-      ignore: ['assets/**', '/**/_index.css'],
+      ignore: ['assets/**', '/**/_index.css', '**/docs/**'],
       absolute: true
     })
     // Sort to put variables and charts at END of list so getLocalVarsMap returns correct values
diff --git a/yarn.lock b/yarn.lock
index 05677c97394..189bdeb6339 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,10 +12,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/css-tools@npm:^4.4.4":
-  version: 4.4.4
-  resolution: "@adobe/css-tools@npm:4.4.4"
-  checksum: 10c0/8f3e6cfaa5e6286e6f05de01d91d060425be2ebaef490881f5fe6da8bbdb336835c5d373ea337b0c3b0a1af4be048ba18780f0f6021d30809b4545922a7e13d9
+"@adobe/css-tools@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "@adobe/css-tools@npm:4.5.0"
+  checksum: 10c0/fc969e1117098eb4cccdb73beb2508daa0e52760af1183d6288bafea59204943490ab3ede28593032ffb8929c0cee270b2a53254fe61139ab00604ea8fc33cea
   languageName: node
   linkType: hard
 
@@ -5070,10 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.6.0-prerelease.49":
-  version: 6.6.0-prerelease.49
-  resolution: "@patternfly/patternfly@npm:6.6.0-prerelease.49"
-  checksum: 10c0/e182c9c6595b3b769e8f132f23e0db5b3034967c23353beb534511be5e668e8e7a74bcaaaf47196bccf68e847d2fdeebf2f485022ca5d242ff8c62f2977eb3b1
+"@patternfly/patternfly@npm:6.6.0-prerelease.50":
+  version: 6.6.0-prerelease.50
+  resolution: "@patternfly/patternfly@npm:6.6.0-prerelease.50"
+  checksum: 10c0/f4d711a87c0094dd9d0115f21f7c2e4ff027ea68b439a342e0331b6b90a38cd0cb24d1b9f002409fe30e271be79588fdb760927c5e008e299603eeb56f299a16
   languageName: node
   linkType: hard
 
@@ -5171,7 +5171,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.6.0-prerelease.49"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.50"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -5192,7 +5192,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.40.0"
-    "@patternfly/patternfly": "npm:6.6.0-prerelease.49"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.50"
     "@patternfly/patternfly-a11y": "npm:5.2.1"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -5232,7 +5232,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.6.0-prerelease.49"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.50"
     "@rhds/icons": "npm:^2.3.1"
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
@@ -5319,7 +5319,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.6.0-prerelease.49"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.50"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
@@ -5360,8 +5360,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
-    "@adobe/css-tools": "npm:^4.4.4"
-    "@patternfly/patternfly": "npm:6.6.0-prerelease.49"
+    "@adobe/css-tools": "npm:^4.5.0"
+    "@patternfly/patternfly": "npm:6.6.0-prerelease.50"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft

From 040b6da357ca7f7b3071aca65a060416c20e7e70 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 28 Sep 2026 11:12:51 -0400
Subject: [PATCH 02/10] wording

---
 packages/react-core/src/components/Compass/Compass.tsx | 2 +-
 packages/react-core/src/components/Page/Page.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
index 7b75bcadcd1..1b193849e99 100644
--- a/packages/react-core/src/components/Compass/Compass.tsx
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -12,7 +12,7 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   dock?: React.ReactNode;
   /** @beta Flag indicating the docked nav is expanded. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
-  /** @beta Indicates if the docked nav should expand as an overlay instead of the default inline. */
+  /** @beta Flag indicating the docked nav should expand as an overlay instead of the default inline. */
   isDockOverlay?: boolean;
   /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index b546d510e25..29eb1644d8d 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -24,7 +24,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'docked';
   /** @beta Flag indicating the docked nav is expanded. Only applies when variant is docked. */
   isDockExpanded?: boolean;
-  /** @beta Indicates if the docked nav should expand as an overlay instead of the default inline. */
+  /** @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

From d4173eb783b6714444fbe73460f48f24b7a6ec4a Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 28 Sep 2026 15:23:57 -0400
Subject: [PATCH 03/10] update tests for props

---
 .../Button/__tests__/Button.test.tsx          | 22 ++++++------
 .../Compass/__tests__/Compass.test.tsx        | 26 ++------------
 .../MenuToggle/__tests__/MenuToggle.test.tsx  | 27 +++++----------
 .../src/components/Nav/__tests__/Nav.test.tsx | 16 ++++-----
 .../components/Page/__tests__/Page.test.tsx   | 34 +++----------------
 5 files changed, 34 insertions(+), 91 deletions(-)

diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
index 94c3f8bf5f8..c714b8fedd2 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -566,34 +566,34 @@ describe('Dock variant', () => {
     expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => {
+  test(`Renders with class ${styles.modifiers.expanded} when isExpanded = true and isDocked = true`, () => {
     render(
-      <Button isTextExpanded isDocked>
+      <Button isExpanded isDocked>
         Text Expanded Button
       </Button>
     );
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
     render(<Button>Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => {
-    render(<Button isTextExpanded>Text Expanded Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded = true but isDocked is not passed`, () => {
+    render(<Button isExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => {
+  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.expanded} when both props are true`, () => {
     render(
-      <Button isDocked isTextExpanded>
+      <Button isDocked isExpanded>
         Dock Text Expanded Button
       </Button>
     );
     const button = screen.getByRole('button');
     expect(button).toHaveClass(styles.modifiers.docked);
-    expect(button).toHaveClass(styles.modifiers.textExpanded);
+    expect(button).toHaveClass(styles.modifiers.expanded);
   });
 });
 
diff --git a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
index 5714a680108..fc0f8ce8987 100644
--- a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
+++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
@@ -94,19 +94,9 @@ test('Renders footer without expanded class and with inert when isFooterExpanded
   expect(footerElement).toHaveAttribute('inert');
 });
 
-test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded />);
-  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded={false} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => {
-  render(<Compass dock={<div>Dock content</div>} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+test(`Renders with ${styles.modifiers.overlay} class when isDockOverlay is true`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockOverlay />);
+  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.overlay);
 });
 
 test('Renders with drawer when drawerContent is provided', () => {
@@ -194,13 +184,3 @@ test(`Renders dock without ${styles.modifiers.expanded} class when isDockExpande
   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);
-});
diff --git a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
index d5df7c657c4..fcc73760821 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
+++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
@@ -166,32 +166,21 @@ test(`Does not render with class ${styles.modifiers.docked} when isDocked is not
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
 });
 
-test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed and isDocked is passed`, () => {
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed and isDocked is passed`, () => {
   render(
-    <MenuToggle isTextExpanded isDocked>
+    <MenuToggle isExpanded isDocked>
       Text Expanded Toggle
     </MenuToggle>
   );
-  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
   render(<MenuToggle>Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is passed but isDocked is not passed`, () => {
-  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
-});
-
-test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are passed`, () => {
-  render(
-    <MenuToggle isDocked isTextExpanded>
-      Dock Text Expanded Toggle
-    </MenuToggle>
-  );
-  const button = screen.getByRole('button');
-  expect(button).toHaveClass(styles.modifiers.docked);
-  expect(button).toHaveClass(styles.modifiers.textExpanded);
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is passed but isDocked is not passed`, () => {
+  render(<MenuToggle isExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });
diff --git a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx b/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
index 401b3657d3b..f5648418690 100644
--- a/packages/react-core/src/components/Nav/__tests__/Nav.test.tsx
+++ b/packages/react-core/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);
   });
 });
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 6102e894202..ed638ed566a 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/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`, () => {

From e58218a9cf62b442a5a03cc265598651667e1cd4 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 29 Sep 2026 11:44:40 -0400
Subject: [PATCH 04/10] coderabbit feedback: update toggle to clear
 dockoverlay, update select to only void inline desktop, remove unused prop

---
 packages/react-core/src/components/Button/Button.tsx      | 2 --
 .../src/demos/Compass/examples/CompassDockDemo.tsx        | 8 ++++++--
 .../react-core/src/demos/examples/Nav/NavDockedNav.tsx    | 8 ++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index 6912c165230..c988ffe7233 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -111,8 +111,6 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isCircle?: boolean;
   /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
index 2a8f0fe1c63..2179c2f5cf0 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
+++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
@@ -110,7 +110,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
 
-    if (isDockExpanded && !isDockOverlay) {
+    if (isDockExpanded && !isDockOverlay && !isMobile) {
       return;
     }
 
@@ -139,7 +139,11 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    setIsDockExpanded(!isDockExpanded);
+    const nextState = !isDockExpanded;
+    if (!nextState) {
+      setIsDockOverlay(false);
+    }
+    setIsDockExpanded(nextState);
 
     if (isMobile) {
       if (isDockExpanded) {
diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
index 685dd359222..95ae2a49df1 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
@@ -113,7 +113,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
 
-    if (isDockExpanded && !isDockOverlay) {
+    if (isDockExpanded && !isDockOverlay && !isMobile) {
       return;
     }
 
@@ -249,7 +249,11 @@ export const NavDockedNav: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    setIsDockExpanded(!isDockExpanded);
+    const nextState = !isDockExpanded;
+    if (!nextState) {
+      setIsDockOverlay(false);
+    }
+    setIsDockExpanded(nextState);
 
     if (isMobile) {
       if (isDockExpanded) {

From 5a127e5121ec9dcd420713fe63d0a6b02ff31c8c Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 29 Sep 2026 17:15:36 -0400
Subject: [PATCH 05/10] fix inline dock nav closing on outside click, fix
 overlay being toggled on secondary nav group toggle

---
 .../react-core/src/components/Nav/examples/Nav.md |  2 +-
 .../demos/Compass/examples/CompassDockDemo.tsx    | 15 ++++-----------
 packages/react-core/src/demos/Nav.md              |  6 +++---
 .../src/demos/examples/Nav/NavDockedNav.tsx       | 15 ++++-----------
 4 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md
index 201933c0484..63ac1d885b3 100644
--- a/packages/react-core/src/components/Nav/examples/Nav.md
+++ b/packages/react-core/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.
 
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
index 2179c2f5cf0..792a35977c4 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
+++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
@@ -79,7 +79,8 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      isDockExpanded
+      isDockExpanded &&
+      isDockOverlay
     ) {
       setIsDockExpanded(false);
       setIsDockOverlay(false);
@@ -157,19 +158,11 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   const onToggleNavGroup = (_event: React.MouseEvent<HTMLButtonElement>, isExpanded: boolean) => {
     if (!isDockExpanded) {
       setIsNavGroupExpanded(true);
+      setIsDockOverlay(true);
+      setIsDockExpanded(true);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
-
-    if (!isMobile) {
-      if (!isDockOverlay) {
-        setIsDockOverlay(true);
-      }
-
-      if (!isDockExpanded) {
-        setIsDockExpanded(true);
-      }
-    }
   };
 
   const mobileTextLogo = (
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index f4ef0ec3185..68999f2013e 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/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.
 
diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
index 95ae2a49df1..4670b31e20b 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
@@ -82,7 +82,8 @@ export const NavDockedNav: React.FunctionComponent = () => {
       dockedMastheadElement &&
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
-      isDockExpanded
+      isDockExpanded &&
+      isDockOverlay
     ) {
       setIsDockExpanded(false);
       setIsDockOverlay(false);
@@ -267,19 +268,11 @@ export const NavDockedNav: React.FunctionComponent = () => {
   const onToggleNavGroup = (_event: React.MouseEvent<HTMLButtonElement>, isExpanded: boolean) => {
     if (!isDockExpanded) {
       setIsNavGroupExpanded(true);
+      setIsDockOverlay(true);
+      setIsDockExpanded(true);
     } else {
       setIsNavGroupExpanded(isExpanded);
     }
-
-    if (!isMobile) {
-      if (!isDockOverlay) {
-        setIsDockOverlay(true);
-      }
-
-      if (!isDockExpanded) {
-        setIsDockExpanded(true);
-      }
-    }
   };
 
   // Mobile masthead - shown on mobile viewports only, hidden on desktop

From f554ec1a4a6572fd1017645e8ecc2bfc941ebbad Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 30 Sep 2026 10:06:10 -0400
Subject: [PATCH 06/10] fix mobile docked nav click outside behavior, update
 nav docs wording

---
 .../react-core/src/demos/Compass/examples/CompassDockDemo.tsx   | 2 +-
 packages/react-core/src/demos/Nav.md                            | 2 +-
 packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
index 792a35977c4..ef8ce2b449d 100644
--- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
+++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
@@ -80,7 +80,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
       isDockExpanded &&
-      isDockOverlay
+      (isDockOverlay || isMobile)
     ) {
       setIsDockExpanded(false);
       setIsDockOverlay(false);
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 68999f2013e..1e4fc8e2af9 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -87,7 +87,7 @@ 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 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.
+1. 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.
diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
index 4670b31e20b..afbfbc066de 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
@@ -83,7 +83,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
       !dockedMastheadElement.contains(event.target as Node) &&
       !dockedMobileMastheadToggle?.contains(event.target as Node) &&
       isDockExpanded &&
-      isDockOverlay
+      (isDockOverlay || isMobile)
     ) {
       setIsDockExpanded(false);
       setIsDockOverlay(false);

From 906ae71b002efc0cebf139142aca1244505a83b0 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 30 Sep 2026 11:37:36 -0400
Subject: [PATCH 07/10] update prop desc for isExpanded

---
 packages/react-core/src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
index c988ffe7233..0936d552439 100644
--- a/packages/react-core/src/components/Button/Button.tsx
+++ b/packages/react-core/src/components/Button/Button.tsx
@@ -99,7 +99,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
+  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. Applies additional expanded styling when isDocked is true. */
   isExpanded?: boolean;
   /** Flag indicating the button is a settings button. This will override the icon property. */
   isSettings?: boolean;

From e723526e830aab28a322a63855beca981d094cfe Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 30 Sep 2026 11:46:53 -0400
Subject: [PATCH 08/10] remove dupe test

---
 .../src/components/Button/__tests__/Button.test.tsx   | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
index c714b8fedd2..d82f27b00aa 100644
--- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx
@@ -584,17 +584,6 @@ describe('Dock variant', () => {
     render(<Button isExpanded>Text Expanded Button</Button>);
     expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
-
-  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.expanded} when both props are true`, () => {
-    render(
-      <Button isDocked isExpanded>
-        Dock Text Expanded Button
-      </Button>
-    );
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass(styles.modifiers.docked);
-    expect(button).toHaveClass(styles.modifiers.expanded);
-  });
 });
 
 test(`Renders basic button`, () => {

From 0ee0d2c257cc3812c3cc44606aec88265f11a44f Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 30 Sep 2026 11:47:28 -0400
Subject: [PATCH 09/10] remove dupe bullet point

---
 packages/react-core/src/demos/Nav.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 1e4fc8e2af9..68999f2013e 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -87,7 +87,7 @@ To save space in the UI, you can use docked navigation to replace text-labeled n
 
 This demo includes the following features:
 
-1. 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.
+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.

From 316014a01307cfb9aeee50620cc2d18593893110 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 30 Sep 2026 11:58:12 -0400
Subject: [PATCH 10/10] update snap for ouia

---
 .../Button/__tests__/__snapshots__/Button.test.tsx.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index eb99ad0e5ec..93099d8a596 100644
--- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r35:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"