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

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>

package/src/deprecated/components/Wizard/WizardFooterInternal.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { Button, ButtonVariant } from '../../../components/Button';
 import { WizardStep } from './Wizard';
-
+import { ActionList, ActionListGroup, ActionListItem } from '../../../components/ActionList';
 export interface WizardFooterInternalProps {
   onNext: any;
   onBack: any;
@@ -28,21 +28,31 @@ export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalP
   cancelButtonText
 }: WizardFooterInternalProps) => (
   <footer className={css(styles.wizardFooter)}>
-    {!activeStep.hideBackButton && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}>
-        {backButtonText}
-      </Button>
-    )}
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
-      {nextButtonText}
-    </Button>
-    {!activeStep.hideCancelButton && (
-      <div className={styles.wizardFooterCancel}>
-        <Button variant={ButtonVariant.link} onClick={onClose}>
-          {cancelButtonText}
-        </Button>
-      </div>
-    )}
+    <ActionList>
+      <ActionListGroup>
+        {!activeStep.hideBackButton && (
+          <ActionListItem>
+            <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}>
+              {backButtonText}
+            </Button>
+          </ActionListItem>
+        )}
+        <ActionListItem>
+          <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
+            {nextButtonText}
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      {!activeStep.hideCancelButton && (
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant={ButtonVariant.link} onClick={onClose}>
+              {cancelButtonText}
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      )}
+    </ActionList>
   </footer>
 );
 WizardFooterInternal.displayName = 'WizardFooterInternal';

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -5,46 +5,66 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
   <footer
     class="pf-v6-c-wizard__footer"
   >
-    <button
-      aria-disabled="false"
-      class="pf-v6-c-button pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-      data-ouia-component-type="PF6/Button"
-      data-ouia-safe="true"
-      disabled=""
-      type="button"
-    >
-      <div>
-        ReactNode
-      </div>
-    </button>
-    <button
-      aria-disabled="false"
-      class="pf-v6-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-      data-ouia-component-type="PF6/Button"
-      data-ouia-safe="true"
-      type="submit"
-    >
-      <div>
-        ReactNode
-      </div>
-    </button>
     <div
-      class="pf-v6-c-wizard__footer-cancel"
+      class="pf-v6-c-action-list"
     >
-      <button
-        aria-disabled="false"
-        class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-1"
-        data-ouia-component-type="PF6/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v6-c-action-list__group"
       >
-        <div>
-          ReactNode
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-secondary"
+            data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            <div>
+              ReactNode
+            </div>
+          </button>
+        </div>
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-primary"
+            data-ouia-component-id="OUIA-Generated-Button-primary-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="submit"
+          >
+            <div>
+              ReactNode
+            </div>
+          </button>
         </div>
-      </button>
+      </div>
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link"
+            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <div>
+              ReactNode
+            </div>
+          </button>
+        </div>
+      </div>
     </div>
   </footer>
 </DocumentFragment>