@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.81

package/src/components/Truncate/Truncate.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum TruncatePosition {
   start = 'start',
@@ -52,11 +53,65 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   trailingNumChars = 7,
   content,
   ...props
-}: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content}>
-    <span className={css(styles.truncate, className)} {...props}>
+}: TruncateProps) => {
+  const [isTruncated, setIsTruncated] = React.useState(true);
+  const [parentElement, setParentElement] = React.useState<HTMLElement>(null);
+  const [textElement, setTextElement] = React.useState<HTMLElement>(null);
+
+  const textRef = React.useRef<HTMLElement>(null);
+  const subParentRef = React.useRef<HTMLDivElement>(null);
+  const observer = React.useRef(null);
+
+  const getActualWidth = (element: Element) => {
+    const computedStyle = getComputedStyle(element);
+
+    return (
+      parseFloat(computedStyle.width) -
+      parseFloat(computedStyle.paddingLeft) -
+      parseFloat(computedStyle.paddingRight) -
+      parseFloat(computedStyle.borderRight) -
+      parseFloat(computedStyle.borderLeft)
+    );
+  };
+
+  const calculateTotalTextWidth = (element: Element, trailingNumChars: number, content: string) => {
+    const firstTextWidth = element.scrollWidth;
+    const firstTextLength = content.length;
+    return (firstTextWidth / firstTextLength) * trailingNumChars + firstTextWidth;
+  };
+
+  React.useEffect(() => {
+    if (textRef && textRef.current && !textElement) {
+      setTextElement(textRef.current);
+    }
+
+    if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
+      setParentElement(subParentRef.current.parentElement.parentElement);
+    }
+  }, [textRef, subParentRef]);
+
+  React.useEffect(() => {
+    if (textElement && parentElement && !observer.current) {
+      const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
+      const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
+
+      const handleResize = () => {
+        const parentWidth = getActualWidth(parentElement);
+        setIsTruncated(textWidth >= parentWidth);
+      };
+
+      const observer = getResizeObserver(parentElement, handleResize);
+
+      return () => {
+        observer();
+      };
+    }
+  }, [textElement, parentElement]);
+
+  const truncateBody = (
+    <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
-        <span className={truncateStyles[position]}>
+        <span ref={textRef} className={truncateStyles[position]}>
           {content}
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
@@ -64,7 +119,9 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       {position === TruncatePosition.middle &&
         content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && (
           <React.Fragment>
-            <span className={styles.truncateStart}>{sliceContent(content, trailingNumChars)[0]}</span>
+            <span ref={textRef} className={styles.truncateStart}>
+              {sliceContent(content, trailingNumChars)[0]}
+            </span>
             <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
           </React.Fragment>
         )}
@@ -72,6 +129,15 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters &&
         content}
     </span>
-  </Tooltip>
-);
+  );
+
+  return isTruncated ? (
+    <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content}>
+      {truncateBody}
+    </Tooltip>
+  ) : (
+    truncateBody
+  );
+};
+
 Truncate.displayName = 'Truncate';

package/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -13,6 +13,12 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));
+
 test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 

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

@@ -14,10 +14,10 @@ exports[`renders default truncation 1`] = `
       position: top
     </p>
     <span
-      class="pf-v5-c-truncate"
+      class="pf-v6-c-truncate"
     >
       <span
-        class="pf-v5-c-truncate__start"
+        class="pf-v6-c-truncate__start"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
       </span>
@@ -40,10 +40,10 @@ exports[`renders start truncation with &lrm; at end 1`] = `
       position: top
     </p>
     <span
-      class="pf-v5-c-truncate"
+      class="pf-v6-c-truncate"
     >
       <span
-        class="pf-v5-c-truncate__end"
+        class="pf-v6-c-truncate__end"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
       </span>

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-v6-global--spacer--md);
+  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--100);
 }

package/src/components/Wizard/Wizard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import wizardHeightToken from '@patternfly/react-tokens/dist/esm/c_wizard_Height';
 
 import {
   isWizardParentStep,
@@ -55,6 +56,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Callback function to close the wizard */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks
+   * are called.
+   */
+  shouldFocusContent?: boolean;
 }
 
 export const Wizard = ({
@@ -72,11 +77,13 @@ export const Wizard = ({
   onStepChange,
   onSave,
   onClose,
+  shouldFocusContent = false,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
   const firstStepRef = React.useRef(initialSteps[startIndex - 1]);
+  const wrapperRef = React.useRef(null);
 
   // When the startIndex maps to a parent step, focus on the first sub-step
   React.useEffect(() => {
@@ -85,6 +92,11 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  const focusMainContentElement = () =>
+    setTimeout(() => {
+      wrapperRef?.current?.focus && wrapperRef.current.focus();
+    }, 0);
+
   const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
     const newStep = steps.find((step) => step.index > activeStepIndex && isStepEnabled(steps, step));
 
@@ -94,6 +106,7 @@ export const Wizard = ({
 
     setActiveStepIndex(newStep?.index);
     onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Next);
+    shouldFocusContent && focusMainContentElement();
   };
 
   const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
@@ -103,6 +116,7 @@ export const Wizard = ({
 
     setActiveStepIndex(newStep?.index);
     onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Back);
+    shouldFocusContent && focusMainContentElement();
   };
 
   const goToStepByIndex = (
@@ -157,11 +171,13 @@ export const Wizard = ({
       goToStepById={goToStepById}
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
+      shouldFocusContent={shouldFocusContent}
+      mainWrapperRef={wrapperRef}
     >
       <div
         className={css(styles.wizard, className)}
         style={{
-          ...(height ? { height } : {}),
+          ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})
         }}
         {...wrapperProps}

package/src/components/Wizard/WizardBody.tsx

@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,22 +31,23 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
-  const wrapperRef = React.useRef(null);
   const WrapperComponent = component;
-  const { activeStep } = React.useContext(WizardContext);
+  const { activeStep, shouldFocusContent, mainWrapperRef } = React.useContext(WizardContext);
   const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`;
 
   React.useEffect(() => {
     const resize = () => {
-      if (wrapperRef?.current) {
-        const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
+      if (mainWrapperRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = mainWrapperRef.current;
 
         if (previousWidth !== offsetWidth) {
           setPreviousWidth(offsetWidth);
@@ -56,12 +59,12 @@ export const WizardBody = ({
     const handleResizeWithDelay = debounce(resize, 250);
     let observer = () => {};
 
-    if (wrapperRef?.current) {
-      observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
-      const { offsetHeight, scrollHeight } = wrapperRef.current;
+    if (mainWrapperRef?.current) {
+      observer = getResizeObserver(mainWrapperRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = mainWrapperRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
-      setPreviousWidth((wrapperRef.current as HTMLElement).offsetWidth);
+      setPreviousWidth((mainWrapperRef.current as HTMLElement).offsetWidth);
     }
 
     return () => {
@@ -71,10 +74,12 @@ export const WizardBody = ({
 
   return (
     <WrapperComponent
-      ref={wrapperRef}
+      ref={mainWrapperRef}
+      {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      className={css(styles.wizardMain)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>

package/src/components/Wizard/WizardContext.tsx

@@ -28,6 +28,12 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardStepType;
   /** Set step by ID */
   setStep: (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void;
+  /** Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks
+   * are called.
+   */
+  shouldFocusContent: boolean;
+  /** Ref for main wizard content element. */
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -47,6 +53,8 @@ export interface WizardContextProviderProps {
     steps: WizardStepType[],
     index: number
   ): void;
+  shouldFocusContent: boolean;
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
@@ -59,7 +67,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   onClose,
   goToStepById,
   goToStepByName,
-  goToStepByIndex
+  goToStepByIndex,
+  shouldFocusContent,
+  mainWrapperRef
 }) => {
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
@@ -139,7 +149,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         goToStepByIndex: React.useCallback(
           (index: number) => goToStepByIndex(null, steps, index),
           [goToStepByIndex, steps]
-        )
+        ),
+        shouldFocusContent,
+        mainWrapperRef
       }}
     >
       {children}

package/src/components/Wizard/WizardFooter.tsx

@@ -5,12 +5,12 @@ 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.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +39,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,32 +76,42 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: 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>
-    )}
+  <WizardFooterWrapper className={className} {...props}>
+    <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/WizardHeader.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,14 +33,19 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
-          <TimesIcon aria-hidden="true" />
-        </Button>
+        <Button
+          variant="plain"
+          aria-label={closeButtonAriaLabel}
+          onClick={onClose}
+          icon={<TimesIcon aria-hidden="true" />}
+        />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/components/Wizard/WizardNav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}

package/src/components/Wizard/WizardNavItem.tsx

@@ -7,10 +7,12 @@ 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 {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -44,6 +46,7 @@ export const WizardNavItem = ({
   content = '',
   isCurrent = false,
   isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isVisited = false,
   stepIndex,
   onClick,
@@ -54,7 +57,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -68,30 +73,15 @@ export const WizardNavItem = ({
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
 
-  const ariaLabel = React.useMemo(() => {
-    if (status === WizardNavItemStatus.Error || (isVisited && !isCurrent)) {
-      let label = content.toString();
-
-      if (status === WizardNavItemStatus.Error) {
-        label += `, ${status}`;
-      }
-
-      // No need to signify step is visited if current
-      if (isVisited && !isCurrent) {
-        label += ', visited';
-      }
-
-      return label;
-    }
-  }, [content, isCurrent, isVisited, status]);
-
   return (
     <li
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'
@@ -105,34 +95,36 @@ 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}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
         {...ouiaProps}
       >
-        {isExpandable ? (
+        {status === WizardNavItemStatus.Error && (
           <>
-            <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 className="pf-v6-screen-reader">, {status}</span>
+            <span className={css(styles.wizardNavLinkStatusIcon)}>
+              <ExclamationCircleIcon />
             </span>
           </>
-        ) : (
-          <>
-            {content}
-            {/* TODO, patternfly/patternfly#5142 */}
-            {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: globalSpacerSm.var }}>
-                <ExclamationCircleIcon color={globalDangerColor100.var} />
-              </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>