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

package/src/components/Hint/__tests__/HintTitle.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/Hint/hint';
 
 import { HintTitle } from '../HintTitle';
 
@@ -16,12 +17,12 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__title', () => {
+test(`renders with class ${styles.hintTitle}`, () => {
   render(<HintTitle>Hint Body Test</HintTitle>);
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-v5-c-hint__title');
+  expect(body).toHaveClass(styles.hintTitle);
 });
 
 test('renders with custom class names provided via prop', () => {

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon } from '../Icon';
 import { CheckIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
   const { asFragment } = render(
@@ -19,9 +20,9 @@ test('checks basic icon structure', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('icon');
-  expect(iconContainer).toHaveClass('pf-v5-c-icon');
-  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__content');
-  expect(iconContent).toHaveClass('pf-v5-c-icon__content');
+  expect(iconContainer).toHaveClass(styles.icon);
+  const iconContent = iconContainer.querySelector(`.${styles.iconContent}`);
+  expect(iconContent).toHaveClass(styles.iconContent);
 });
 
 test('renders without children', () => {
@@ -47,7 +48,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-v5-c-icon__content');
+    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -59,7 +60,7 @@ test('check icon without iconSize', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-v5-c-icon__content');
+  const iconContainer = screen.getByTitle('no-icon-size').querySelector(`.${styles.iconContent}`);
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -70,7 +71,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector('.pf-v5-c-icon__progress');
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -82,7 +83,7 @@ test('check icon without progress icon size', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-v5-c-icon__progress');
+  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector(`.${styles.iconProgress}`);
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -116,7 +117,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
         <CheckIcon />
       </Icon>
     );
-    const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-v5-c-icon__content');
+    const iconContent = screen.getByTitle(`${status}-icon`).querySelector(`.${styles.iconContent}`);
 
     expect(iconContent).toHaveClass(`pf-m-${status}`);
   });
@@ -128,7 +129,7 @@ test('check icon without status', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContent = screen.getByTitle('no-status').querySelector('.pf-v5-c-icon__content');
+  const iconContent = screen.getByTitle('no-status').querySelector(`.${styles.iconContent}`);
   expect(Array.from(iconContent?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -162,8 +163,8 @@ test('sets isInProgress successfully', () => {
   const iconContainer = screen.getByTitle('progress-icon');
   expect(iconContainer).toHaveClass('pf-m-in-progress');
 
-  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__progress');
-  expect(iconContent).toHaveClass('pf-v5-c-icon__progress');
+  const iconContent = iconContainer.querySelector(`.${styles.iconProgress}`);
+  expect(iconContent).toHaveClass(styles.iconProgress);
 });
 
 test('check icon without isInProgress', () => {

package/src/components/JumpLinks/JumpLinks.tsx

@@ -227,7 +227,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       {...props}
     >
       <div className={styles.jumpLinksMain}>
-        <div className={css('pf-v5-c-jump-links__header')}>
+        <div className={css(`${styles.jumpLinks}__header`)}>
           {expandable && (
             <div className={styles.jumpLinksToggle}>
               <Button

package/src/components/Label/Label.tsx

@@ -7,6 +7,7 @@ import { Tooltip, TooltipPosition } from '../Tooltip';
 import { css } from '@patternfly/react-styles';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { useIsomorphicLayoutEffect } from '../../helpers';
+import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth';
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
@@ -230,7 +231,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         className={css(styles.labelText)}
         {...(textMaxWidth && {
           style: {
-            '--pf-v5-c-label__text--MaxWidth': textMaxWidth
+            [cssTextMaxWidth.name]: textMaxWidth
           } as React.CSSProperties
         })}
       >

package/src/components/Menu/Menu.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
+import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
@@ -177,7 +179,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
     if (
       (event.target as HTMLElement).closest(`.${styles.menu}`) !== this.activeMenu &&
-      !(event.target as HTMLElement).classList.contains('pf-v5-c-breadcrumb__link')
+      !(event.target as HTMLElement).classList.contains(breadcrumbStyles.breadcrumbLink)
     ) {
       this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
       this.setState({ disableHover: true });
@@ -190,8 +192,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const parentMenu = this.activeMenu;
     const key = event.key;
     const isFromBreadcrumb =
-      activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
-      activeElement.classList.contains('pf-v5-c-dropdown__toggle');
+      activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+      activeElement.classList.contains(dropdownStyles.dropdownToggle);
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -308,8 +310,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             }
             noHorizontalArrowHandling={
               document.activeElement &&
-              (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
-                document.activeElement.classList.contains('pf-v5-c-dropdown__toggle'))
+              (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+                document.activeElement.classList.contains(dropdownStyles.dropdownToggle))
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContent.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import { MenuContext } from './MenuContext';
+import cssHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_Height';
+import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_MaxHeight';
 
 export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
@@ -58,8 +60,8 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
           ref={(el) => refCallback(el, menuId, onGetMenuHeight)}
           style={
             {
-              ...(menuHeight && { '--pf-v5-c-menu__content--Height': menuHeight }),
-              ...(maxMenuHeight && { '--pf-v5-c-menu__content--MaxHeight': maxMenuHeight })
+              ...(menuHeight && { [cssHeight.name]: menuHeight }),
+              ...(maxMenuHeight && { [cssMaxHeight.name]: maxMenuHeight })
             } as React.CSSProperties
           }
         >

package/src/components/Menu/MenuSearchInput.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
 export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
   /** Items within input */
@@ -10,6 +11,6 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
 
 export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
-  <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
+  <div {...props} className={css(`${styles.menuSearch}-input`, props.className)} ref={ref} />
 ));
 MenuSearchInput.displayName = 'MenuSearchInput';

package/src/components/Menu/__mocks__/Menu.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuProps } from '../Menu';
+import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth';
 
 export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => (
   <>
@@ -7,6 +8,6 @@ export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...pro
     <div onClick={onSelect}>{'Mock item'}</div>
     <p>{`isPlain: ${isPlain}`}</p>
     <p>{`isScrollable: ${isScrollable}`}</p>
-    <p>{`minWidth: ${style?.['--pf-v5-c-menu--MinWidth']}`}</p>
+    <p>{`minWidth: ${style?.[cssMenuMinWidth.name]}`}</p>
   </>
 );

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -1,3 +1,4 @@
-#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
-    vertical-align: bottom;
+#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle,
+#ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
+  vertical-align: bottom;
 }

package/src/components/Modal/ModalBoxHeader.tsx

@@ -21,7 +21,7 @@ export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
     {help && (
       <React.Fragment>
         <div className={css(styles.modalBoxHeaderMain)}>{children}</div>
-        <div className="pf-v5-c-modal-box__header-help">{help}</div>
+        <div className={`${styles.modalBoxHeader}-help`}>{help}</div>
       </React.Fragment>
     )}
     {!help && children}

package/src/components/Modal/examples/Modal.md

@@ -10,6 +10,8 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 

package/src/components/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -14,14 +15,14 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
       <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
         Custom header/footer modal
       </Title>
-      <p className="pf-v5-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
+      <p className={spacing.ptSm}>Allows for custom content in the header and/or footer by passing components.</p>
     </React.Fragment>
   );
 
   const footer = (
     <Title headingLevel="h4" size={TitleSizes.md}>
       <WarningTriangleIcon />
-      <span className="pf-v5-u-pl-sm">Custom modal footer.</span>
+      <span className={spacing.plSm}>Custom modal footer.</span>
     </Title>
   );
 

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 export const ModalWithForm: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
@@ -79,7 +80,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for name field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-name"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -128,7 +129,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for e-mail field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-email"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -176,7 +177,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for address field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-address"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -75,7 +75,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
             isExpanded={isOpen}
             onToggle={toggleExpandableSection}
           >
-            <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+            <ul className={`${styles.multipleFileUploadStatus}-list`} role="list" aria-label={ariaLabel}>
               {children}
             </ul>
           </ExpandableSection>

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -62,7 +62,8 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
       const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
-      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles]);
+      // eslint-disable-next-line
+      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles as any]);
     } else {
       setCurrentFiles((prevFiles) => [...prevFiles, ...files]);
     }

package/src/components/NotificationDrawer/NotificationDrawerGroup.tsx

@@ -111,7 +111,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
             <Badge isRead={isRead}>{count}</Badge>
           </div>
 
-          <span className="pf-v5-c-notification-drawer__group-toggle-icon">
+          <span className={styles.notificationDrawerGroupToggleIcon}>
             <AngleRightIcon />
           </span>
         </button>

package/src/components/NotificationDrawer/NotificationDrawerList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 
 export interface NotificationDrawerListProps extends React.HTMLProps<HTMLUListElement> {
   /**  Content rendered inside the notification drawer list body */
@@ -22,7 +23,7 @@ export const NotificationDrawerList: React.FunctionComponent<NotificationDrawerL
 }: NotificationDrawerListProps) => (
   <ul
     {...props}
-    className={css('pf-v5-c-notification-drawer__list', className)}
+    className={css(`${styles.notificationDrawer}__list`, className)}
     hidden={isHidden}
     role="list"
     aria-label={ariaLabel}

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -31,9 +31,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   ...props
 }: NotificationDrawerListItemProps) => {
   const onKeyDown = (event: React.KeyboardEvent) => {
-    if (
-      !(event.target as HTMLElement).parentElement.classList.contains('pf-v5-c-notification-drawer__list-item-action')
-    ) {
+    if (!(event.target as HTMLElement).parentElement.classList.contains(styles.notificationDrawerListItemAction)) {
       // Accessibility function. Click on the list item when pressing Enter or Space on it.
       if (event.key === 'Enter' || event.key === ' ') {
         (event.target as HTMLElement).click();

package/src/components/NumberInput/NumberInput.tsx

@@ -7,6 +7,7 @@ import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
 import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_number_input_c_form_control_width_chars';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
@@ -108,7 +109,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
       className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
       {...(widthChars && {
         style: {
-          '--pf-v5-c-number-input--c-form-control--width-chars': widthChars,
+          [cssFormControlWidthChars.name]: widthChars,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Page/__tests__/PageSidebarBody.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageSidebarBody } from '../PageSidebarBody';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 test('Renders without children', () => {
   render(
@@ -18,10 +19,10 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
+test(`Renders with class ${styles.pageSidebarBody} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.pageSidebarBody);
 });
 
 test('Renders with custom class', () => {
@@ -30,40 +31,40 @@ test('Renders with custom class', () => {
   expect(screen.getByText('Test')).toHaveClass('tester');
 });
 
-test('Renders without pf-m-page-insets by default', () => {
+test(`Renders without ${styles.modifiers.pageInsets} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders with pf-m-page-insets when usePageInsets is passed', () => {
+test(`Renders with ${styles.modifiers.pageInsets} when usePageInsets is passed`, () => {
   render(<PageSidebarBody usePageInsets>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders without pf-m-fill by default', () => {
+test(`Renders without ${styles.modifiers.fill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders with pf-m-fill when isFilled={true} is passed', () => {
+test(`Renders with ${styles.modifiers.fill} when isFilled={true} is passed`, () => {
   render(<PageSidebarBody isFilled={true}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders without pf-m-no-fill by default', () => {
+test(`Renders without ${styles.modifiers.noFill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noFill);
 });
 
-test('Renders with pf-m-no-fill when isFilled={false} is passed', () => {
+test(`Renders with ${styles.modifiers.noFill} when isFilled={false} is passed`, () => {
   render(<PageSidebarBody isFilled={false}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noFill);
 });
 
 test('Renders with additional props', () => {

package/src/components/Page/examples/Page.md

@@ -17,6 +17,7 @@ propComponents:
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import './page.css';
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,6 +17,8 @@ import {
   CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+/* eslint-disable camelcase */
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
@@ -67,8 +69,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
-            section.
+            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Panel/PanelMain.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Panel/panel';
 import { css } from '@patternfly/react-styles';
+import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
 
 export interface PanelMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the panel main div */
@@ -19,7 +20,7 @@ export const PanelMain: React.FunctionComponent<PanelMainProps> = ({
 }: PanelMainProps) => (
   <div
     className={css(styles.panelMain, className)}
-    style={{ '--pf-v5-c-panel__main--MaxHeight': maxHeight } as React.CSSProperties}
+    style={{ [cssMaxHeight.name]: maxHeight } as React.CSSProperties}
     {...props}
   >
     {children}

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

@@ -5,6 +5,7 @@ import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
 import userEvent from '@testing-library/user-event';
 import { useEffect } from 'react';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -20,14 +21,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel', () => {
+test(`Renders with the class ${styles.panel}`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
+  expect(screen.getByText('Test')).toHaveClass(styles.panel);
 });
 
-test('Renders with only the class pf-v5-c-panel by default', () => {
+test(`Renders with only the class ${styles.panel} by default`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panel, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -35,19 +36,19 @@ test('Renders with custom class name when className prop is passed', () => {
   expect(screen.getByText('Test')).toHaveClass('test-class');
 });
 
-test('Renders with class name pf-m-raised when variant is raised', () => {
+test(`Renders with class name ${styles.modifiers.raised} when variant is raised`, () => {
   render(<Panel variant="raised">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.raised);
 });
 
-test('Renders with class name pf-m-bordered when variant is bordered', () => {
+test(`Renders with class name ${styles.modifiers.bordered} when variant is bordered`, () => {
   render(<Panel variant="bordered">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
-test('Renders with class name pf-m-scrollable when isScrollable is true', () => {
+test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
 });
 
 test('Renders with ref', async () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelFooter } from '../PanelFooter';
+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__footer', () => {
+test(`Renders with the class ${styles.panelFooter}`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter);
 });
 
-test('Renders with only the class pf-v5-c-panel__footer by default', () => {
+test(`Renders with only the class ${styles.panelFooter} by default`, () => {
   render(<PanelFooter>Test</PanelFooter>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelFooter, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PanelHeader } from '../PanelHeader';
+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__header', () => {
+test(`Renders with the class ${styles.panelHeader}`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader);
 });
 
-test('Renders with only the class pf-v5-c-panel__header by default', () => {
+test(`Renders with only the class ${styles.panelHeader} by default`, () => {
   render(<PanelHeader>Test</PanelHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panelHeader, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {