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,
@@ -609,7 +610,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}
@@ -651,7 +652,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', () => {