fix(Multiple): update old component classnames

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

@@ -605,7 +605,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
               }
               {<div className={css(styles.codeEditorHeaderMain)}>{headerMainContent}</div>}
               {!!shortcutsPopoverProps.bodyContent && (
-                <div className="pf-c-code-editor__keyboard-shortcuts">
+                <div className="pf-v5-c-code-editor__keyboard-shortcuts">
                   <Popover {...shortcutsPopoverProps}>
                     <Button variant={ButtonVariant.link} icon={<HelpIcon />}>
                       {shortcutsPopoverButtonText}
@@ -647,7 +647,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
                   {...getRootProps({
                     onClick: (event) => event.preventDefault() // Prevents clicking TextArea from opening file dialog
                   })}
-                  className={`pf-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`}
+                  className={`pf-v5-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`}
                 >
                   {editorHeader}
                   <div className={css(styles.codeEditorMain)}>

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
     class="pf-v5-c-code-editor pf-m-read-only"
   >
     <div
-      class="pf-c-file-upload false false"
+      class="pf-v5-c-file-upload false false"
       role="presentation"
       tabindex="0"
     >

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-c-about-modal-box__body')}>
+    <div className={css('pf-v5-c-about-modal-box__body')}>
       {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxContent Test 1`] = `
     id="id"
   >
     <div
-      class="pf-c-about-modal-box__body"
+      class="pf-v5-c-about-modal-box__body"
     >
       <div
         class="pf-v5-c-content"

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

@@ -34,7 +34,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion', () => {
+test('Renders with class name pf-v5-c-accordion', () => {
   render(<Accordion>Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion');

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

@@ -85,7 +85,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion__expandable-content', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>

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

@@ -19,7 +19,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-accordion__expandable-content-body', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content-body', () => {
   render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__expandable-content-body');

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

@@ -42,7 +42,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-c-accordion__toggle', () => {
+test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -66,7 +66,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-c-accordion__toggle-text', () => {
+test('Renders with children inside class pf-v5-c-accordion__toggle-text', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -78,7 +78,7 @@ test('Renders with children inside class pf-c-accordion__toggle-text', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__toggle-text');
 });
 
-test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">

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

@@ -13,7 +13,7 @@ export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   className = '',
   ...props
 }: ActionListItemProps) => (
-  <div className={css('pf-c-action-list__item', className)} {...props}>
+  <div className={css('pf-v5-c-action-list__item', className)} {...props}>
     {children}
   </div>
 );

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

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list', () => {
+test('Renders with class pf-v5-c-action-list', () => {
   render(<ActionList>Test</ActionList>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list');

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

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__group', () => {
+test('Renders with class pf-v5-c-action-list__group', () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__group');

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

@@ -13,10 +13,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__item', () => {
+test('Renders with class pf-v5-c-action-list__item', () => {
   render(<ActionListItem>Test</ActionListItem>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__item');
 });
 
 test('Renders with custom class names provided via prop', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-action-list__item"
+    class="pf-v5-c-action-list__item"
   >
     test
   </div>

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

@@ -34,7 +34,7 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-c-alert on the containing div', () => {
+test('Renders with class pf-v5-c-alert on the containing div', () => {
   render(
     <Alert title="Some title" data-testid="Alert-test-id">
       Some alert
@@ -43,7 +43,7 @@ test('Renders with class pf-c-alert on the containing div', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
 });
 
-test('Renders with class pf-c-alert__title on the div containing the title', () => {
+test('Renders with class pf-v5-c-alert__title 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');
 });
@@ -199,7 +199,7 @@ test('Renders the element passed via the actionClose prop', () => {
   expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
 });
 
-test('Renders the actionClose element inside pf-c-alert__action', () => {
+test('Renders the actionClose element inside pf-v5-c-alert__action', () => {
   render(
     <Alert title="Some title" actionClose="Action close">
       Some alert
@@ -239,7 +239,7 @@ test('Renders the element passed via the actionLinks prop', () => {
   expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
 });
 
-test('Renders the actionLinks element inside pf-c-alert__action-group', () => {
+test('Renders the actionLinks element inside pf-v5-c-alert__action-group', () => {
   render(
     <Alert title="Some title" actionLinks="Action link">
       Some alert
@@ -255,7 +255,7 @@ test('Renders children', () => {
   expect(screen.getByText('Some alert')).toBeVisible();
 });
 
-test('Renders children inside pf-c-alert__description', () => {
+test('Renders children inside pf-v5-c-alert__description', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
   expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
@@ -609,7 +609,7 @@ 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-c-alert__toggle', () => {
+test('Renders AlertToggleExpandButton inside pf-v5-c-alert__toggle', () => {
   render(
     <Alert isExpandable title="Some title">
       Some alert

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

@@ -65,7 +65,7 @@ test('Renders with the passed custom icon when one is passed rather than the ico
   expect(screen.getByText('Custom icon')).toBeVisible();
 });
 
-test('Renders the icon inside class pf-c-alert__icon', () => {
+test('Renders the icon inside class pf-v5-c-alert__icon', () => {
   render(<AlertIcon variant="custom" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveClass('pf-v5-c-alert__icon');

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

@@ -108,7 +108,7 @@ test('Renders a Button with variant: ButtonVariant.plain', () => {
   expect(screen.getByText('variant: plain')).toBeVisible();
 });
 
-test('Renders with the toggle icon inside class pf-c-alert__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-alert__toggle-icon', () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
       <AlertToggleExpandButton />

packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -10,7 +10,7 @@ interface AlertInfo {
 export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
   const getUniqueId: () => number = () => new Date().getTime();
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const addAlert = (alertInfo: AlertInfo) => {
     setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);

packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx

@@ -14,7 +14,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
   const [isRunning, setIsRunning] = React.useState(false);
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -20,7 +20,7 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
 

packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -20,7 +20,7 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -34,7 +34,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx

@@ -20,7 +20,7 @@ export const AlertGroupToast: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -34,7 +34,7 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-backdrop', () => {
+test('Renders with the pf-v5-c-backdrop', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
 });
 
-test('Renders with only the class pf-c-backdrop by default', () => {
+test('Renders with only the class pf-v5-c-backdrop by default', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
 });

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-badge', () => {
+test('Renders with class name pf-v5-c-badge', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
 });

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-banner', () => {
+test('Renders with class name pf-v5-c-banner', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
 });

packages/react-core/src/components/Brand/Brand.tsx

@@ -56,7 +56,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   }
 
   return (
-    /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
+    /** the brand component currently contains no styling the 'pf-v5-c-brand' string will be used for the className */
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}

packages/react-core/src/components/CodeBlock/CodeBlockAction.tsx

@@ -13,7 +13,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-c-code-block__actions-item', className)} {...props}>
+  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
     {children}
   </div>
 );

packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
         class="pf-v5-c-code-block__actions"
       >
         <div
-          class="pf-c-code-block__actions-item"
+          class="pf-v5-c-code-block__actions-item"
         >
           button
         </div>
@@ -53,7 +53,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
 exports[`CodeBlockAction renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-code-block__actions-item"
+    class="pf-v5-c-code-block__actions-item"
   >
     action
   </div>

packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx

@@ -15,7 +15,7 @@ export const DescriptionListDescription: React.FunctionComponent<DescriptionList
   ...props
 }: DescriptionListDescriptionProps) => (
   <dd className={css(styles.descriptionListDescription, className)} {...props}>
-    <div className={'pf-c-description-list__text'}>{children}</div>
+    <div className={css(styles.descriptionListText)}>{children}</div>
   </dd>
 );
 DescriptionListDescription.displayName = 'DescriptionListDescription';

packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap

@@ -72,7 +72,7 @@ exports[`Description List Description 1`] = `
     class="pf-v5-c-description-list__description custom-description-list-description"
   >
     <div
-      class="pf-c-description-list__text"
+      class="pf-v5-c-description-list__text"
     >
       test
     </div>

packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -40,7 +40,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -30,9 +30,9 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !wrapperRef.current ||
-      (wrapperRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls') &&
-        !Array.from(wrapperRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__controls')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls')
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
         ))
     ) {
       return;