@patternfly/react-core 6.6.0-prerelease.5 → 6.6.0-prerelease.7

package/src/components/Nav/NavExpandable.tsx

@@ -30,6 +30,8 @@ export interface NavExpandableProps
   onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
+  /** Icon added before the nav item children. */
+  icon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
 }
@@ -84,6 +86,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
 
   render() {
     const {
+      icon,
       title,
       srText,
       children,
@@ -132,11 +135,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         tabIndex={isSidebarOpen ? null : -1}
                         {...buttonProps}
                       >
-                        {typeof title !== 'string' ? (
-                          <span className={css(`${styles.nav}__link-text`)}>{title}</span>
-                        ) : (
-                          title
-                        )}
+                        {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
+                        {typeof title !== 'string' ? <span className={css(styles.navLinkText)}>{title}</span> : title}
                         <span className={css(styles.navToggle)}>
                           <span className={css(styles.navToggleIcon)}>
                             <RhMicronsCaretDownIcon />

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -13,3 +13,20 @@ test('Does not render with the inert attribute when isExpanded is true', () => {
 
   expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
 });
+
+test('Renders icon wrapped in nav link icon class when icon prop is provided', () => {
+  render(
+    <NavExpandable id="grp-1" title="NavExpandable" icon={<span data-testid="test-icon">Icon</span>}></NavExpandable>
+  );
+
+  const icon = screen.getByTestId('test-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).toHaveClass('pf-v6-c-nav__link-icon');
+});
+
+test('Does not render nav link icon wrapper when icon prop is not provided', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument();
+});

package/src/components/Nav/examples/Nav.md

@@ -9,11 +9,11 @@ ouia: true
 import { useState } from 'react';
 import './nav.css';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
+import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 ## Examples
 
@@ -75,7 +75,7 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
-### With item icons
+### With icons
 
 ```ts file="./NavIcons.tsx"
 

package/src/components/Nav/examples/NavIcons.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavItem, NavList } 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 CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
+import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(0);
@@ -51,10 +52,30 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link4"
           itemId={3}
           isActive={activeItem === 3}
-          icon={<LinkIcon />}
+          icon={<RhUiLinkIcon />}
         >
           Link 4
         </NavItem>
+        <NavExpandable title="Expandable" icon={<FolderOpenIcon />} groupId="nav-icon-expandable">
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link1"
+            to="#nav-icon-expandable-link1"
+            itemId={4}
+            isActive={activeItem === 4}
+          >
+            Subnav link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link2"
+            to="#nav-icon-expandable-link2"
+            itemId={5}
+            isActive={activeItem === 5}
+          >
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
       </NavList>
     </Nav>
   );

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -18,7 +18,7 @@ propComponents:
 
 import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -13,7 +13,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));
@@ -64,7 +64,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -91,7 +91,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -120,7 +120,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -151,7 +151,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -181,7 +181,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -210,7 +210,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -235,7 +235,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -21,7 +21,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
@@ -89,7 +89,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -124,7 +124,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -154,7 +154,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -185,7 +185,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -215,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -254,7 +254,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -284,7 +284,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -315,7 +315,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >
@@ -345,7 +345,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -17,7 +17,7 @@ import { useRef, useState } from 'react';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -95,7 +95,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                   variant="plain"
                   onClick={onToggle}
                   isExpanded={isOpen}
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
               isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainerHeight.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuBreakpointOnContainerHeight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -92,7 +92,7 @@ export const OverflowMenuBreakpointOnContainerHeight: React.FunctionComponent =
                     variant="plain"
                     onClick={onToggle}
                     isExpanded={isOpen}
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -99,7 +99,7 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -88,7 +88,7 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuPersistent: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx

@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/Popover/examples/Popover.md

@@ -11,7 +11,7 @@ import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-u
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
-import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 
 ## Examples
 

package/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx

@@ -1,12 +1,12 @@
 import { Popover, Button } from '@patternfly/react-core';
-import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 
 export const PopoverWithIconInTheTitle: React.FunctionComponent = () => (
   <div style={{ margin: '50px' }}>
     <Popover
       aria-label="Popover with icon in the title example"
       headerContent="Popover with icon"
-      headerIcon={<BullhornIcon />}
+      headerIcon={<RhUiAttentionBellFillIcon />}
       bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
       footerContent="Popover footer"
       appendTo={() => document.body}

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -6,8 +6,8 @@ propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 
 import { Fragment, useState } from 'react';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
+import RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';
 
 ## Examples
 

package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx

@@ -1,6 +1,6 @@
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
+import RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';
 
 export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
   <ProgressStepper aria-label="Progress stepper with custom icons">
@@ -14,7 +14,7 @@ export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
     </ProgressStep>
     <ProgressStep
       isCurrent
-      icon={<InProgressIcon />}
+      icon={<RhUiInProgressIcon />}
       id="custom-step2"
       titleId="custom-step2-title"
       aria-label="in progress"
@@ -23,7 +23,7 @@ export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
     </ProgressStep>
     <ProgressStep
       variant="pending"
-      icon={<PendingIcon />}
+      icon={<RhUiPendingIcon />}
       id="custom-step3"
       titleId="custom-step3-title"
       aria-label="pending step"

package/src/components/Tabs/examples/Tabs.md

@@ -18,12 +18,12 @@ ouia: true
 ---
 
 import { createRef, Fragment, useEffect, useRef, useState } from 'react';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
-import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 

package/src/components/Tabs/examples/TabsFilledWithIcons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 
 export const TabsFilledWithIcons: React.FunctionComponent = () => {
@@ -34,7 +34,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
           title={
             <>
               <TabTitleIcon>
-                <UsersIcon />
+                <RhUiUsersFillIcon />
               </TabTitleIcon>{' '}
               <TabTitleText>Users</TabTitleText>{' '}
             </>
@@ -48,7 +48,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
           title={
             <>
               <TabTitleIcon>
-                <BoxIcon />
+                <RhUiContainerFillIcon />
               </TabTitleIcon>{' '}
               <TabTitleText>Containers</TabTitleText>{' '}
             </>

package/src/components/Tabs/examples/TabsIconAndText.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
-import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
 
 export const TabsIconAndText: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
@@ -29,7 +29,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <UsersIcon />
+              <RhUiUsersFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Users</TabTitleText>{' '}
           </>
@@ -43,7 +43,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <BoxIcon />
+              <RhUiContainerFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Containers</TabTitleText>{' '}
           </>
@@ -69,7 +69,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <ServerIcon />
+              <RhUiServerStackFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Server</TabTitleText>{' '}
           </>
@@ -95,7 +95,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <ProjectDiagramIcon />
+              <RhUiInfrastructureFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Network</TabTitleText>{' '}
           </>

package/src/components/TextInput/examples/TextInput.md

@@ -7,8 +7,8 @@ propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import { useRef, useState } from 'react';
-import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
 
 ## Examples
 

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
-import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
 
 export const TextInputCustomIcon: React.FunctionComponent = () => {
   const [calendar, setCalendar] = useState('');
@@ -12,7 +12,7 @@ export const TextInputCustomIcon: React.FunctionComponent = () => {
       <TextInput
         value={calendar}
         type="text"
-        customIcon={<CalendarIcon />}
+        customIcon={<RhUiCalendarFillIcon />}
         onChange={(_event, value) => setCalendar(value)}
         aria-label="text input example with calendar icon"
       />
@@ -21,7 +21,7 @@ export const TextInputCustomIcon: React.FunctionComponent = () => {
       <TextInput
         value={clock}
         type="text"
-        customIcon={<ClockIcon />}
+        customIcon={<RhUiClockFillIcon />}
         onChange={(_event, value) => setClock(value)}
         aria-label="text input example with clock icon"
       />