@patternfly/react-core 6.5.0-prerelease.46 → 6.5.0-prerelease.48

package/src/components/HelperText/HelperTextItem.tsx

@@ -1,9 +1,9 @@
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 import { css } from '@patternfly/react-styles';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export enum HelperTextItemVariant {
   default = 'default',
@@ -38,9 +38,9 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
 
 const defaultVariantIcons = {
   indeterminate: <MinusIcon />,
-  warning: <ExclamationTriangleIcon />,
-  success: <CheckCircleIcon />,
-  error: <ExclamationCircleIcon />
+  warning: <RhUiWarningFillIcon />,
+  success: <RhUiCheckCircleFillIcon />,
+  error: <RhUiErrorFillIcon />
 };
 
 export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({

package/src/components/Icon/examples/Icon.md

@@ -11,11 +11,11 @@ import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-m
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 ## Examples
 

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
   const [isInProgress, setIsInProgress] = useState<boolean>(false);
@@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => {
         />
       </div>
       <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     </Fragment>
   );

package/src/components/Icon/examples/IconProgress.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Icon, Checkbox } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
   const [isInProgress, setIsInProgress] = useState<boolean>(false);
@@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => {
         />
       </div>
       <Icon isInProgress={isInProgress}>
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     </Fragment>
   );

package/src/components/Icon/examples/IconStatus.tsx

@@ -1,27 +1,27 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const IconStatus: React.FunctionComponent = () => (
   <Fragment>
     <Icon status="danger">
-      <ExclamationCircleIcon />
+      <RhUiErrorFillIcon />
     </Icon>{' '}
     <Icon status="warning">
-      <ExclamationTriangleIcon />
+      <RhUiWarningFillIcon />
     </Icon>{' '}
     <Icon status="success">
-      <CheckCircleIcon />
+      <RhUiCheckCircleFillIcon />
     </Icon>{' '}
     <Icon status="info">
-      <InfoCircleIcon />
+      <RhUiInformationFillIcon />
     </Icon>{' '}
     <Icon status="custom">
-      <BellIcon />
+      <RhUiNotificationFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Label/Label.tsx

@@ -7,11 +7,11 @@ import { css } from '@patternfly/react-styles';
 import { useIsomorphicLayoutEffect } from '../../helpers';
 import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
@@ -95,11 +95,11 @@ const colorStyles = {
 };
 
 const statusIcons = {
-  success: <CheckCircleIcon />,
-  warning: <ExclamationTriangleIcon />,
-  danger: <ExclamationCircleIcon />,
-  info: <InfoCircleIcon />,
-  custom: <BellIcon />
+  success: <RhUiCheckCircleFillIcon />,
+  warning: <RhUiWarningFillIcon />,
+  danger: <RhUiErrorFillIcon />,
+  info: <RhUiInformationFillIcon />,
+  custom: <RhUiNotificationFillIcon />
 };
 
 export const Label: React.FunctionComponent<LabelProps> = ({

package/src/components/Label/examples/Label.md

@@ -7,7 +7,7 @@ propComponents: ['Label', 'LabelGroup']
 
 import { Fragment, useEffect, useRef, useState } from 'react';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 import './Label.css';
 
 ## Examples

package/src/components/Label/examples/LabelCompact.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Label } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelCompact: React.FunctionComponent = () => (
   <Fragment>
@@ -67,7 +67,7 @@ export const LabelCompact: React.FunctionComponent = () => (
     >
       Compact label with icon that overflows
     </Label>{' '}
-    <Label isDisabled isCompact href="#compact" onClose={() => Function.prototype} icon={<InfoCircleIcon />}>
+    <Label isDisabled isCompact href="#compact" onClose={() => Function.prototype} icon={<RhUiInformationFillIcon />}>
       Compact link removable (disabled)
     </Label>{' '}
     <Label
@@ -75,7 +75,7 @@ export const LabelCompact: React.FunctionComponent = () => (
       isCompact
       onClick={() => Function.prototype}
       onClose={() => Function.prototype}
-      icon={<InfoCircleIcon />}
+      icon={<RhUiInformationFillIcon />}
     >
       Compact clickable removable (disabled)
     </Label>

package/src/components/Label/examples/LabelCustomRender.tsx

@@ -1,10 +1,10 @@
 import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelCustomRender: React.FunctionComponent = () => (
   <Label
     color="blue"
-    icon={<InfoCircleIcon />}
+    icon={<RhUiInformationFillIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (
       <a className={className} ref={componentRef}>

package/src/components/Label/examples/LabelGroupBasic.tsx

@@ -1,13 +1,13 @@
 import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupBasic: React.FunctionComponent = () => (
   <LabelGroup>
-    <Label icon={<InfoCircleIcon />}>Label 1</Label>
-    <Label icon={<InfoCircleIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
+    <Label icon={<RhUiInformationFillIcon />} color="blue">
       Label 2
     </Label>
-    <Label icon={<InfoCircleIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color="green">
       Label 3
     </Label>
   </LabelGroup>

package/src/components/Label/examples/LabelGroupCategory.tsx

@@ -1,13 +1,13 @@
 import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategory: React.FunctionComponent = () => (
   <LabelGroup categoryName="Group label">
-    <Label icon={<InfoCircleIcon />}>Label 1</Label>
-    <Label icon={<InfoCircleIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
+    <Label icon={<RhUiInformationFillIcon />} color="blue">
       Label 2
     </Label>
-    <Label icon={<InfoCircleIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color="green">
       Label 3
     </Label>
   </LabelGroup>

package/src/components/Label/examples/LabelGroupCategoryRemovable.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
   const [labels, setLabels] = useState([
@@ -15,7 +15,7 @@ export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
   return (
     <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
       {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelProps['color']} key={labelText}>
           {labelText}
         </Label>
       ))}

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -15,7 +15,7 @@ import {
   Popper
 } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
@@ -71,7 +71,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const onAdd = () => {
     let labelIcon: any;
     if (icon === 'Info circle icon') {
-      labelIcon = <InfoCircleIcon />;
+      labelIcon = <RhUiInformationFillIcon />;
     }
 
     setLabels([
@@ -220,7 +220,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
         <MenuList>
           <MenuItem itemId="No icon">No icon</MenuItem>
           <MenuItem itemId="Info circle icon">
-            <InfoCircleIcon />
+            <RhUiInformationFillIcon />
             Info circle icon
           </MenuItem>
         </MenuList>

package/src/components/Label/examples/LabelGroupOverflow.tsx

@@ -1,22 +1,22 @@
 import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupOverflow: React.FunctionComponent = () => (
   <LabelGroup>
-    <Label icon={<InfoCircleIcon />}>Label 1</Label>
-    <Label icon={<InfoCircleIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
+    <Label icon={<RhUiInformationFillIcon />} color="blue">
       Label 2
     </Label>
-    <Label icon={<InfoCircleIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color="green">
       Label 3
     </Label>
-    <Label icon={<InfoCircleIcon />} color="orange">
+    <Label icon={<RhUiInformationFillIcon />} color="orange">
       Label 4
     </Label>
-    <Label icon={<InfoCircleIcon />} color="red">
+    <Label icon={<RhUiInformationFillIcon />} color="red">
       Label 5
     </Label>
-    <Label icon={<InfoCircleIcon />} color="purple">
+    <Label icon={<RhUiInformationFillIcon />} color="purple">
       Label 6
     </Label>
   </LabelGroup>

package/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
   const [labels, setLabels] = useState([
@@ -15,7 +15,7 @@ export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponen
   return (
     <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
       {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelProps['color']} key={labelText}>
           {labelText}
         </Label>
       ))}

package/src/components/LoginPage/examples/LoginPage.md

@@ -20,7 +20,7 @@ propComponents:
 
 import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -10,7 +10,7 @@ import {
   ListVariant,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -94,7 +94,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -15,7 +15,7 @@ import {
   SelectOption,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -167,7 +167,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -10,7 +10,7 @@ import {
   ListVariant,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -94,7 +94,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}

package/src/components/Menu/examples/Menu.md

@@ -27,7 +27,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const MenuWithActions: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = useState<number[]>([0, 2, 3]);
@@ -46,7 +46,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
             <MenuItem
               isDisabled
               isSelected={selectedItems.indexOf(1) !== -1}
-              actions={<MenuItemAction icon={<BellIcon />} actionId="alert" aria-label="Alert" />}
+              actions={<MenuItemAction icon={<RhUiNotificationFillIcon />} actionId="alert" aria-label="Alert" />}
               description="This is a description"
               itemId={1}
             >

package/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -11,7 +11,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
     'initial-state-drilldownMenuStart'
   ]);
   const [drilldownPath, setDrilldownPath] = useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [menuHeights, setMenuHeights] = useState<any>({ 'initial-state-rootMenu': 186 }); // The root menu height must be defined when starting from a drilled in state
   const [activeMenu, setActiveMenu] = useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (

package/src/components/Menu/examples/MenuWithFavorites.tsx

@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const MenuWithFavorites: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = useState(0);
@@ -46,7 +46,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
       text: 'Item 3',
       description: 'Description 3',
       itemId: 'item-3',
-      action: <BellIcon />,
+      action: <RhUiNotificationFillIcon />,
       actionId: 'bell'
     }
   ];

package/src/components/MenuToggle/MenuToggle.tsx

@@ -4,9 +4,9 @@ import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import { OUIAProps, getOUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
@@ -127,13 +127,13 @@ class MenuToggleBase extends Component<MenuToggleProps> {
           if (!statusIcon) {
             switch (status) {
               case MenuToggleStatus.success:
-                _statusIcon = <CheckCircleIcon />;
+                _statusIcon = <RhUiCheckCircleFillIcon />;
                 break;
               case MenuToggleStatus.warning:
-                _statusIcon = <ExclamationTriangleIcon />;
+                _statusIcon = <RhUiWarningFillIcon />;
                 break;
               case MenuToggleStatus.danger:
-                _statusIcon = <ExclamationCircleIcon />;
+                _statusIcon = <RhUiErrorFillIcon />;
                 break;
             }
           }

package/src/components/Modal/ModalBoxTitle.tsx

@@ -3,11 +3,11 @@ import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-
 import { css } from '@patternfly/react-styles';
 import { capitalize } from '../../helpers';
 import { Tooltip } from '../Tooltip';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import { useIsomorphicLayoutEffect } from '../../helpers';
 
 export const isVariantIcon = (icon: any): icon is string =>
@@ -41,11 +41,11 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     titleScreenReaderText ||
     (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
   const variantIcons = {
-    success: <CheckCircleIcon />,
-    danger: <ExclamationCircleIcon />,
-    warning: <ExclamationTriangleIcon />,
-    info: <InfoCircleIcon />,
-    custom: <BellIcon />
+    success: <RhUiCheckCircleFillIcon />,
+    danger: <RhUiErrorFillIcon />,
+    warning: <RhUiWarningFillIcon />,
+    info: <RhUiInformationFillIcon />,
+    custom: <RhUiNotificationFillIcon />
   };
   const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;