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

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

@@ -26,18 +26,21 @@ import {
   Button,
   Tooltip,
   Divider,
-  PageToggleButton
+  PageToggleButton,
+  NavExpandable
 } from '@patternfly/react-core';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-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 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 pfLogo from '../../assets/PF-IconLogo-color.svg';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
-
+import { IS_INERT } from '../../../helpers/inert';
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -46,8 +49,10 @@ interface NavOnSelectProps {
 
 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 [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -63,14 +68,64 @@ export const CompassDockDemo: 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 navItem1Ref = useRef<HTMLAnchorElement>(null);
   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 settingsRef = useRef<HTMLButtonElement>(null);
   const helpRef = useRef<HTMLButtonElement>(null);
   const appsRef = useRef<HTMLButtonElement>(null);
@@ -95,7 +150,35 @@ export const CompassDockDemo: 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);
+      }
     }
   };
 
@@ -201,6 +284,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
             isSidebarOpen={isDockExpanded}
             onSidebarToggle={onMobileToggle}
             isHamburgerButton
+            id="mobile-masthead-toggle"
           />
         </MastheadToggle>
         <MastheadBrand>
@@ -211,7 +295,7 @@ export const CompassDockDemo: 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>
@@ -221,7 +305,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
 
   // Docked masthead - vertical navigation sidebar
   const dockContent = (
-    <CompassDockMain {...(isMobile && !isDockExpanded && { inert: '' })}>
+    <CompassDockMain {...(isMobile && !isDockExpanded && { inert: IS_INERT })}>
       <Masthead display={{ default: undefined }} id="docked-masthead" variant="docked">
         <MastheadMain>
           <MastheadToggle>
@@ -255,12 +339,35 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link1"
                       itemId={0}
                       isActive={activeItem === 0}
-                      icon={<CubeIcon />}
+                      icon={<RhUiCubesIcon />}
                       anchorRef={navItem1Ref}
                       aria-label="System panel"
                     >
                       System panel
                     </NavItem>
+                    <NavExpandable
+                      title="Folder"
+                      groupId={4}
+                      isExpanded={isNavGroupExpanded}
+                      icon={<RhUiFolderIcon />}
+                      hasExpandableIcon={!isMobile}
+                      buttonProps={{ ref: navItem5Ref, 'aria-label': 'Folder' }}
+                      onExpand={onToggleNavGroup}
+                    >
+                      <NavItem
+                        preventDefault
+                        id="expandable3rd-1"
+                        to="#expandable3rd-1"
+                        groupId="nav-expand3rd-group-1"
+                        itemId={5}
+                        isActive={activeItem === 5}
+                        icon={<RhUiResourceIcon />}
+                        anchorRef={navItem6Ref}
+                        aria-label="Subnav link 1"
+                      >
+                        Subnav link 1
+                      </NavItem>
+                    </NavExpandable>
                     <NavItem
                       key="nav-icon-link2"
                       preventDefault
@@ -268,7 +375,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link2"
                       itemId={1}
                       isActive={activeItem === 1}
-                      icon={<FolderIcon />}
+                      icon={<RhUiFolderFillIcon />}
                       anchorRef={navItem2Ref}
                       aria-label="Policy"
                     >
@@ -281,7 +388,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link3"
                       itemId={2}
                       isActive={activeItem === 2}
-                      icon={<CloudIcon />}
+                      icon={<RhUiCloudFillIcon />}
                       anchorRef={navItem3Ref}
                       aria-label="Authentication"
                     >
@@ -302,12 +409,14 @@ export const CompassDockDemo: 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>
@@ -405,6 +514,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
       masthead={mobileMasthead}
       dock={dockContent}
       isDockExpanded={isDockExpanded}
+      isDockExpandableExpanded={isDockExpandableExpanded}
       isDockTextExpanded={isDockTextExpanded}
       main={mainContent}
       backgroundSrcDark="/assets/images/pf-background.svg"

package/src/demos/CustomMenus/ContextSelector.md

@@ -20,7 +20,7 @@ propComponents:
 ---
 
 import { useRef, useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
 

package/src/demos/CustomMenus/CustomMenus.md

@@ -16,9 +16,9 @@ import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import RhMicronsCaretDownFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-fill-icon';
-import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';

package/src/demos/CustomMenus/OptionsMenu.md

@@ -7,7 +7,7 @@ propComponents: ['MenuToggle', 'Divider', 'Select', 'SelectList', 'SelectOption'
 ---
 
 import { useRef, useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 As the `<OptionsMenu>` component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [select](/components/menus/select) component that is built off of menu.
 

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -14,7 +14,7 @@ import {
   DropdownList,
   DropdownItem
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 interface ItemData {
   text: string;
@@ -128,7 +128,7 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 aria-label="Search menu items"
                 id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
-                icon={<SearchIcon />}
+                icon={<RhMicronsSearchIcon />}
               />
             </InputGroupItem>
           </InputGroup>

package/src/demos/DashboardHeader.tsx

@@ -24,7 +24,7 @@ import {
   PageToggleButton
 } from '../components';
 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';
@@ -90,7 +90,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.read}
+                    variant={NotificationBadgeVariant.plain}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/Drawer/Drawer.md

@@ -0,0 +1,16 @@
+---
+id: Drawer
+section: components
+---
+
+import { Fragment, useRef, useState } from 'react';
+
+## Demos
+
+### Expanded resizable viewport drawer
+
+Use `isViewport` to position the drawer as `fixed` so it fills the viewport. Place the drawer after `<Page>` as a sibling. Omit children of `<DrawerContent>` so the content container stays empty; the empty container is still required so the panel can overlay the page.
+
+```ts file="./examples/DrawerViewport.tsx" isFullscreen isBeta
+
+```

package/src/demos/Drawer/examples/DrawerViewport.tsx

@@ -0,0 +1,112 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Backdrop,
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHead,
+  DrawerPanelContent,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+export const DrawerViewport: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const drawerRef = useRef<HTMLSpanElement>(null);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(`${id} has new width of: ${newWidth}`);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="viewport-drawer-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>
+          <Button aria-expanded={isExpanded} onClick={onClick}>
+            Toggle drawer
+          </Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="viewport-drawer-nav-toggle" />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar id="viewport-drawer-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent isResizable onResize={onResize} id="viewport-resize-panel" minSize="150px">
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <Fragment>
+      <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
+        <PageSection aria-labelledby="viewport-drawer-section">
+          <h2 id="viewport-drawer-section">Viewport drawer example</h2>
+          <p>
+            The viewport drawer is a sibling of Page. DrawerContent is left empty so the panel overlays the page without
+            affecting page layout or scrolling.
+          </p>
+        </PageSection>
+      </Page>
+      {isExpanded && <Backdrop onClick={onCloseClick}></Backdrop>}
+      <Drawer isExpanded={isExpanded} isViewport onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent} />
+      </Drawer>
+    </Fragment>
+  );
+};

package/src/demos/Filters/FilterDemos.md

@@ -29,8 +29,8 @@ Button,
 Bullseye,
 ToolbarToggleGroup
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 ## Filtering demos

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -24,8 +24,8 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -523,7 +523,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={attributeToggleRef}
       onClick={onAttributeToggleClick}
       isExpanded={isAttributeMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
     >
       {activeAttributeMenu}
     </MenuToggle>
@@ -582,7 +582,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarGroup variant="filter-group">
             <ToolbarItem>{attributeDropdown}</ToolbarItem>
             <ToolbarFilter
@@ -620,7 +620,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={RhMicronsSearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -16,7 +16,7 @@ import {
   Pagination
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -289,7 +289,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       {...(selections.length > 0 && { badge: <Badge isRead>{selections.length}</Badge> })}
       style={
         {

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -23,8 +23,8 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -320,7 +320,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       {...(areSelectionsPresent && {
         badge: <Badge isRead>{locationSelections.length + statusSelections.length}</Badge>
       })}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -413,7 +413,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarFilter
             labels={statusSelections}
             deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
@@ -438,7 +438,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={RhMicronsSearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -22,8 +22,8 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -290,7 +290,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -389,7 +389,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
       {...(locationSelections.length > 0 && { badge: <Badge isRead>{locationSelections.length}</Badge> })}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -464,7 +464,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarFilter
             labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
             deleteLabel={() => setStatusSelection('')}
@@ -488,7 +488,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={RhMicronsSearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -20,8 +20,8 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -291,7 +291,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -385,7 +385,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={locationToggleRef}
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -451,7 +451,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarItem>{statusSelect}</ToolbarItem>
           <ToolbarItem>{locationSelect}</ToolbarItem>
         </ToolbarToggleGroup>
@@ -461,7 +461,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={RhMicronsSearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>