@patternfly/react-core 5.1.1 → 5.2.0-prerelease.10

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMain } from '../PanelMain';
+import cssPanelMainMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +18,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main', () => {
+test(`Renders with the class ${styles.panelMain}`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain);
 });
 
-test('Renders with only the class pf-v5-c-panel__main by default', () => {
+test(`Renders with only the class ${styles.panelMain} by default`, () => {
   render(<PanelMain>Test</PanelMain>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMain, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -34,7 +36,7 @@ test('Renders with custom class name when className prop is passed', () => {
 test('Renders with custom max height name when maxHeight prop is passed', () => {
   render(<PanelMain maxHeight="100px">Test</PanelMain>);
   const styles = getComputedStyle(screen.getByText('Test'));
-  expect(styles.getPropertyValue('--pf-v5-c-panel__main--MaxHeight')).toBe('100px');
+  expect(styles.getPropertyValue(cssPanelMainMaxHeight.name)).toBe('100px');
 });
 
 test('Renders with the inherited element props spread to the component', () => {

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelMainBody } from '../PanelMainBody';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel__main-body', () => {
+test(`Renders with the class ${styles.panelMainBody}`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody);
 });
 
-test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
+test(`Renders with only the class ${styles.panelMainBody} by default`, () => {
   render(<PanelMainBody>Test</PanelMainBody>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelMainBody, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressHelperText } from '../ProgressHelperText';
+import styles from '@patternfly/react-styles/css/components/Progress/progress';
 
 test('Renders without children', () => {
   render(
@@ -17,10 +18,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
+test(`Renders with class ${styles.progressHelperText} on the div containing the helper text component`, () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressHelperText);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStep, ProgressStepVariant } from '../ProgressStep';
 import { capitalize } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Success icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
@@ -23,9 +24,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
+test(`Renders with class ${styles.progressStepperStep} on the containing li element`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep);
 });
 
 test('Renders with custom class name on the containing li element when className prop is provided', () => {
@@ -36,7 +37,7 @@ test('Renders with custom class name on the containing li element when className
 ['default', undefined].forEach((variant) => {
   test(`Renders with no additional classes when variant=${variant} on containing li element`, () => {
     render(<ProgressStep variant={`${variant as ProgressStepVariant}`}>Test</ProgressStep>);
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step', { exact: true });
+    expect(screen.getByRole('listitem')).toHaveClass(styles.progressStepperStep, { exact: true });
   });
 });
 
@@ -77,9 +78,9 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
+test(`Renders the icon element inside span element with class ${styles.progressStepperStepIcon}`, () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
-  expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
+  expect(screen.getByText('Custom Icon')).toHaveClass(styles.progressStepperStepIcon);
 });
 
 test('Does not render with class pf-m-current by default on containing li element', () => {
@@ -112,14 +113,14 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
+test(`Renders the description element inside div element with class ${styles.progressStepperStepDescription}`, () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
-  expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
+  expect(screen.getByText('Description')).toHaveClass(styles.progressStepperStepDescription);
 });
 
-test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
+test(`Renders children inside class ${styles.progressStepperStepTitle}`, () => {
   render(<ProgressStep>Test</ProgressStep>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
+  expect(screen.getByText('Test')).toHaveClass(styles.progressStepperStepTitle);
 });
 
 test('Renders Component element as div by default', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ProgressStepper } from '../ProgressStepper';
+import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
+test(`Renders with only class name ${styles.progressStepper} by default`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper, { exact: true });
 });
 
-test('Renders with class name pf-v5-c-progress-stepper', () => {
+test(`Renders with class name ${styles.progressStepper}`, () => {
   render(<ProgressStepper>Test</ProgressStepper>);
-  expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
+  expect(screen.getByRole('list')).toHaveClass(styles.progressStepper);
 });
 
 test('Renders with custom class name when className prop is provided', () => {

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute properrty.
@@ -298,7 +299,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         <TextInputGroupUtilities>
           {resultsCount && <Badge isRead>{resultsCount}</Badge>}
           {!!onNextClick && !!onPreviousClick && (
-            <div className="pf-v5-c-text-input-group__group">
+            <div className={textInputGroupStyles.textInputGroupGroup}>
               <Button
                 variant={ButtonVariant.plain}
                 aria-label={previousNavigationButtonAriaLabel}

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

@@ -7,6 +7,8 @@ import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
+import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 const props = {
   onChange: jest.fn(),
@@ -30,7 +32,7 @@ describe('SearchInput', () => {
 
   test('result count', () => {
     render(<SearchInput {...props} resultsCount={3} aria-label="simple text input" data-testid="test-id" />);
-    expect(screen.getByTestId('test-id').querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(screen.getByTestId('test-id').querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
   });
 
   test('renders search input in strict mode', async () => {
@@ -64,8 +66,8 @@ describe('SearchInput', () => {
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
-    expect(input.querySelector('.pf-v5-c-text-input-group__group')).toBeInTheDocument();
-    expect(input.querySelector('.pf-v5-c-badge')).toBeInTheDocument();
+    expect(input.querySelector(`.${textInputGroupStyles.textInputGroupGroup}`)).toBeInTheDocument();
+    expect(input.querySelector(`.${badgeStyles.badge}`)).toBeInTheDocument();
 
     await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();

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,8 @@ 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';
 
 /** 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.
@@ -139,9 +141,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 +223,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 +260,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 +268,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 +356,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/__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/Text/examples/Text.md

@@ -5,16 +5,24 @@ cssPrefix: pf-v5-c-content
 propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 ---
 
+The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite (`<TextContent>`, `<TextList>`, and `<TextListItem>`).
+
+You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
+
+For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider.
+
 ## Examples
 
 ### Headings
 
 ```ts file="./TextHeadings.tsx"
+
 ```
 
 ### Body
 
 ```ts file="./TextBody.tsx"
+
 ```
 
 Text components such as Text, TextList, TextListItem need to be placed within a TextContent
@@ -22,24 +30,29 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 ### Unordered list
 
 ```ts file="./TextUnorderedList.tsx"
+
 ```
 
 ### Ordered list
 
 ```ts file="./TextOrderedList.tsx"
+
 ```
 
 ### Plain list
 
 ```ts file="./TextPlainList.tsx"
+
 ```
 
 ### Description list
 
 ```ts file="./TextDescriptionList.tsx"
+
 ```
 
 ### Visited
 
 ```ts file="./TextVisited.tsx"
+
 ```

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