Updated docs and toggle logic

thatblindgeye · thatblindgeye · commit 15b36c946ab4 · 2026-04-27T14:43:01.000-04:00
diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
@@ -14,8 +14,8 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   dock?: React.ReactNode;
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and will handle
-   * setting isTextExpanded on individual isDocked components.
+  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
+   * will handle toggling the visibility of the text in individual isDocked components.
    */
   isDockTextExpanded?: boolean;
   /** Content placed at the top of the compass layout */
diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
@@ -24,9 +24,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'docked';
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and will handle
-   * setting isTextExpanded on individual isDocked components.
-   * */
+  /** @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;
   /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
   masthead?: React.ReactNode;
diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md
@@ -4,7 +4,7 @@ section: AI
 subsection: Generative UIs
 ---
 
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
@@ -18,6 +18,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 
 ## Demos
 
diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import {
   Compass,
   CompassContent,
@@ -36,6 +36,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '../../assets/PF-IconLogo-color.svg';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -47,6 +48,20 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState<number>(0);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
   const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mobileBreakpoint = Number.parseInt(globalBreakpointLg.value) * 16;
+    const mediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+    const handleResize = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsMobile(e.matches);
+    };
+
+    handleResize(mediaQuery);
+    mediaQuery.addEventListener('change', handleResize);
+
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, []);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -71,12 +86,14 @@ export const CompassDockDemo: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isDockExpanded) {
+    if (isMobile) {
       setIsDockExpanded(!isDockExpanded);
 
-      setTimeout(() => {
-        mobileToggleRef.current?.focus();
-      }, 200);
+      if (isDockExpanded) {
+        setTimeout(() => {
+          mobileToggleRef.current?.focus();
+        }, 200);
+      }
     } else {
       setIsDockTextExpanded(!isDockTextExpanded);
     }
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
@@ -3,7 +3,7 @@ id: Navigation
 section: components
 ---
 
-import { Fragment, useState, useRef } from 'react';
+import { Fragment, useState, useRef, useEffect } from 'react';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
@@ -21,6 +21,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 
 ## Demos
 
diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import {
   Brand,
   Breadcrumb,
@@ -38,6 +38,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -49,6 +50,20 @@ export const NavDockedNav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(1);
   const [isDockExpanded, setIsDockExpanded] = useState(false);
   const [isDockTextExpanded, setIsDockTextExpanded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mobileBreakpoint = Number.parseInt(globalBreakpointXl.value) * 16;
+    const mediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+    const handleResize = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsMobile(e.matches);
+    };
+
+    handleResize(mediaQuery);
+    mediaQuery.addEventListener('change', handleResize);
+
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, []);
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -180,12 +195,14 @@ export const NavDockedNav: React.FunctionComponent = () => {
   };
 
   const onToggleDock = () => {
-    if (isDockExpanded) {
+    if (isMobile) {
       setIsDockExpanded(!isDockExpanded);
 
-      setTimeout(() => {
-        mobileToggleRef.current?.focus();
-      }, 200);
+      if (isDockExpanded) {
+        setTimeout(() => {
+          mobileToggleRef.current?.focus();
+        }, 200);
+      }
     } else {
       setIsDockTextExpanded(!isDockTextExpanded);
     }
