@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -23,8 +23,8 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -136,6 +136,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onResourceToggle()}
               isExpanded={resourceIsExpanded}
@@ -170,6 +171,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onStatusToggle()}
               isExpanded={statusIsExpanded}
@@ -203,7 +205,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarToggleGroup variant="label-group" toggleIcon={<FilterIcon />} breakpoint="lg">
+          <ToolbarToggleGroup variant="label-group" toggleIcon={<RhUiFilterFillIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
           <ToolbarItem>

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -18,10 +18,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-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';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
@@ -147,6 +147,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onStatusToggle}
                 isExpanded={isStatusExpanded}
@@ -178,6 +179,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onRiskToggle}
                 isExpanded={isRiskExpanded}
@@ -205,7 +207,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
@@ -213,10 +215,10 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
+          <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
+          <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -109,6 +109,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setPositionSelectOpen(!positionSelectOpen)}
                 isExpanded={positionSelectOpen}
@@ -192,6 +193,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             selected={flipBehavior}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setFlipSelectOpen(!flipSelectOpen)}
                 isExpanded={flipSelectOpen}

package/src/components/TreeView/TreeView.tsx

@@ -84,6 +84,8 @@ export interface TreeViewProps {
   icon?: React.ReactNode;
   /** ID of the tree view. */
   id?: string;
+  /** ID of the root tree view list. */
+  rootListId?: string;
   /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
    * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
    * Can only be applied to the root tree view list.
@@ -113,6 +115,8 @@ export interface TreeViewProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
@@ -141,6 +145,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
   hasAnimations: hasAnimationsProp,
+  rootListId,
+  inert,
   ...props
 }: TreeViewProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
@@ -151,7 +157,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       isMultiSelectable={isMultiSelectable}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
-      {...props}
+      id={rootListId}
+      inert={inert}
     >
       {data.map((item) => (
         <TreeViewListItem

package/src/components/TreeView/TreeViewList.tsx

@@ -23,6 +23,8 @@ export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
    * this or the aria-label property must be passed in.
    */
   'aria-labelledby'?: string;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

package/src/components/TreeView/TreeViewListItem.tsx

@@ -1,11 +1,12 @@
 import { memo, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
-import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -155,7 +156,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
-        <RhMicronsCaretDownIcon />
+        <RhMicronsCaretRightIcon />
       </span>
     </ToggleComponent>
   );
@@ -225,7 +226,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: internalIsExpanded ? undefined : ''
+        inert: internalIsExpanded ? undefined : IS_INERT
       })
   );
 

package/src/components/TreeView/TreeViewSearch.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -33,7 +33,7 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
       <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
       <div className={css(formStyles.formControlUtilities)}>
         <div className={css(formStyles.formControlIcon)}>
-          <SearchIcon />
+          <RhMicronsSearchIcon />
         </div>
       </div>
     </div>

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

@@ -10,7 +10,8 @@ jest.mock('../TreeViewList', () => ({
     toolbar,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
-    isMultiSelectable
+    isMultiSelectable,
+    id
   }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
@@ -18,6 +19,7 @@ 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>
   )
@@ -164,6 +166,11 @@ 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(`Spreads additional props`, () => {
+test('Renders with id when id is passed', () => {
   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,6 +41,9 @@ 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__/TreeViewListItem.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`Matches snapshot with children 1`] = `
                 width="1em"
               >
                 <path
-                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
                 />
               </svg>
             </span>

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

@@ -23,24 +23,12 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <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>
+            <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>
         </div>
       </div>

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

@@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
+import { RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon, RhUiFolderOpenFillIcon } 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 FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
+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';
 
 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={<FolderIcon />}
-      expandedIcon={<FolderOpenIcon />}
+      icon={<RhUiFolderFillIcon />}
+      expandedIcon={<RhUiFolderOpenFillIcon />}
     />
   );
 };

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

@@ -20,7 +20,7 @@ propComponents:
   ]
 ---
 
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useRef, useState, useEffect } 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 CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-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 CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-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={CogsIcon}
+        icon={RhUiGearGroupFillIcon}
         variant="lg"
       >
         <EmptyStateBody>

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

@@ -9,7 +9,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-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={CogsIcon}
+        icon={RhUiGearGroupFillIcon}
         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,5 +1,13 @@
 import { useState } from 'react';
-import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Button,
+  ActionListItem,
+  ActionListGroup,
+  ActionList
+} from '@patternfly/react-core';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ButtonProgress: React.FunctionComponent = () => {
@@ -27,28 +35,34 @@ export const ButtonProgress: React.FunctionComponent = () => {
           aria-label="password input"
         />
       </FormGroup>
-      <ActionGroup>
-        <Button
-          variant="primary"
-          onClick={
-            loginState === 'notLoggedIn'
-              ? () => {
-                  setLoginState('loading');
-                  setTimeout(() => {
-                    setLoginState('loggedIn');
-                  }, 3000);
+      <FormGroup isActionGroup>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button
+                variant="primary"
+                onClick={
+                  loginState === 'notLoggedIn'
+                    ? () => {
+                        setLoginState('loading');
+                        setTimeout(() => {
+                          setLoginState('loggedIn');
+                        }, 3000);
+                      }
+                    : null
                 }
-              : 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>
+                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>
     </Form>
   );
 };

package/src/demos/CardView/CardView.md

@@ -4,7 +4,7 @@ section: patterns
 ---
 
 import { Fragment, useState } from 'react';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-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 TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-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);
                               }}
                             >
-                              <TrashIcon />
+                              <RhUiTrashFillIcon />
                               Delete
                             </DropdownItem>
                           </DropdownList>

package/src/demos/Compass/Compass.md

@@ -4,16 +4,16 @@ section: components
 ---
 
 import { useRef, useState, useEffect } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import 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 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 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 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 PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+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 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={<PlayIcon />} aria-label="Play" />
+                  <Button isCircle variant="plain" icon={<RhUiPlayFillIcon />} aria-label="Play" />
                 </Tooltip>
               </ActionListItem>
               <ActionListItem>
                 <Tooltip content="Add">
-                  <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+                  <Button isCircle variant="plain" icon={<RhUiAddSquareIcon />} 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 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 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={<SearchIcon />} aria-label="Search" />
+              <Button variant="plain" icon={<RhMicronsSearchIcon />} 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: '' })}>
+    <CompassDockMain {...(isMobile && !isDockExpanded && { inert: IS_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={<FolderIcon />}
+                      icon={<RhUiFolderFillIcon />}
                       anchorRef={navItem2Ref}
                       aria-label="Policy"
                     >
@@ -281,7 +281,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       to="#nav-icon-link3"
                       itemId={2}
                       isActive={activeItem === 2}
-                      icon={<CloudIcon />}
+                      icon={<RhUiCloudFillIcon />}
                       anchorRef={navItem3Ref}
                       aria-label="Authentication"
                     >

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,7 +16,7 @@ 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 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';