refactor(misc): CSS harcoded variables and classes replaced with react-tokens and react-styles

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
+import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 import {
   Button,
   ButtonVariant,
@@ -605,7 +606,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
               }
               {<div className={css(styles.codeEditorHeaderMain)}>{headerMainContent}</div>}
               {!!shortcutsPopoverProps.bodyContent && (
-                <div className="pf-v5-c-code-editor__keyboard-shortcuts">
+                <div className={`${styles.codeEditor}__keyboard-shortcuts`}>
                   <Popover {...shortcutsPopoverProps}>
                     <Button variant={ButtonVariant.link} icon={<HelpIcon />}>
                       {shortcutsPopoverButtonText}
@@ -647,7 +648,9 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   {...getRootProps({
                     onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
                   })}
-                  className={`pf-v5-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`}
+                  className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${
+                    isLoading && fileUploadStyles.modifiers.loading
+                  }`}
                 >
                   {editorHeader}
                   <div className={css(styles.codeEditorMain)}>

packages/react-core/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -19,7 +19,7 @@ export const AboutModalBoxContent: React.FunctionComponent<AboutModalBoxContentP
   ...props
 }: AboutModalBoxContentProps) => (
   <div className={css(styles.aboutModalBoxContent)} {...props}>
-    <div className={css('pf-v5-c-about-modal-box__body')}>
+    <div className={css(`${styles.aboutModalBox}__body`)}>
       {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>

packages/react-core/src/components/AboutModal/examples/AboutModal.md

@@ -6,6 +6,7 @@ propComponents: ['AboutModal']
 ---
 import brandImg from '../../assets/brandImg.svg';
 import bgImg from '../../assets/patternfly-orb.svg';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Examples
 ### Basic

packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from '../../assets/brandImg.svg';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -24,12 +25,12 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         hasNoContentContainer={true}
         productName="Product Name"
       >
-        <TextContent id="test1" className="pf-v5-u-py-xl">
+        <TextContent id="test1" className={spacing.pyXl}>
           <h4>About</h4>
           <p>Content here</p>
         </TextContent>
         <Alert variant="info" title="Updates available" />
-        <TextContent id="test2" className="pf-v5-u-py-xl">
+        <TextContent id="test2" className={spacing.pyXl}>
           <TextList component="dl">
             <TextListItem component="dt">CFME Version</TextListItem>
             <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>

packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders without children', () => {
   render(<Accordion data-testid="accordion" />);
@@ -34,10 +35,10 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-v5-c-accordion', () => {
+test(`Renders with class name ${styles.accordion}`, () => {
   render(<Accordion>Test</Accordion>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordion);
 });
 
 test('Renders with custom class names provided via prop', () => {

packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { AccordionContent } from '../AccordionContent';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('../AccordionExpandableContentBody', () => ({
   AccordionExpandableContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
@@ -85,14 +86,14 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-v5-c-accordion__expandable-content', () => {
+test(`Renders with class name ${styles.accordionExpandableContent}`, () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-accordion__expandable-content');
+  expect(screen.getByRole('heading')).toHaveClass(styles.accordionExpandableContent);
 });
 
 test('Renders with custom class names provided via prop', () => {

packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { AccordionExpandableContentBody } from '../AccordionExpandableContentBody';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders without children', () => {
   const { asFragment } = render(<AccordionExpandableContentBody />);
@@ -19,10 +20,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-accordion__expandable-content-body', () => {
+test(`Renders with class name ${styles.accordionExpandableContentBody}`, () => {
   render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__expandable-content-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordionExpandableContentBody);
 });
 
 test('Matches the snapshot', () => {

packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
 
@@ -42,7 +43,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('button')).toHaveAccessibleName('Label');
 });
 
-test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () => {
+test(`Renders the accordion toggle with class ${styles.accordionToggle}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -51,7 +52,7 @@ test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () =>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('button')).toHaveClass('pf-v5-c-accordion__toggle');
+  expect(screen.getByRole('button')).toHaveClass(styles.accordionToggle);
 });
 
 test('Renders the accordion toggle with custom class names provided via prop', () => {
@@ -66,7 +67,7 @@ test('Renders the accordion toggle with custom class names provided via prop', (
   expect(screen.getByRole('button')).toHaveClass('test-class');
 });
 
-test('Renders with children inside class pf-v5-c-accordion__toggle-text', () => {
+test(`Renders with children inside class ${styles.accordionToggleText}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -75,10 +76,10 @@ test('Renders with children inside class pf-v5-c-accordion__toggle-text', () =>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__toggle-text');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordionToggleText);
 });
 
-test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon', () => {
+test(`Renders with the toggle icon inside class ${styles.accordionToggleIcon}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -87,7 +88,7 @@ test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon',
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByText('Icon mock')).toHaveClass('pf-v5-c-accordion__toggle-icon');
+  expect(screen.getByText('Icon mock')).toHaveClass(styles.accordionToggleIcon);
 });
 
 test('Renders with the id prop passed to the toggle', () => {

packages/react-core/src/components/ActionList/ActionListItem.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Children of the action list item */
@@ -13,7 +14,7 @@ export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   className = '',
   ...props
 }: ActionListItemProps) => (
-  <div className={css('pf-v5-c-action-list__item', className)} {...props}>
+  <div className={css(`${styles.actionList}__item`, className)} {...props}>
     {children}
   </div>
 );

packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionList } from '../ActionList';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionList data-testid="action-list" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list', () => {
+test(`Renders with class ${styles.actionList}`, () => {
   render(<ActionList>Test</ActionList>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list');
+  expect(screen.getByText('Test')).toHaveClass(styles.actionList);
 });
 
 test('Renders with custom class names provided via prop', () => {
@@ -25,16 +26,16 @@ test('Renders with custom class names provided via prop', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Does not render with class pf-m-icons by default', () => {
+test(`Does not render with class ${styles.modifiers.icons} by default`, () => {
   render(<ActionList>Test</ActionList>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-icons');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.icons);
 });
 
-test('Renders with class pf-m-icons when isIconList is true', () => {
+test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, () => {
   render(<ActionList isIconList={true}>Test</ActionList>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-icons');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
 test('Renders with inherited element props spread to the component', () => {

packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionListGroup } from '../ActionListGroup';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionListGroup data-testid="action-list-group" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list__group', () => {
+test(`Renders with class ${styles.actionListGroup}`, () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__group');
+  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
 });
 
 test('Renders with custom class names provided via prop', () => {

packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionListItem } from '../ActionListItem';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionListItem data-testid="action-list-item" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list__item', () => {
+test(`Renders with class ${styles.actionList}__item`, () => {
   render(<ActionListItem>Test</ActionListItem>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__item');
+  expect(screen.getByText('Test')).toHaveClass(`${styles.actionList}__item`);
 });
 
 test('Renders with custom class names provided via prop', () => {

packages/react-core/src/components/Alert/__tests__/Alert.test.tsx

@@ -6,6 +6,8 @@ import { act } from 'react-dom/test-utils';
 import { Alert, AlertVariant } from '../Alert';
 import { AlertContext } from '../AlertContext';
 import { capitalize } from '../../../helpers';
+import cssAlertTitleMaxLines from '@patternfly/react-tokens/dist/esm/c_alert__title_max_lines';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('../AlertToggleExpandButton', () => ({
   AlertToggleExpandButton: ({ isExpanded, onToggleExpand, ...props }) => (
@@ -34,18 +36,18 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-alert on the containing div', () => {
+test(`Renders with class ${styles.alert} on the containing div`, () => {
   render(
     <Alert title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass(styles.alert);
 });
 
-test('Renders with class pf-v5-c-alert__title on the div containing the title', () => {
+test(`Renders with class ${styles.alertTitle} on the div containing the title`, () => {
   render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass('pf-v5-c-alert__title');
+  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass(styles.alertTitle);
 });
 
 test('Renders with Custom hidden text of "Custom alert:"', () => {
@@ -199,14 +201,14 @@ test('Renders the element passed via the actionClose prop', () => {
   expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
 });
 
-test('Renders the actionClose element inside pf-v5-c-alert__action', () => {
+test(`Renders the actionClose element inside ${styles.alertAction}`, () => {
   render(
     <Alert title="Some title" actionClose="Action close">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByText('Action close')).toHaveClass('pf-v5-c-alert__action');
+  expect(screen.getByText('Action close')).toHaveClass(styles.alertAction);
 });
 
 test('Provides the actionClose element access to the title via a context', () => {
@@ -239,14 +241,14 @@ test('Renders the element passed via the actionLinks prop', () => {
   expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
 });
 
-test('Renders the actionLinks element inside pf-v5-c-alert__action-group', () => {
+test(`Renders the actionLinks element inside ${styles.alertActionGroup}`, () => {
   render(
     <Alert title="Some title" actionLinks="Action link">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByText('Action link')).toHaveClass('pf-v5-c-alert__action-group');
+  expect(screen.getByText('Action link')).toHaveClass(styles.alertActionGroup);
 });
 
 test('Renders children', () => {
@@ -255,10 +257,10 @@ test('Renders children', () => {
   expect(screen.getByText('Some alert')).toBeVisible();
 });
 
-test('Renders children inside pf-v5-c-alert__description', () => {
+test(`Renders children inside ${styles.alertDescription}`, () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
-  expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
+  expect(screen.getByText('Some alert')).toHaveClass(styles.alertDescription);
 });
 
 test('Renders with the aria label passed via prop', () => {
@@ -578,7 +580,7 @@ test('Renders titles with the expected truncation styling when truncateTitle is
   const title = screen.getByRole('heading');
 
   expect(title).toHaveClass('pf-m-truncate');
-  expect(title).toHaveAttribute('style', '--pf-v5-c-alert__title--max-lines: 3;');
+  expect(title).toHaveAttribute('style', `${cssAlertTitleMaxLines.name}: 3;`);
 });
 
 test('Passes customIcon value to AlertIcon', () => {
@@ -609,14 +611,14 @@ test('Renders with class pf-m-expandable when isExpandable = true', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expandable');
 });
 
-test('Renders AlertToggleExpandButton inside pf-v5-c-alert__toggle', () => {
+test(`Renders AlertToggleExpandButton inside ${styles.alertToggle}`, () => {
   render(
     <Alert isExpandable title="Some title">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-v5-c-alert__toggle');
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.alertToggle);
 });
 
 test('Does not render with class pf-m-expanded when AlertToggleExpandButton has not been clicked', () => {