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

package/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockCode.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <pre
+    class="pf-v5-c-code-block__pre"
+  >
+    <code
+      class="pf-v5-c-code-block__code"
+    >
+      children
+    </code>
+  </pre>
+</DocumentFragment>
+`;

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

@@ -14,6 +14,7 @@ import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
 import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
 import { MenuToggle } from '../../MenuToggle';
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -176,7 +177,7 @@ describe('DataList', () => {
         test
       </DataListItem>
     );
-    expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-data-list__item pf-m-expanded');
+    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
   });
 
   test('Item', () => {
@@ -233,8 +234,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 
@@ -256,8 +257,8 @@ describe('DataList', () => {
       const dataListCell = screen.getByTestId(testId);
 
       testCase.class === ''
-        ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-        : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+        ? expect(dataListCell).toHaveClass(styles.dataListCell)
+        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
     });
   });
 

package/src/components/DataList/examples/DataList.md

@@ -23,6 +23,10 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Examples
 

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -19,6 +19,11 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+/* eslint-disable camelcase */
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -45,9 +50,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: 'var(--pf-v5-global--Color--100)',
-    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
-    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
+    color: global_Color_100.var,
+    backgroundColor: global_BackgroundColor_200.var,
+    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
   };
 
   return (

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
+import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_width_chars';
 
 /** Props that customize the requirement of a date */
 export interface DatePickerRequiredObject {
@@ -131,7 +132,7 @@ const DatePickerBase = (
   const [pristine, setPristine] = React.useState(true);
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
-  const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
+  const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();

package/src/components/DescriptionList/DescriptionList.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
+import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
 export interface BreakpointModifiers {
   default?: string;
@@ -102,19 +105,19 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
+      ...setBreakpointModifiers(cssGridTemplateColumnsMin.name, autoFitMinModifier)
     };
   }
   if (termWidth) {
     style = {
       ...style,
-      ...{ '--pf-v5-c-description-list__term--width': termWidth }
+      ...{ [cssTermWidth.name]: termWidth }
     };
   }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
-      ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier)
+      ...setBreakpointModifiers(cssHorizontalTermWidth.name, horizontalTermWidthModifier)
     };
   }
 

package/src/components/DragDrop/Draggable.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
+import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */
@@ -276,7 +277,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       left: rect.x,
       width: rect.width,
       height: rect.height,
-      '--pf-v5-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging),
+      [cssDraggingBackgroundColor.name]: getInheritedBackgroundColor(dragging),
       position: 'fixed',
       zIndex: 5000
     } as any;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -5,6 +5,9 @@ import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
+import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
+import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
+import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -21,7 +24,7 @@ export interface DrawerPanelFocusTrapObject {
   'aria-labelledby'?: string;
 }
 
-export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onResize'> {
   /** Additional classes added to the drawer. */
   className?: string;
   /** ID of the drawer panel */
@@ -227,7 +230,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
@@ -306,19 +309,19 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
-    panel.current.style.setProperty('--pf-v5-c-drawer__panel--md--FlexBasis', newSize + 'px');
+    panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
     currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};
   if (defaultSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis'] = defaultSize;
+    boundaryCssVars[cssPanelMdFlexBasis.name] = defaultSize;
   }
   if (minSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--min'] = minSize;
+    boundaryCssVars[cssPanelMdFlexBasisMin.name] = minSize;
   }
   if (maxSize) {
-    boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--max'] = maxSize;
+    boundaryCssVars[cssPanelMdFlexBasisMax.name] = maxSize;
   }
 
   const isValidFocusTrap = focusTrap?.enabled && !isStatic;

package/src/components/Drawer/examples/Drawer.md

@@ -18,6 +18,8 @@ propComponents:
 section: components
 ---
 
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Examples
 
 ### Basic

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -8,7 +8,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
-  Button
+  Button,
+  Title
 } from '@patternfly/react-core';
 
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
@@ -30,9 +31,9 @@ export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const panelContent = (
     <DrawerPanelContent>
       <DrawerHead>
-        <h3 className="pf-v5-c-title pf-m-2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+        <Title headingLevel="h3" size="2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer title{' '}
-        </h3>
+        </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   Button
 } from '@patternfly/react-core';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -44,7 +45,7 @@ export const DrawerStatic: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button className="pf-v5-u-hidden-on-md" aria-expanded={isExpanded} onClick={onClick}>
+      <Button className={accessibility.hiddenOnMd} aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}>

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Tooltip } from '../Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 
 /** Renders an individual control button for moving selected options between each
  * dual list selector pane.
@@ -40,7 +41,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -7,6 +7,7 @@ import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
 import { SearchInput } from '../SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
 
 /** Acts as the container for a list of options that are either available or chosen,
  * depending on the pane type (available or chosen). A search input and other actions,
@@ -151,7 +152,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-v5-c-dual-list-selector__title">
+          <div className={`${styles.dualListSelector}__title`}>
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>
@@ -201,7 +202,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             id={`${id}-list`}
             isDisabled={isDisabled}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {children}
@@ -212,7 +213,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             aria-labelledby={`${id}-status`}
             id={`${id}-list`}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {options.length > 0 ? (

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
+  <div className={css(`${styles.emptyState}__header`, className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-v5-c-empty-state__title')}>
+      <div className={css(`${styles.emptyState}__title`)}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

package/src/components/EmptyState/EmptyStateIcon.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { Spinner } from '../Spinner';
+import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color';
 
 export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
   /** Changes the color of the icon.  */
@@ -27,8 +28,7 @@ export const EmptyStateIcon: React.FunctionComponent<EmptyStateIconProps> = ({
   return (
     <div
       className={css(styles.emptyStateIcon)}
-      {...(color &&
-        !iconIsSpinner && { style: { ['--pf-v5-c-empty-state__icon--Color']: color } as React.CSSProperties })}
+      {...(color && !iconIsSpinner && { style: { [cssIconColor.name]: color } as React.CSSProperties })}
     >
       <IconComponent className={className} aria-hidden={!iconIsSpinner} {...props} />
     </div>

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

@@ -11,6 +11,7 @@ import { Button } from '../../Button';
 import { EmptyStateHeader } from '../EmptyStateHeader';
 import { EmptyStateFooter } from '../EmptyStateFooter';
 import { EmptyStateIcon } from '../../../../dist/esm';
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 describe('EmptyState', () => {
   test('Main', () => {
@@ -64,12 +65,12 @@ describe('EmptyState', () => {
 
   test('Body', () => {
     render(<EmptyStateBody className="custom-empty-state-body" data-testid="body-test-id" />);
-    expect(screen.getByTestId('body-test-id')).toHaveClass('pf-v5-c-empty-state__body custom-empty-state-body');
+    expect(screen.getByTestId('body-test-id')).toHaveClass(`${styles.emptyStateBody} custom-empty-state-body`);
   });
 
   test('Actions', () => {
     render(<EmptyStateActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass('pf-v5-c-empty-state__actions');
+    expect(screen.getByTestId('actions-test-id')).toHaveClass(styles.emptyStateActions);
   });
 
   test('Full height', () => {
@@ -88,9 +89,7 @@ describe('EmptyState', () => {
 
   test('Header with title text renders heading level 1 by default', () => {
     render(<EmptyStateHeader titleText="Empty state" />);
-    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Header renders custom class passed via titleClassName', () => {
@@ -100,9 +99,7 @@ describe('EmptyState', () => {
 
   test('Header renders the title as other heading levels when one is passed using headingLevel', () => {
     render(<EmptyStateHeader titleText="Empty state" headingLevel="h3" />);
-    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Headers render children', () => {

package/src/components/EmptyState/examples/EmptyState.md

@@ -7,6 +7,7 @@ propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyState
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 ## Examples
 ### Basic

package/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+/* eslint-disable camelcase */
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
   <EmptyState>
     <EmptyStateHeader
       titleText="Custom icon color"
       headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color="var(--pf-v5-global--success-color--100)" />}
+      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
     />
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -28,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className="pf-v5-u-m-md">
+        <div className={spacing.mMd}>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FileUploadField, Checkbox } from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
@@ -110,7 +111,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
       >
         {children && (
-          <div className="pf-v5-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>
+          <div className={spacing.mMd}>(A custom preview of the uploaded file can be passed as children)</div>
         )}
       </FileUploadField>
     </div>

package/src/components/Form/Form.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
+import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth';
 
 export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Anything that can be rendered as Form content. */
@@ -30,7 +31,7 @@ const FormBase: React.FunctionComponent<FormProps> = ({
     noValidate
     {...(maxWidth && {
       style: {
-        '--pf-v5-c-form--m-limit-width--MaxWidth': maxWidth,
+        [cssMaxWidth.name]: maxWidth,
         ...props.style
       } as React.CSSProperties
     })}

package/src/components/Form/FormAlert.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export interface FormAlertProps extends React.HTMLProps<HTMLDivElement> {
   /** An inline PatternFly Alert. */
@@ -15,7 +16,7 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
 }: FormAlertProps) => (
   // There are currently no associated styles with the pf-v5-c-form_alert class.
   // Therefore, it does not exist in react-styles
-  <div {...props} className={css('pf-v5-c-form__alert', className)}>
+  <div {...props} className={css(`${styles.form}__alert`, className)}>
     {children}
   </div>
 );

package/src/components/Form/examples/Form.md

@@ -40,6 +40,7 @@ Radio
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 

package/src/components/Form/examples/FormBasic.tsx

@@ -13,6 +13,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -68,7 +69,7 @@ export const FormBasic: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-01"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -9,6 +9,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -55,7 +56,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="form-group-label-info"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -13,6 +13,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -68,7 +69,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-02"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
 
 test('renders without children', () => {
   render(<Hint data-testid="Hint" />);
@@ -14,12 +15,12 @@ test('renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint', () => {
+test(`renders with class ${styles.hint}`, () => {
   render(<Hint>Test</Hint>);
 
   const hint = screen.getByText('Test');
 
-  expect(hint).toHaveClass('pf-v5-c-hint');
+  expect(hint).toHaveClass(styles.hint);
 });
 
 test('renders with custom class names provided via prop', () => {
@@ -46,12 +47,12 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__actions if there is an action prop', () => {
+test(`renders with class ${styles.hintActions} if there is an action prop`, () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');
 
-  expect(hint).toHaveClass('pf-v5-c-hint__actions');
+  expect(hint).toHaveClass(styles.hintActions);
 });
 
 test('renders with inherited element props spread to the component', () => {

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

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