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

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}