@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

package/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -10,8 +10,7 @@ jest.mock('../TreeViewList', () => ({
     toolbar,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
-    isMultiSelectable,
-    id
+    isMultiSelectable
   }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
@@ -19,7 +18,6 @@ jest.mock('../TreeViewList', () => ({
       <p>{`TreeViewList aria-label: ${ariaLabel}`}</p>
       <p>{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}</p>
       <p>{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}</p>
-      <p>{`TreeViewList id: ${id}`}</p>
       <div data-testid="TreeViewList-children">{children}</div>
     </div>
   )
@@ -166,11 +164,6 @@ test('Passes data as children TreeViewList', () => {
 
   expect(screen.getByTestId('TreeViewList-children')).toContainHTML('TreeViewListItem name: Basic data name');
 });
-test('Passes rootListId to TreeViewList', () => {
-  render(<TreeView rootListId="test-root-list-id" data={[basicData]} />);
-
-  expect(screen.getByText('TreeViewList id: test-root-list-id')).toBeVisible();
-});
 
 test('Passes data action to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, action: 'Item action' }]} />);

package/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -22,7 +22,7 @@ test(`Renders with role="group" when isNested is true`, () => {
   expect(screen.getByRole('group')).toHaveTextContent('Content');
 });
 
-test('Renders with id when id is passed', () => {
+test(`Spreads additional props`, () => {
   render(<TreeViewList id="test-id">Content</TreeViewList>);
 
   expect(screen.getByRole('tree')).toHaveAttribute('id', 'test-id');

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -41,9 +41,6 @@ exports[`Matches snapshot 1`] = `
         <p>
           TreeViewList isMultiSelectable: false
         </p>
-        <p>
-          TreeViewList id: undefined
-        </p>
         <div
           data-testid="TreeViewList-children"
         >

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -23,12 +23,24 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 20 20"
             width="1em"
           >
-            <path
-              d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 512 512"
+            >
+              <path
+                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
+              />
+            </svg>
           </svg>
         </div>
       </div>

package/src/components/TreeView/examples/TreeView.md

@@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import { RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon, RhUiFolderOpenFillIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
 
 ## Examples
 

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
-import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
-import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 export const TreeViewWithIcons: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
@@ -78,8 +78,8 @@ export const TreeViewWithIcons: React.FunctionComponent = () => {
       data={options}
       activeItems={activeItems}
       onSelect={onSelect}
-      icon={<RhUiFolderFillIcon />}
-      expandedIcon={<RhUiFolderOpenFillIcon />}
+      icon={<FolderIcon />}
+      expandedIcon={<FolderOpenIcon />}
     />
   );
 };

package/src/components/Wizard/examples/Wizard.md

@@ -20,7 +20,7 @@ propComponents:
   ]
 ---
 
-import { createContext, useCallback, useContext, useRef, useState, useEffect } from 'react';
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
 import {
 FormGroup,
 TextInput,
@@ -51,7 +51,7 @@ WizardHeader
 } from '@patternfly/react-core';
 import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
-import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -21,7 +21,7 @@ import {
   WizardFooterWrapper,
   useWizardContext
 } from '@patternfly/react-core';
-import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
@@ -50,7 +50,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
       <EmptyState
         headingLevel="h4"
         titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        icon={RhUiGearGroupFillIcon}
+        icon={CogsIcon}
         variant="lg"
       >
         <EmptyStateBody>

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -9,7 +9,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
@@ -38,7 +38,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
       <EmptyState
         headingLevel="h4"
         titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        icon={RhUiGearGroupFillIcon}
+        icon={CogsIcon}
         variant="lg"
       >
         <EmptyStateBody>

package/src/demos/AlertGroup.md

@@ -4,8 +4,8 @@ section: components
 ---
 
 import { useEffect, useState } from 'react';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-search-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 

package/src/demos/Button/examples/ButtonProgress.tsx

@@ -1,13 +1,5 @@
 import { useState } from 'react';
-import {
-  Form,
-  FormGroup,
-  TextInput,
-  Button,
-  ActionListItem,
-  ActionListGroup,
-  ActionList
-} from '@patternfly/react-core';
+import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ButtonProgress: React.FunctionComponent = () => {
@@ -35,34 +27,28 @@ export const ButtonProgress: React.FunctionComponent = () => {
           aria-label="password input"
         />
       </FormGroup>
-      <FormGroup isActionGroup>
-        <ActionList>
-          <ActionListGroup>
-            <ActionListItem>
-              <Button
-                variant="primary"
-                onClick={
-                  loginState === 'notLoggedIn'
-                    ? () => {
-                        setLoginState('loading');
-                        setTimeout(() => {
-                          setLoginState('loggedIn');
-                        }, 3000);
-                      }
-                    : null
+      <ActionGroup>
+        <Button
+          variant="primary"
+          onClick={
+            loginState === 'notLoggedIn'
+              ? () => {
+                  setLoginState('loading');
+                  setTimeout(() => {
+                    setLoginState('loggedIn');
+                  }, 3000);
                 }
-                isLoading={loginState === 'loading'}
-                icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
-                spinnerAriaValueText="Loading..."
-              >
-                {loginState === 'notLoggedIn' && 'Link account and log in'}
-                {loginState === 'loading' && 'Linking account'}
-                {loginState === 'loggedIn' && 'Logged in'}
-              </Button>
-            </ActionListItem>
-          </ActionListGroup>
-        </ActionList>
-      </FormGroup>
+              : null
+          }
+          isLoading={loginState === 'loading'}
+          icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
+          spinnerAriaValueText="Loading..."
+        >
+          {loginState === 'notLoggedIn' && 'Link account and log in'}
+          {loginState === 'loading' && 'Linking account'}
+          {loginState === 'loggedIn' && 'Logged in'}
+        </Button>
+      </ActionGroup>
     </Form>
   );
 };

package/src/demos/CardView/CardView.md

@@ -4,7 +4,7 @@ section: patterns
 ---
 
 import { Fragment, useState } from 'react';
-import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import pfIcon from '../assets/pf-logo-small.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';

package/src/demos/CardView/examples/CardView.tsx

@@ -34,7 +34,7 @@ import {
   SelectOption,
   MenuToggleElement
 } from '@patternfly/react-core';
-import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import pfIcon from './assets/pf-logo-small.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
@@ -529,7 +529,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 deleteItem(product);
                               }}
                             >
-                              <RhUiTrashFillIcon />
+                              <TrashIcon />
                               Delete
                             </DropdownItem>
                           </DropdownList>

package/src/demos/Compass/Compass.md

@@ -4,16 +4,16 @@ section: components
 ---
 
 import { useRef, useState, useEffect } from 'react';
-import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
-import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
+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 RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';

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

@@ -28,8 +28,8 @@ import {
   Title,
   Tooltip
 } from '@patternfly/react-core';
-import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
-import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
+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 RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
@@ -112,12 +112,12 @@ export const CompassBasic: React.FunctionComponent = () => {
             <ActionListGroup>
               <ActionListItem>
                 <Tooltip content="Play">
-                  <Button isCircle variant="plain" icon={<RhUiPlayFillIcon />} aria-label="Play" />
+                  <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
                 </Tooltip>
               </ActionListItem>
               <ActionListItem>
                 <Tooltip content="Add">
-                  <Button isCircle variant="plain" icon={<RhUiAddSquareIcon />} aria-label="Add" />
+                  <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
                 </Tooltip>
               </ActionListItem>
             </ActionListGroup>

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

@@ -29,15 +29,15 @@ import {
   PageToggleButton
 } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-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;
@@ -211,7 +211,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
         <Toolbar isStatic id="mobile-toolbar">
           <ToolbarContent>
             <ToolbarItem align={{ default: 'alignEnd' }}>
-              <Button variant="plain" icon={<RhMicronsSearchIcon />} aria-label="Search" />
+              <Button variant="plain" icon={<SearchIcon />} aria-label="Search" />
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
@@ -221,7 +221,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
 
   // Docked masthead - vertical navigation sidebar
   const dockContent = (
-    <CompassDockMain {...(isMobile && !isDockExpanded && { inert: IS_INERT })}>
+    <CompassDockMain {...(isMobile && !isDockExpanded && { inert: '' })}>
       <Masthead display={{ default: undefined }} id="docked-masthead" variant="docked">
         <MastheadMain>
           <MastheadToggle>
@@ -268,7 +268,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link2"
                       itemId={1}
                       isActive={activeItem === 1}
-                      icon={<RhUiFolderFillIcon />}
+                      icon={<FolderIcon />}
                       anchorRef={navItem2Ref}
                       aria-label="Policy"
                     >
@@ -281,7 +281,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link3"
                       itemId={2}
                       isActive={activeItem === 2}
-                      icon={<RhUiCloudFillIcon />}
+                      icon={<CloudIcon />}
                       anchorRef={navItem3Ref}
                       aria-label="Authentication"
                     >

package/src/demos/CustomMenus/ContextSelector.md

@@ -20,7 +20,7 @@ propComponents:
 ---
 
 import { useRef, useState } from 'react';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 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 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 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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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={<RhMicronsSearchIcon />}
+                icon={<SearchIcon />}
               />
             </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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-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';
 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>
-        <RhUiQuestionMarkCircleIcon /> Help
+        <HelpIcon /> Help
       </DropdownItem>
     </>
   );
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.plain}
+                    variant={NotificationBadgeVariant.read}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/Filters/FilterDemos.md

@@ -29,8 +29,8 @@ Button,
 Bullseye,
 ToolbarToggleGroup
 } from '@patternfly/react-core';
-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 FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 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';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
   name: string;
@@ -523,7 +523,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={attributeToggleRef}
       onClick={onAttributeToggleClick}
       isExpanded={isAttributeMenuOpen}
-      icon={<RhUiFilterFillIcon />}
+      icon={<FilterIcon />}
     >
       {activeAttributeMenu}
     </MenuToggle>
@@ -582,7 +582,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} 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={RhMicronsSearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <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 RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
   name: string;
@@ -289,7 +289,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<RhUiFilterFillIcon />}
+      icon={<FilterIcon />}
       {...(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 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';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
   name: string;
@@ -320,7 +320,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       {...(areSelectionsPresent && {
         badge: <Badge isRead>{locationSelections.length + statusSelections.length}</Badge>
       })}
-      icon={<RhUiFilterFillIcon />}
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
@@ -413,7 +413,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} 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={RhMicronsSearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <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 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';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
   name: string;
@@ -290,7 +290,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<RhUiFilterFillIcon />}
+      icon={<FilterIcon />}
       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={<RhUiFilterFillIcon />}
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
@@ -464,7 +464,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} 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={RhMicronsSearchIcon}>
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>