@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.6

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { OverflowTab } from '../OverflowTab';
 import { TabsContext } from '../TabsContext';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 
 jest.mock('../../../helpers', () => ({
   Popper: ({ trigger, popper, isVisible, appendTo }) => (
@@ -74,23 +75,23 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class names pf-m-overflow and pf-v5-c-tabs__item on the presentation element', () => {
+test(`Renders with class names pf-m-overflow and ${styles.tabsItem} on the presentation element`, () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
-  expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
+  expect(screen.getByRole('presentation')).toHaveClass(styles.modifiers.overflow);
+  expect(screen.getByRole('presentation')).toHaveClass(styles.tabsItem);
 });
 
-test('Renders with class pf-v5-c-tabs__link on the tab element', () => {
+test(`Renders with class ${styles.tabsLink} on the tab element`, () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('tab')).toHaveClass('pf-v5-c-tabs__link');
+  expect(screen.getByRole('tab')).toHaveClass(styles.tabsLink);
 });
 
-test("Renders with class pf-v5-c-tabs__link-toggle-icon on the img element's container", () => {
+test(`Renders with class ${styles.tabsLinkToggleIcon} on the img element's container`, () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');
+  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass(styles.tabsLinkToggleIcon);
 });
 
 test('Renders with custom class names provided via prop', () => {
@@ -376,7 +377,7 @@ test('Passes Popper an appendTo value of the presentation element', async () =>
   await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
-  expect(screen.getByText('Append to class name: pf-v5-c-tabs__item pf-m-overflow')).toBeVisible();
+  expect(screen.getByText(`Append to class name: ${styles.tabsItem} ${styles.modifiers.overflow}`)).toBeVisible();
 });
 
 test('Does not render an overflowing tab as a selected menu item by default', async () => {

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { TextContent } from '../TextContent';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 
 test('Renders without children', () => {
   render(
@@ -16,9 +17,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-content', () => {
+test(`Renders with class name ${styles.content}`, () => {
   render(<TextContent>Test</TextContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.content, { exact: true });
 });
 
 test('Renders with custom class name when className prop is provided', () => {

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

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextArea } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
+import formControlStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 
 const props = {
   onChange: jest.fn(),
@@ -69,7 +70,7 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-v5-c-form-control');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass(formControlStyles.formControl);
 });
 
 test('Renders validated text area with success className', () => {

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/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/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/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
 

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

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

@@ -12,6 +12,7 @@ import {
   WizardStep
 } 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;
@@ -35,7 +36,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"