@patternfly/react-core 6.0.0-alpha.58 → 6.0.0-alpha.59

package/src/components/Text/examples/TextBody.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 export const TextBody: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.p}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
       nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
@@ -20,5 +20,5 @@ export const TextBody: React.FunctionComponent = () => (
       turpis.
     </Text>
     <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextContentWrapped.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextContentWrapped: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.p}>
+      Text with a component of type "p" still renders the same when wrapped with a TextContent.
+    </Text>
+    <p>If located within a wrapping TextContent, html elements are styled as well!</p>
+  </TextContent>
+);

package/src/components/Text/examples/TextDescriptionList.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
+import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
 
 export const TextDescriptionList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList component={TextListVariants.dl}>
-      <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>
-        The part of the Internet that contains websites and web pages
-      </TextListItem>
-      <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-      <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList component={TextListVariants.dl}>
+    <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>
+      The part of the Internet that contains websites and web pages
+    </TextListItem>
+    <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
+    <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
+  </TextList>
 );

package/src/components/Text/examples/TextHeadings.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 export const TextHeadings: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.h1}>Hello World</Text>
     <Text component={TextVariants.h2}>Second level</Text>
     <Text component={TextVariants.h3}>Third level</Text>
     <Text component={TextVariants.h4}>Fourth level</Text>
     <Text component={TextVariants.h5}>Fifth level</Text>
     <Text component={TextVariants.h6}>Sixth level</Text>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextOrderedList.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
 export const TextOrderedList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList component={TextListVariants.ol}>
-      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-      <TextListItem>Integer in volutpat libero.</TextListItem>
-      <TextListItem>Donec a diam tellus.</TextListItem>
-      <TextListItem>Aenean nec tortor orci.</TextListItem>
-      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList component={TextListVariants.ol}>
+    <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+    <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+    <TextListItem>Integer in volutpat libero.</TextListItem>
+    <TextListItem>Donec a diam tellus.</TextListItem>
+    <TextListItem>Aenean nec tortor orci.</TextListItem>
+    <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+    <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+  </TextList>
 );

package/src/components/Text/examples/TextPlainList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
 export const TextPlainList: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.h3}>Plain unordered list</Text>
     <TextList isPlain>
       <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
@@ -20,5 +20,5 @@ export const TextPlainList: React.FunctionComponent = () => (
       <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
       <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
     </TextList>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextUnorderedList.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { TextList, TextListItem } from '@patternfly/react-core';
 
 export const TextUnorderedList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList>
-      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-      <TextListItem>
-        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-        <TextList>
-          <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-          <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-        </TextList>
-      </TextListItem>
-      <TextListItem>Ut non enim metus.</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList>
+    <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+    <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+    <TextListItem>
+      Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+      <TextList>
+        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      </TextList>
+    </TextListItem>
+    <TextListItem>Ut non enim metus.</TextListItem>
+  </TextList>
 );

package/src/components/Toolbar/ToolbarItem.tsx

@@ -80,7 +80,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
         <div
           className={css(
             styles.toolbarItem,
-            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
+            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label'],
+            variant === ToolbarItemVariant['chip-group'] && styles.modifiers.labelGroup,
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),

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

@@ -100,7 +100,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
         hidden=""
       >
         <div
-          class="pf-v6-c-toolbar__item pf-m-chip-group"
+          class="pf-v6-c-toolbar__item pf-m-label-group"
         >
           <div
             class="pf-v6-c-label-group pf-m-category"

package/src/components/Wizard/WizardFooter.tsx

@@ -5,7 +5,7 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
 import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
-
+import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
  */
@@ -74,29 +74,37 @@ const InternalWizardFooter = ({
   cancelButtonProps
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
-    {!isBackHidden && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
-        {backButtonText}
-      </Button>
-    )}
-
-    <Button
-      variant={ButtonVariant.primary}
-      type="submit"
-      onClick={onNext}
-      isDisabled={isNextDisabled}
-      {...nextButtonProps}
-    >
-      {nextButtonText}
-    </Button>
-
-    {!isCancelHidden && (
-      <div className={styles.wizardFooterCancel}>
-        <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}>
-          {cancelButtonText}
-        </Button>
-      </div>
-    )}
+    <ActionList>
+      <ActionListGroup>
+        {!isBackHidden && (
+          <ActionListItem>
+            <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
+              {backButtonText}
+            </Button>
+          </ActionListItem>
+        )}
+        <ActionListItem>
+          <Button
+            variant={ButtonVariant.primary}
+            type="submit"
+            onClick={onNext}
+            isDisabled={isNextDisabled}
+            {...nextButtonProps}
+          >
+            {nextButtonText}
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      {!isCancelHidden && (
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}>
+              {cancelButtonText}
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      )}
+    </ActionList>
   </WizardFooterWrapper>
 );
 

package/src/components/Wizard/WizardNavItem.tsx

@@ -7,8 +7,6 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
-import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
-import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
 export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
@@ -105,7 +103,8 @@ export const WizardNavItem = ({
         className={css(
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,
-          isDisabled && styles.modifiers.disabled
+          isDisabled && styles.modifiers.disabled,
+          status === WizardNavItemStatus.Error && styles.modifiers.danger
         )}
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
@@ -113,26 +112,25 @@ export const WizardNavItem = ({
         {...(ariaLabel && { 'aria-label': ariaLabel })}
         {...ouiaProps}
       >
-        {isExpandable ? (
-          <>
-            <span className={css(styles.wizardNavLinkText)}>{content}</span>
-            <span className={css(styles.wizardNavLinkToggle)}>
-              <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
-              </span>
-            </span>
-          </>
-        ) : (
-          <>
-            {content}
-            {/* TODO, patternfly/patternfly#5142 */}
-            {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: globalSpacerSm.var }}>
-                <ExclamationCircleIcon color={globalDangerColor100.var} />
-              </span>
-            )}
-          </>
+        {status === WizardNavItemStatus.Error && (
+          <span className={css(styles.wizardNavLinkStatusIcon)}>
+            <ExclamationCircleIcon />
+          </span>
         )}
+        <span className={css(styles.wizardNavLinkMain)}>
+          {isExpandable ? (
+            <>
+              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className={css(styles.wizardNavLinkToggle)}>
+                <span className={css(styles.wizardNavLinkToggleIcon)}>
+                  <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
+                </span>
+              </span>
+            </>
+          ) : (
+            <>{content}</>
+          )}
+        </span>
       </NavItemComponent>
       {children}
     </li>

package/src/components/Wizard/WizardToggle.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 import { KeyTypes } from '../../helpers/constants';
 import { WizardStepType, isWizardSubStep } from './types';
@@ -45,6 +46,7 @@ export const WizardToggle = ({
   const parentStep = isActiveSubStep && steps.find((step) => step.id === activeStep.parentId);
   const nonSubSteps = steps.filter((step) => !isWizardSubStep(step));
   const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
+  const isActiveStepStatus = activeStep.status;
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
@@ -90,8 +92,14 @@ export const WizardToggle = ({
         aria-expanded={isNavExpanded}
       >
         <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '}
+          <span className={css(styles.wizardToggleListItem, isActiveStepStatus === 'error' && styles.modifiers.danger)}>
+            {isActiveStepStatus === 'error' ? (
+              <span className={css(styles.wizardToggleStatusIcon)}>
+                <ExclamationCircleIcon />
+              </span>
+            ) : (
+              <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
+            )}{' '}
             {parentStep?.name || activeStep?.name}
             {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>

package/src/demos/CardDemos.md

@@ -7,7 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
 import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
@@ -15,10 +15,7 @@ import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
-import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
-import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200';
+import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';

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

@@ -10,15 +10,12 @@ import {
   Gallery,
   Grid,
   GridItem,
-  Stack
+  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 TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
-import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
@@ -46,7 +43,11 @@ const cardData: CardData = {
       title: '5 Clusters',
       content: [
         {
-          icon: <CheckCircleIcon color={global_success_color_100.var} />
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -55,7 +56,11 @@ const cardData: CardData = {
       title: '15 Clusters',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -64,7 +69,11 @@ const cardData: CardData = {
       title: '3 Clusters',
       content: [
         {
-          icon: <TimesCircleIcon color={global_danger_color_100.var} />
+          icon: (
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>
+          )
         }
       ],
       layout: 'icon'
@@ -75,11 +84,19 @@ const cardData: CardData = {
       title: '10 Hosts',
       content: [
         {
-          icon: <ExclamationCircleIcon color={global_success_color_100.var} />,
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          ),
           count: 2
         },
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           count: 1
         }
       ],
@@ -89,11 +106,19 @@ const cardData: CardData = {
       title: '50 Hosts',
       content: [
         {
-          icon: <CheckCircleIcon color={global_success_color_100.var} />,
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          ),
           count: 5
         },
         {
-          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          icon: (
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>
+          ),
           count: 12
         }
       ],
@@ -103,11 +128,19 @@ const cardData: CardData = {
       title: '12 Hosts',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           count: 3
         },
         {
-          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          icon: (
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>
+          ),
           count: 7
         }
       ],
@@ -119,12 +152,20 @@ const cardData: CardData = {
       title: '13 Hosts',
       content: [
         {
-          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          icon: (
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>
+          ),
           status: '2 errors',
           subtitle: 'subtitle'
         },
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '1 warning',
           subtitle: 'subtitle'
         }
@@ -135,12 +176,20 @@ const cardData: CardData = {
       title: '3 Hosts',
       content: [
         {
-          icon: <CheckCircleIcon color={global_success_color_100.var} />,
+          icon: (
+            <Icon status="success">
+              <CheckCircleIcon />
+            </Icon>
+          ),
           status: '2 successes',
           subtitle: 'subtitle'
         },
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '3 warnings',
           subtitle: 'subtitle'
         }
@@ -151,12 +200,20 @@ const cardData: CardData = {
       title: '50 Hosts',
       content: [
         {
-          icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
+          icon: (
+            <Icon status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
+          ),
           status: '7 warnings',
           subtitle: 'subtitle'
         },
         {
-          icon: <TimesCircleIcon color={global_danger_color_100.var} />,
+          icon: (
+            <Icon status="danger">
+              <ExclamationCircleIcon />
+            </Icon>
+          ),
           status: '1 error',
           subtitle: 'subtitle'
         }

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

@@ -19,16 +19,15 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   Popover,
-  Title
+  Title,
+  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 global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
-import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200';
+import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
   const [drawerExpanded, setDrawerExpanded] = React.useState(false);
@@ -140,7 +139,9 @@ export const CardStatus: React.FunctionComponent = () => {
         <GridItem>
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
-              <CheckCircleIcon color={global_success_color_100.var} />
+              <Icon status="success">
+                <CheckCircleIcon />
+              </Icon>
             </FlexItem>
             <FlexItem>
               <span>Cluster</span>
@@ -150,7 +151,9 @@ export const CardStatus: React.FunctionComponent = () => {
         <GridItem>
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
-              <ExclamationCircleIcon color={global_danger_color_100.var} />
+              <Icon status="danger">
+                <ExclamationCircleIcon />
+              </Icon>
             </FlexItem>
             <FlexItem>
               <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
@@ -164,14 +167,16 @@ export const CardStatus: React.FunctionComponent = () => {
         <GridItem>
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
-              <ExclamationCircleIcon color={global_danger_color_100.var} />
+              <Icon status="danger">
+                <ExclamationCircleIcon />
+              </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
               <FlexItem>
                 <a href="#">Operators</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_Color_200.var }}>1 degraded</span>
+                <span style={{ color: global_text_color_subtle.var }}>1 degraded</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -179,14 +184,16 @@ export const CardStatus: React.FunctionComponent = () => {
         <GridItem>
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
-              <CheckCircleIcon color={global_success_color_100.var} />
+              <Icon status="success">
+                <CheckCircleIcon />
+              </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
               <FlexItem>
                 <a href="#">Image Vulnerabilities</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_Color_200.var }}>0 vulnerabilities</span>
+                <span style={{ color: global_text_color_subtle.var }}>0 vulnerabilities</span>
               </FlexItem>
             </Flex>
           </Flex>