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

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Sidebar } from '../Sidebar';
+import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-v5-c-sidebar by default', () => {
+test(`Renders with only class name ${styles.sidebar} by default`, () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar', { exact: true });
+  expect(screen.getByText('Test').parentElement).toHaveClass(styles.sidebar, { exact: true });
 });
 
-test('Renders with class name pf-v5-c-sidebar', () => {
+test(`Renders with class name ${styles.sidebar}`, () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar');
+  expect(screen.getByText('Test').parentElement).toHaveClass(styles.sidebar);
 });
 
 test('Renders with custom class name when className prop is provided', () => {
@@ -61,9 +62,9 @@ test('Renders with class name pf-m-gutter when hasGutter prop is passed', () =>
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-gutter');
 });
 
-test('Renders with class name pf-m-sidebar__main by default for child component', () => {
+test(`Renders with class name ${styles.sidebarMain} by default for child component`, () => {
   render(<Sidebar>Test</Sidebar>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__main');
+  expect(screen.getByText('Test')).toHaveClass(styles.sidebarMain);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { SidebarContent } from '../SidebarContent';
+import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 
 test('Renders children', () => {
   render(<SidebarContent>Test</SidebarContent>);
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-v5-c-sidebar__content by default', () => {
+test(`Renders with only class name ${styles.sidebarContent} by default`, () => {
   render(<SidebarContent>Test</SidebarContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.sidebarContent, { exact: true });
 });
 
-test('Renders with class name pf-v5-c-sidebar__content', () => {
+test(`Renders with class name ${styles.sidebarContent}`, () => {
   render(<SidebarContent>Test</SidebarContent>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content');
+  expect(screen.getByText('Test')).toHaveClass(styles.sidebarContent);
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { SidebarPanel, SidebarPanelWidthType } from '../SidebarPanel';
+import styles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
 
 test('Renders children', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with with only class name pf-v5-c-sidebar__panel by default', () => {
+test(`Renders with with only class name ${styles.sidebarPanel} by default`, () => {
   render(<SidebarPanel>Test</SidebarPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.sidebarPanel, { exact: true });
 });
 
-test('Renders with with class name pf-v5-c-sidebar__panel', () => {
+test(`Renders with with class name ${styles.sidebarPanel}`, () => {
   render(<SidebarPanel>Test</SidebarPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel');
+  expect(screen.getByText('Test')).toHaveClass(styles.sidebarPanel);
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/Skeleton/Skeleton.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Skeleton/skeleton';
 import { css } from '@patternfly/react-styles';
+import cssHeight from '@patternfly/react-tokens/dist/esm/c_skeleton_Height';
+import cssWidth from '@patternfly/react-tokens/dist/esm/c_skeleton_Width';
 
 export interface SkeletonProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Skeleton */
@@ -42,8 +44,8 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
       )}
       {...((width || height) && {
         style: {
-          '--pf-v5-c-skeleton--Width': width ? width : undefined,
-          '--pf-v5-c-skeleton--Height': height ? height : undefined,
+          [cssWidth.name]: width ? width : undefined,
+          [cssHeight.name]: height ? height : undefined,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Skeleton/examples/Skeleton.md

@@ -5,6 +5,14 @@ cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 
+import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
+import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
+import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
+import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
+import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
+import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
+import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
+
 ## Examples
 
 ### Default

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,27 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
+/* eslint-disable camelcase */
+import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
+import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
+import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
+import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
+import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
+import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
+import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    --pf-v5-global--FontSize--4xl
+    {global_FontSize_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    --pf-v5-global--FontSize--3xl
+    {global_FontSize_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    --pf-v5-global--FontSize--2xl
+    {global_FontSize_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    --pf-v5-global--FontSize--xl
+    {global_FontSize_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    --pf-v5-global--FontSize--lg
+    {global_FontSize_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    --pf-v5-global--FontSize--md
+    {global_FontSize_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    --pf-v5-global--FontSize--sm
+    {global_FontSize_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/Slider/Slider.tsx

@@ -6,6 +6,9 @@ import { SliderStep } from './SliderStep';
 import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
+import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
+import { getLanguageDirection } from '../../helpers/util';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -123,7 +126,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   let isRTL: boolean;
 
   React.useEffect(() => {
-    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+    isRTL = getLanguageDirection(sliderRailRef.current) === 'rtl';
   });
 
   React.useEffect(() => {
@@ -139,9 +142,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
   // calculate style value percentage
   const stylePercent = ((localValue - min) * 100) / (max - min);
-  const style = { '--pf-v5-c-slider--value': `${stylePercent}%` } as React.CSSProperties;
+  const style = { [cssSliderValue.name]: `${stylePercent}%` } as React.CSSProperties;
   const widthChars = React.useMemo(() => localInputValue.toString().length, [localInputValue]);
-  const inputStyle = { '--pf-v5-c-slider__value--c-form-control--width-chars': widthChars } as React.CSSProperties;
+  const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
   const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setLocalInputValue(Number(value));
@@ -221,7 +224,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const onSliderRailClick = (e: any) => {
     handleThumbMove(e);
     if (snapValue && !areCustomStepsContinuous) {
-      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`);
+      thumbRef.current.style.setProperty(cssSliderValue.name, `${snapValue}%`);
       setValue(snapValue);
       if (onChange) {
         onChange(e, snapValue);
@@ -258,7 +261,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
     const newPercentage = getPercentage(newPosition, end);
 
-    thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newPercentage}%`);
+    thumbRef.current.style.setProperty(cssSliderValue.name, `${newPercentage}%`);
     // convert percentage to value
     const newValue = Math.round(((newPercentage * (max - min)) / 100 + min) * 100) / 100;
     setValue(newValue);
@@ -266,7 +269,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!customSteps) {
       // snap to new value if not custom steps
       snapValue = Math.round((Math.round((newValue - min) / step) * step + min) * 100) / 100;
-      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`);
+      thumbRef.current.style.setProperty(cssSliderValue.name, `${snapValue}%`);
       setValue(snapValue);
     }
 
@@ -354,7 +357,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     if (newValue !== localValue) {
-      thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newValue}%`);
+      thumbRef.current.style.setProperty(cssSliderValue.name, `${newValue}%`);
       setValue(newValue);
       if (onChange) {
         onChange(e, newValue);

package/src/components/Spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Spinner/spinner';
 import { css } from '@patternfly/react-styles';
+import cssDiameter from '@patternfly/react-tokens/dist/esm/c_spinner_diameter';
 
 export enum spinnerSize {
   sm = 'sm',
@@ -42,7 +43,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
     role="progressbar"
     aria-valuetext={ariaValueText}
     viewBox="0 0 100 100"
-    {...(diameter && { style: { ['--pf-v5-c-spinner--diameter']: diameter } as React.CSSProperties })}
+    {...(diameter && { style: { [cssDiameter.name]: diameter } as React.CSSProperties })}
     {...(ariaLabel && { 'aria-label': ariaLabel })}
     {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
     {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}

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/TextInput/TextInput.tsx

@@ -26,6 +26,13 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
+export interface TextInputExpandedObj {
+  /** Flag to apply expanded styling. */
+  isExpanded: boolean;
+  /** Id of the element that the text input is controlling expansion of. */
+  ariaControls: string;
+}
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,8 +40,10 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** Flag to apply expanded styling */
+  /** @deprecated Flag to apply expanded styling. expandedProps should now be used instead. */
   isExpanded?: boolean;
+  /** Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. */
+  expandedProps?: TextInputExpandedObj;
   /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
   /** Flag indicating whether the input is required */
@@ -182,6 +191,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isLeftTruncated,
       isStartTruncated,
       isExpanded,
+      expandedProps,
       readOnly,
       readOnlyVariant,
       isRequired,
@@ -193,6 +203,9 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     } = this.props;
 
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+    const ariaExpandedProps = expandedProps
+      ? { 'aria-expanded': expandedProps?.isExpanded, 'aria-controls': expandedProps?.ariaControls, role: 'combobox' }
+      : {};
 
     return (
       <span
@@ -201,7 +214,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
           isDisabled && styles.modifiers.disabled,
-          isExpanded && styles.modifiers.expanded,
+          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
           customIcon && styles.modifiers.icon,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
@@ -215,6 +228,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           type={type}
           value={this.sanitizeInputValue(value)}
           aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          {...ariaExpandedProps}
           required={isRequired}
           disabled={isDisabled}
           readOnly={!!readOnlyVariant || readOnly}

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

@@ -124,4 +124,13 @@ describe('TextInput', () => {
     render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
+
+  test('has aria-expanded set to true when ariaProps.isExpanded is true', () => {
+    render(<TextInput expandedProps={{isExpanded: true, ariaControls: 'test'}}  aria-label="isExpanded"/>);
+
+    const input = screen.getByLabelText('isExpanded');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-controls', 'test');
+  });
 });

package/src/components/TextInput/examples/TextInput.md

@@ -3,7 +3,7 @@ id: Text input
 section: components
 subsection: forms
 cssPrefix: pf-v5-c-form-control
-propComponents: ['TextInput']
+propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';

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', () => {