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

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

@@ -28,17 +28,21 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  Tooltip
+  Tooltip,
+  NavExpandable
 } from '@patternfly/react-core';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiResourceIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resource-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';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import { IS_INERT } from '../../../helpers/inert';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -48,12 +52,14 @@ interface NavOnSelectProps {
 
 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 [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    const mobileBreakpoint = Number.parseInt(globalBreakpointXl.value) * 16;
+    const mobileBreakpoint = Number.parseInt(globalBreakpointLg.value) * 16;
     const mediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
     const handleResize = (e: MediaQueryListEvent | MediaQueryList) => {
       setIsMobile(e.matches);
@@ -65,8 +71,56 @@ export const NavDockedNav: React.FunctionComponent = () => {
     return () => mediaQuery.removeEventListener('change', handleResize);
   }, []);
 
+  const handleDockClickOutside = (event: MouseEvent) => {
+    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+      return;
+    }
+
+    const dockedMastheadElement = document.getElementById('docked-masthead');
+    const dockedMobileMastheadToggle = document.getElementById('mobile-masthead-toggle');
+
+    if (
+      dockedMastheadElement &&
+      !dockedMastheadElement.contains(event.target as Node) &&
+      !dockedMobileMastheadToggle?.contains(event.target as Node) &&
+      (isDockExpandableExpanded || isDockExpanded)
+    ) {
+      setIsDockExpandableExpanded(false);
+      setIsDockExpanded(false);
+    }
+  };
+
+  const handleDockKeydown = (_event: KeyboardEvent) => {
+    if ((!isMobile && !isDockExpandableExpanded) || (isMobile && !isDockExpanded)) {
+      return;
+    }
+
+    if (_event.key === 'Escape') {
+      setIsDockExpandableExpanded(false);
+      setIsDockExpanded(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('click', handleDockClickOutside);
+    window.addEventListener('keydown', handleDockKeydown);
+
+    return () => {
+      window.removeEventListener('click', handleDockClickOutside);
+      window.removeEventListener('keydown', handleDockKeydown);
+    };
+  }, [isDockExpandableExpanded, isDockTextExpanded, isDockExpanded, isMobile]);
+
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+
+    if (!isMobile && isDockTextExpanded) {
+      return;
+    }
+
+    setIsDockExpandableExpanded(false);
+    setIsDockTextExpanded(false);
+    setIsDockExpanded(false);
   };
 
   const mobileTextLogo = (
@@ -180,6 +234,8 @@ export const NavDockedNav: React.FunctionComponent = () => {
   const navItem2Ref = useRef<HTMLAnchorElement>(null);
   const navItem3Ref = useRef<HTMLAnchorElement>(null);
   const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const navItem5Ref = useRef<HTMLAnchorElement>(null);
+  const navItem6Ref = useRef<HTMLAnchorElement>(null);
   const appsRef = useRef<HTMLButtonElement>(null);
   const settingsRef = useRef<HTMLButtonElement>(null);
   const helpRef = useRef<HTMLButtonElement>(null);
@@ -204,7 +260,35 @@ export const NavDockedNav: React.FunctionComponent = () => {
         }, 200);
       }
     } else {
-      setIsDockTextExpanded(!isDockTextExpanded);
+      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) {
+      setIsNavGroupExpanded(true);
+    } else {
+      setIsNavGroupExpanded(isExpanded);
+    }
+
+    if (!isMobile) {
+      if (!isDockExpandableExpanded && !isDockTextExpanded) {
+        setIsDockExpandableExpanded(true);
+      }
+
+      if (!isDockTextExpanded) {
+        setIsDockTextExpanded(false);
+      }
     }
   };
 
@@ -220,6 +304,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
             isSidebarOpen={isDockExpanded}
             onSidebarToggle={onMobileToggle}
             isHamburgerButton
+            id="mobile-masthead-toggle"
           />
         </MastheadToggle>
         <MastheadBrand>
@@ -230,7 +315,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
         <Toolbar isStatic id="mobile-toolbar">
           <ToolbarContent>
             <ToolbarItem align={{ default: 'alignEnd' }}>
-              <Button variant="plain" icon={<SearchIcon />} aria-label="Search" />
+              <Button variant="plain" icon={<RhMicronsSearchIcon />} aria-label="Search" />
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
@@ -241,7 +326,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
   // Docked masthead - vertical navigation sidebar
   const dockedMasthead = (
     <Masthead
-      {...(isMobile && !isDockExpanded && { inert: '' })}
+      {...(isMobile && !isDockExpanded && { inert: IS_INERT })}
       display={{ default: undefined }}
       id="docked-masthead"
       variant="docked"
@@ -277,19 +362,42 @@ export const NavDockedNav: React.FunctionComponent = () => {
                     to="#nav-link1"
                     itemId={0}
                     isActive={activeItem === 0}
-                    icon={<CubeIcon />}
+                    icon={<RhUiCubesIcon />}
                     anchorRef={navItem1Ref}
                     aria-label="System panel"
                   >
                     System panel
                   </NavItem>
+                  <NavExpandable
+                    title="Folder"
+                    groupId="nav-expandable-group-1"
+                    isExpanded={isNavGroupExpanded}
+                    icon={<RhUiFolderIcon />}
+                    hasExpandableIcon={!isMobile}
+                    buttonProps={{ ref: navItem5Ref, 'aria-label': 'Folder' }}
+                    onExpand={onToggleNavGroup}
+                  >
+                    <NavItem
+                      preventDefault
+                      id="nav-expandable-item-1"
+                      to="#nav-expandable-item-1"
+                      groupId="nav-expandable-group-1"
+                      itemId={5}
+                      isActive={activeItem === 5}
+                      icon={<RhUiResourceIcon />}
+                      anchorRef={navItem6Ref}
+                      aria-label="Subnav link 1"
+                    >
+                      Subnav link 1
+                    </NavItem>
+                  </NavExpandable>
                   <NavItem
                     preventDefault
                     id="nav-link2"
                     to="#nav-link2"
                     itemId={1}
                     isActive={activeItem === 1}
-                    icon={<FolderIcon />}
+                    icon={<RhUiFolderFillIcon />}
                     anchorRef={navItem2Ref}
                     aria-label="Policy"
                   >
@@ -301,7 +409,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                     to="#nav-link3"
                     itemId={2}
                     isActive={activeItem === 2}
-                    icon={<CloudIcon />}
+                    icon={<RhUiCloudFillIcon />}
                     anchorRef={navItem3Ref}
                     aria-label="Authentication"
                   >
@@ -321,12 +429,14 @@ export const NavDockedNav: React.FunctionComponent = () => {
                   </NavItem>
                 </NavList>
               </Nav>
-              {!isDockTextExpanded && !isDockExpanded && (
+              {!isDockTextExpanded && !isDockExpanded && !isDockExpandableExpanded && (
                 <>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="System panel"></Tooltip>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Policy"></Tooltip>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Authentication"></Tooltip>
                   <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Network services"></Tooltip>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem5Ref} content="Folder"></Tooltip>
+                  <Tooltip aria="none" aria-live="off" triggerRef={navItem6Ref} content="Subnav link 1"></Tooltip>
                 </>
               )}
             </ToolbarItem>
@@ -427,6 +537,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
       <Page
         variant="docked"
         isDockExpanded={isDockExpanded}
+        isDockExpandableExpanded={isDockExpandableExpanded}
         isDockTextExpanded={isDockTextExpanded}
         masthead={mobileMasthead}
         dockContent={dockedMasthead}

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

@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -113,7 +113,7 @@ export const NavFlyout: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -134,7 +134,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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

@@ -34,7 +34,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -91,7 +91,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -113,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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

@@ -37,7 +37,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -110,7 +110,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -161,7 +161,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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

@@ -38,7 +38,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -107,7 +107,7 @@ export const NavManual: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -128,7 +128,7 @@ export const NavManual: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -41,7 +41,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -117,7 +117,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -146,7 +146,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>