@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 import { TextInputGroup, TextInputGroupContext } from '../TextInputGroup';
 
@@ -17,12 +18,12 @@ describe('TextInputGroup', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-v5-c-text-input-group', () => {
+  it(`renders with class ${styles.textInputGroup}`, () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).toHaveClass('pf-v5-c-text-input-group');
+    expect(inputGroup).toHaveClass(styles.textInputGroup);
   });
 
   it('renders with custom class names provided via prop', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 import { TextInputGroupMain } from '../TextInputGroupMain';
 import { TextInputGroupContext } from '../TextInputGroup';
@@ -20,12 +21,12 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-v5-c-text-input-group__main', () => {
+  it(`renders with class ${styles.textInputGroupMain}`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupMain = screen.getByText('Test');
 
-    expect(inputGroupMain).toHaveClass('pf-v5-c-text-input-group__main');
+    expect(inputGroupMain).toHaveClass(styles.textInputGroupMain);
   });
 
   it('does not render with class pf-m-icon when an icon prop is not passed', () => {
@@ -52,20 +53,20 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupMain).toHaveClass('custom-class');
   });
 
-  it('renders with class pf-v5-c-text-input-group__text on the inputs parent', () => {
+  it(`renders with class ${styles.textInputGroupText} on the inputs parent`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
 
-    expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
+    expect(inputGroupText).toHaveClass(styles.textInputGroupText);
   });
 
-  it('renders the input with class pf-v5-c-text-input-group__text-input', () => {
+  it(`renders the input with class ${styles.textInputGroupTextInput}`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
 
-    expect(input).toHaveClass('pf-v5-c-text-input-group__text-input');
+    expect(input).toHaveClass(styles.textInputGroupTextInput);
   });
 
   it('does not render the icon when it is not passed', () => {
@@ -180,7 +181,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it('renders the hint input with classes pf-v5-c-text-input-group__text-input and pf-m-hint', () => {
+  it(`renders the hint input with classes ${styles.textInputGroupTextInput} and ${styles.modifiers.hint}`, () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">
@@ -190,8 +191,8 @@ describe('TextInputGroupMain', () => {
 
     const hintInput = screen.getByRole('textbox', { hidden: true });
 
-    expect(hintInput).toHaveClass('pf-m-hint');
-    expect(hintInput).toHaveClass('pf-v5-c-text-input-group__text-input');
+    expect(hintInput).toHaveClass(styles.modifiers.hint);
+    expect(hintInput).toHaveClass(styles.textInputGroupTextInput);
   });
 
   it('renders the hint input as disabled', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
 
@@ -18,12 +18,12 @@ describe('TextInputGroupUtilities', () => {
     expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
   });
 
-  it('renders with class pf-v5-c-text-input-group__utilities', () => {
+  it(`renders with class ${styles.textInputGroupUtilities}`, () => {
     render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
 
     const utilities = screen.getByText('Test');
 
-    expect(utilities).toHaveClass('pf-v5-c-text-input-group__utilities');
+    expect(utilities).toHaveClass(styles.textInputGroupUtilities);
   });
 
   it('matches the snapshot', () => {

package/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 
-export const TextInputGroupBasic: React.FunctionComponent = () => (
-  <TextInputGroup>
-    <TextInputGroupMain />
-  </TextInputGroup>
-);
+export const TextInputGroupBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextInputGroup>
+      <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />
+    </TextInputGroup>
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -21,6 +21,8 @@ import {
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
+
 export interface TimePickerProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** Additional classes added to the time picker. */
@@ -472,7 +474,7 @@ class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
       ...props
     } = this.props;
     const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
-    const style = { '--pf-v5-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
+    const style = { [cssDatePickerFormControlWidth.name]: width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
     const randomId = id || getUniqueId('time-picker');

package/src/components/Timestamp/Timestamp.tsx

@@ -144,7 +144,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...propsWithoutDateTime}
     >
-      <time className="pf-v5-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
+      <time className={`${styles.timestamp}__text`} dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen, getDefaultNormalizer } from '@testing-library/react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
+import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, children, ...props }) => (
@@ -147,16 +148,16 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
   expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
 });
 
-test('Renders with pf-v5-c-timestamp by default', () => {
+test(`Renders with ${styles.timestamp} by default`, () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-v5-c-timestamp');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass(styles.timestamp);
 });
 
-test('Renders with pf-v5-c-timestamp__text by default', () => {
+test(`Renders with ${styles.timestamp}__text by default`, () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-v5-c-timestamp__text');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass(`${styles.timestamp}__text`);
 });
 
 test('Renders with custom class names', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Title } from '../Title';
+import styles from '@patternfly/react-styles/css/components/Title/title';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-v5-c-title', () => {
+test(`Renders with the ${styles.title}`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
+  expect(screen.getByRole('heading')).toHaveClass(styles.title);
 });
 
-test('Renders with only the class pf-v5-c-title and the heading level modifier class pf-m-2xl by default', () => {
+test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
+import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
@@ -101,7 +102,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   if (widths) {
     Object.entries(widths || {}).map(
       ([breakpoint, value]) =>
-        (widthStyles[`--pf-v5-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
+        (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
     );
   }
 

package/src/components/TreeView/TreeViewList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Divider } from '../Divider';
+import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 
 export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
   /** Child nodes of the current tree view. */
@@ -24,7 +25,7 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css('pf-v5-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul className={css(`${styles.treeView}__list`)} role={isNested ? 'group' : 'tree'} {...props}>
       {children}
     </ul>
   </>

package/src/components/TreeView/TreeViewRoot.tsx

@@ -32,9 +32,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
       );
     }
     if (this.props.hasCheckboxes || this.props.hasSelectableNodes) {
-      const firstToggle = this.treeRef.current.getElementsByClassName(
-        'pf-v5-c-tree-view__node-toggle'
-      )[0] as HTMLElement;
+      const firstToggle = this.treeRef.current.getElementsByClassName(styles.treeViewNodeToggle)[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
@@ -45,15 +43,13 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
         }
       }
       if (this.props.hasSelectableNodes) {
-        const firstTextButton = this.treeRef.current.getElementsByClassName(
-          'pf-v5-c-tree-view__node-text'
-        )[0] as HTMLElement;
+        const firstTextButton = this.treeRef.current.getElementsByClassName(styles.treeViewNodeText)[0] as HTMLElement;
         if (firstTextButton) {
           firstTextButton.tabIndex = 0;
         }
       }
     } else {
-      (this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
+      (this.treeRef.current?.getElementsByClassName(styles.treeViewNode)[0] as HTMLElement).tabIndex = 0;
     }
   }
 
@@ -69,13 +65,13 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
   handleKeys = (event: KeyboardEvent) => {
     if (
       !this.treeRef.current.contains(event.target as HTMLElement) ||
-      !(event.target as HTMLElement).classList.contains('pf-v5-c-tree-view__node')
+      !(event.target as HTMLElement).classList.contains(styles.treeViewNode)
     ) {
       return;
     }
     const activeElement = document.activeElement;
     const key = event.key;
-    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')).filter(
+    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode)).filter(
       (el) => !el.classList.contains('pf-m-disabled')
     );
 
@@ -97,7 +93,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
       const isExpandable = activeElement?.firstElementChild?.firstElementChild?.classList.contains(
-        'pf-v5-c-tree-view__node-toggle'
+        styles.treeViewNodeToggle
       );
       const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
@@ -142,7 +138,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event.preventDefault();
     }
 
-    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node'));
+    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode));
 
     handleArrows(
       event,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
+import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -12,12 +13,12 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-v5-c-truncate', () => {
+test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass('pf-v5-c-truncate');
+  expect(test).toHaveClass(styles.truncate);
 });
 
 test('renders with custom class name passed via prop', () => {
@@ -44,13 +45,13 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-v5-c-truncate__start with default position', () => {
+test(`only renders ${styles.truncateStart} with default position`, () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
-  expect(start).not.toHaveClass('pf-v5-c-truncate__end');
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
 });
 
 test('renders default truncation', () => {
@@ -80,11 +81,11 @@ test('renders middle truncation', () => {
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('cumsan.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders different content when trailingNumChars is passed with middle truncate', () => {
@@ -98,11 +99,11 @@ test('renders different content when trailingNumChars is passed with middle trun
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('an.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders tooltip position', () => {

package/src/components/Truncate/examples/Truncate.md

@@ -12,7 +12,8 @@ import './TruncateExamples.css';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
@@ -20,11 +21,11 @@ import { Truncate } from '@patternfly/react-core';
 ```
 
 ### Middle
-
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -37,7 +38,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -49,7 +51,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}

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

@@ -1,4 +1,4 @@
-.pf-v5-c-truncate--example {
+.truncate-example-resize {
   width: 320px;
   resize: horizontal;
   overflow: auto;

package/src/components/Wizard/Wizard.tsx

@@ -30,6 +30,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   footer?: WizardFooterType;
   /** Wizard navigation */
   nav?: WizardNavType;
+  /** Aria-label for the Nav */
+  navAriaLabel?: string;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -63,6 +65,7 @@ export const Wizard = ({
   className,
   header,
   nav,
+  navAriaLabel,
   startIndex = 1,
   isVisitRequired = false,
   isProgressive = false,
@@ -176,7 +179,12 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
+        <WizardInternal
+          nav={nav}
+          navAriaLabel={navAriaLabel}
+          isVisitRequired={isVisitRequired}
+          isProgressive={isProgressive}
+        />
       </div>
     </WizardContextProvider>
   );
@@ -184,9 +192,10 @@ export const Wizard = ({
 
 const WizardInternal = ({
   nav,
+  navAriaLabel,
   isVisitRequired,
   isProgressive
-}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
+}: Pick<WizardProps, 'nav' | 'navAriaLabel' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -198,12 +207,13 @@ const WizardInternal = ({
     return (
       <WizardNavInternal
         nav={nav}
+        navAriaLabel={navAriaLabel}
         isNavExpanded={isNavExpanded}
         isVisitRequired={isVisitRequired}
         isProgressive={isProgressive}
       />
     );
-  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, navAriaLabel, steps]);
 
   return (
     <WizardToggle

package/src/components/Wizard/WizardNavInternal.tsx

@@ -7,21 +7,28 @@ import { WizardNav, WizardNavProps } from './WizardNav';
 import { WizardNavItem } from './WizardNavItem';
 
 /**
- * Hosts deafult wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
+ * Hosts default wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
  * This component is not exposed to consumers.
  */
 
 interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
+  navAriaLabel: string;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({
+  nav,
+  navAriaLabel,
+  isVisitRequired,
+  isProgressive,
+  isNavExpanded
+}: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
-    'aria-label': nav?.['aria-label'] || 'Wizard steps',
+    'aria-label': navAriaLabel || nav?.['aria-label'] || 'Wizard steps',
     ...(nav?.['aria-labelledby'] && {
       'aria-labelledby': nav['aria-labelledby']
     })

package/src/components/Wizard/WizardNavItem.tsx

@@ -7,6 +7,8 @@ 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 */
@@ -125,8 +127,8 @@ export const WizardNavItem = ({
             {content}
             {/* TODO, patternfly/patternfly#5142 */}
             {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>
-                <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />
+              <span style={{ marginLeft: globalSpacerSm.var }}>
+                <ExclamationCircleIcon color={globalDangerColor100.var} />
               </span>
             )}
           </>

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

@@ -99,6 +99,18 @@ test('renders default nav with custom props', () => {
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
+test('renders nav aria label', () => {
+
+  render(
+    <Wizard navAriaLabel="custom nav aria-label">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+  const navElement = screen.getByLabelText('custom nav aria-label');
+
+  expect(navElement).toHaveAttribute('aria-label');
+});
+
 test('renders custom nav', () => {
   const customNav = () => <nav>Some custom nav</nav>;
 

package/src/components/Wizard/examples/Wizard.md

@@ -49,6 +49,8 @@ WizardHeader
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 ## Examples
 
@@ -149,7 +151,7 @@ import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 Used to access any property of [WizardContext](#wizardcontextprops):
 
 ```noLive
-import { useWizardContext } from '@patternfly/react-core/next';
+import { useWizardContext } from '@patternfly/react-core';
 
 const StepContent = () => {
   const { activeStep } = useWizardContext();
@@ -162,7 +164,7 @@ const StepContent = () => {
 Used to set a unique footer for the wizard on any given step.
 
 ```noLive
-import { useWizardFooter } from '@patternfly/react-core/next';
+import { useWizardFooter } from '@patternfly/react-core';
 
 const StepContent = () => {
   useWizardFooter(<>Some footer</>);

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -14,6 +14,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
@@ -39,7 +40,7 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className={styles.wizardMainBody}
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -22,6 +22,7 @@ import {
   useWizardContext
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -45,7 +46,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/components/Wizard/examples/WizardWithCustomNavItem.tsx

@@ -10,7 +10,7 @@ export const WizardWithCustomNavItem: React.FunctionComponent = () => (
       id="custom-nav-item-second-step"
       name="Step 2"
       navItem={{
-        content: <span style={{ color: 'var(--pf-v5-global--default-color--200)' }}>Custom item</span>
+        content: <span>Custom item</span>
       }}
     >
       Step 2 content with a custom navigation item