@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.20

package/src/components/Tabs/OverflowTab.tsx

@@ -85,7 +85,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
 
   const overflowTab = (
     <li
-      className={css(styles.tabsItem, 'pf-m-overflow', selectedTab && styles.modifiers.current, className)}
+      className={css(styles.tabsItem, styles.modifiers.overflow, selectedTab && styles.modifiers.current, className)}
       role="presentation"
       ref={overflowLIRef}
       {...props}

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helpers/util';
+import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
@@ -333,7 +333,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (canUseDOM) {
         window.addEventListener('resize', this.handleScrollButtons, false);
       }
-      this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+      this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
@@ -381,7 +381,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       this.setState({ showScrollButtons: false });
     }
 
-    this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   render() {

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/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']
     })