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

package/src/demos/Page.md

@@ -4,13 +4,12 @@ section: components
 ---
 
 import { useState, useRef, useEffect } from 'react';
-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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -21,7 +20,6 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
-
   1. Add an onNavToggle callback to PageHeader
   2. Pass a boolean into the isNavOpen prop to PageSidebar
 

package/src/demos/PasswordStrength.md

@@ -5,9 +5,9 @@ section: patterns
 
 import { useState } from 'react';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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 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 formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Demos

package/src/demos/PrimaryDetail.md

@@ -8,8 +8,8 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -32,6 +32,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Primary-detail full page
 
 ```ts file="examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
+
 ```
 
 ### Primary-detail content padding
@@ -43,16 +44,19 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Primary-detail card view
 
 ```ts file="examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
+
 ```
 
 ### Primary-detail simple list in card
 
 ```ts file="examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
+
 ```
 
 ### Primary-detail data list in card
 
 ```ts file="examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
+
 ```
 
 ### Primary-detail inline modifier

package/src/demos/Tabs.md

@@ -4,8 +4,8 @@ section: components
 ---
 
 import { Fragment, useCallback, useRef, useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-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 CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/Card/CardAggregateStatus.tsx

@@ -12,9 +12,9 @@ import {
   Stack,
   Icon
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-warning-fill-icon';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
@@ -44,7 +44,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           )
         }
@@ -57,7 +57,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           )
         }
@@ -70,7 +70,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           )
         }
@@ -85,7 +85,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 2
@@ -93,7 +93,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 1
@@ -107,7 +107,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 5
@@ -115,7 +115,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 12
@@ -129,7 +129,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 3
@@ -137,7 +137,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 7
@@ -153,7 +153,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '2 errors',
@@ -162,7 +162,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '1 warning',
@@ -177,7 +177,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           status: '2 successes',
@@ -186,7 +186,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '3 warnings',
@@ -201,7 +201,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '7 warnings',
@@ -210,7 +210,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '1 error',

package/src/demos/examples/Card/CardEventsView.tsx

@@ -22,8 +22,8 @@ import {
   Timestamp,
   Title
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
@@ -77,7 +77,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="danger">
-                        <ExclamationCircleIcon />
+                        <RhUiErrorFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -98,7 +98,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -134,7 +134,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -19,7 +19,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } 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';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -88,16 +88,16 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           <Level hasGutter>
             <CardTitle id="titleId">Getting Started</CardTitle>
             <LabelGroup isCompact>
-              <Label isCompact icon={<InfoCircleIcon />} color="blue">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="blue">
                 Set up your cluster
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="purple">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="purple">
                 Guided tours
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="green">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="green">
                 Quick starts
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="orange">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="orange">
                 Learning resources
               </Label>
             </LabelGroup>
@@ -118,7 +118,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="blue">
+                <Label icon={<RhUiInformationFillIcon />} color="blue">
                   Set up your cluster
                 </Label>
                 <p>Continue setting up your cluster to access all you cain in the Console</p>
@@ -149,7 +149,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="purple">
+                <Label icon={<RhUiInformationFillIcon />} color="purple">
                   Guided tours
                 </Label>
                 <p>Tour some of the key features around the console</p>
@@ -177,7 +177,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="green">
+                <Label icon={<RhUiInformationFillIcon />} color="green">
                   Quick starts
                 </Label>
                 <p>Get started with features using our step-by-step documentation</p>
@@ -208,7 +208,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="orange">
+                <Label icon={<RhUiInformationFillIcon />} color="orange">
                   Learning resources
                 </Label>
                 <p>Learn about new features within the Console and get started with demo apps</p>

package/src/demos/examples/Card/CardStatus.tsx

@@ -22,10 +22,8 @@ import {
   Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
@@ -139,7 +137,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -151,7 +149,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -167,7 +165,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -184,7 +182,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -206,21 +204,11 @@ export const CardStatus: React.FunctionComponent = () => {
       <FlexItem spacer={{ default: 'spacerMd' }}>
         <span>Notifications</span>
       </FlexItem>
-      <Label color="red" icon={<ExclamationCircleIcon />}>
-        1
-      </Label>
-      <Label color="orange" icon={<ExclamationTriangleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<CheckCircleIcon />}>
-        3
-      </Label>
-      <Label color="blue" icon={<ExclamationCircleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<BellIcon />}>
-        3
-      </Label>
+      <Label status="danger">1</Label>
+      <Label status="warning">3</Label>
+      <Label status="success">3</Label>
+      <Label status="danger">3</Label>
+      <Label status="info">3</Label>
     </Flex>
   );
 

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -16,8 +16,8 @@ import {
   TabTitleText,
   Title
 } from '@patternfly/react-core';
-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 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';
 
 const descriptionListData = [
   {
@@ -26,7 +26,7 @@ const descriptionListData = [
     detail: '121 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -36,7 +36,7 @@ const descriptionListData = [
     detail: '123 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   },
@@ -46,7 +46,7 @@ const descriptionListData = [
     detail: '122 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -56,7 +56,7 @@ const descriptionListData = [
     detail: '124 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   }

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -17,7 +17,7 @@ import {
   MenuToggleElement,
   Icon
 } 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 { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
@@ -80,7 +80,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                 </FlexItem>
                 <Flex>
                   <Icon status="danger">
-                    <ExclamationCircleIcon />
+                    <RhUiErrorFillIcon />
                   </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } 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 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';
 
 export const PasswordStrengthDemo: React.FunctionComponent = () => {
   type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
@@ -18,7 +18,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
   const [ruleCharacters, setRuleCharacters] = useState<HelperTextItemVariant>('indeterminate');
   const [passStrength, setPassStrength] = useState<PassStrength>({
     variant: 'error',
-    icon: <ExclamationCircleIcon />,
+    icon: <RhUiErrorFillIcon />,
     text: 'Weak'
   });
 
@@ -72,11 +72,11 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
 
     if (strCount < 3) {
-      setPassStrength({ variant: 'error', icon: <ExclamationCircleIcon />, text: 'Weak' });
+      setPassStrength({ variant: 'error', icon: <RhUiErrorFillIcon />, text: 'Weak' });
     } else if (strCount < 5) {
-      setPassStrength({ variant: 'warning', icon: <ExclamationTriangleIcon />, text: 'Medium' });
+      setPassStrength({ variant: 'warning', icon: <RhUiWarningFillIcon />, text: 'Medium' });
     } else {
-      setPassStrength({ variant: 'success', icon: <CheckCircleIcon />, text: 'Strong' });
+      setPassStrength({ variant: 'success', icon: <RhUiCheckCircleFillIcon />, text: 'Strong' });
     }
   };
 

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -42,8 +42,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -283,10 +283,10 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5
@@ -380,10 +380,10 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -42,8 +42,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -283,10 +283,10 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5
@@ -380,10 +380,10 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -42,8 +42,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -283,10 +283,10 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5
@@ -380,10 +380,10 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5