From 4ec37e0995cafdd8d5165d20e2c015a970e899e4 Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Wed, 17 May 2023 12:42:26 -0500
Subject: [PATCH 1/6] fix(Multiple): update old component classnames

---
 .../AboutModal/AboutModalBoxContent.tsx       |  2 +-
 .../AboutModalBoxContent.test.tsx.snap        |  2 +-
 .../Accordion/__tests__/Accordion.test.tsx    |  2 +-
 .../__tests__/AccordionContent.test.tsx       |  2 +-
 .../AccordionExpandedContentBody.test.tsx     |  2 +-
 .../__tests__/AccordionToggle.test.tsx        |  6 +-
 .../components/ActionList/ActionListItem.tsx  |  2 +-
 .../ActionList/__tests__/ActionList.test.tsx  |  2 +-
 .../__tests__/ActionListGroup.test.tsx        |  2 +-
 .../__tests__/ActionListItem.test.tsx         |  4 +-
 .../ActionListItem.test.tsx.snap              |  2 +-
 .../components/Alert/__tests__/Alert.test.tsx | 12 +--
 .../Alert/__tests__/AlertIcon.test.tsx        |  2 +-
 .../AlertToggleExpandButton.test.tsx          |  2 +-
 .../Alert/examples/AlertDynamicLiveRegion.tsx |  2 +-
 .../Alert/examples/AlertGroupAsync.tsx        |  2 +-
 .../examples/AlertGroupMultipleDynamic.tsx    |  2 +-
 .../examples/AlertGroupSingularDynamic.tsx    |  2 +-
 .../AlertGroupSingularDynamicOverflow.tsx     |  2 +-
 .../Alert/examples/AlertGroupToast.tsx        |  2 +-
 .../AlertGroupToastOverflowCapture.tsx        |  2 +-
 .../Backdrop/__tests__/Backdrop.test.tsx      |  4 +-
 .../components/Badge/__tests__/Badge.test.tsx |  2 +-
 .../Banner/__tests__/Banner.test.tsx          |  2 +-
 .../react-core/src/components/Brand/Brand.tsx |  2 +-
 .../components/CodeBlock/CodeBlockAction.tsx  |  2 +-
 .../__snapshots__/CodeBlock.test.tsx.snap     |  4 +-
 .../DescriptionListDescription.tsx            |  2 +-
 .../DescriptionList.test.tsx.snap             |  2 +-
 .../DualListSelectorControl.tsx               |  2 +-
 .../DualListSelectorControlsWrapper.tsx       |  6 +-
 .../DualListSelectorListWrapper.tsx           | 14 +--
 .../DualListSelector/DualListSelectorPane.tsx |  2 +-
 .../DualListSelector.test.tsx.snap            | 72 +++++++--------
 .../EmptyState/EmptyStateHeader.tsx           |  4 +-
 .../__snapshots__/EmptyState.test.tsx.snap    | 22 ++---
 .../src/components/Form/FormAlert.tsx         |  4 +-
 .../__snapshots__/FormAlert.test.tsx.snap     |  2 +-
 .../components/Hint/__tests__/Hint.test.tsx   |  4 +-
 .../Hint/__tests__/HintBody.test.tsx          |  2 +-
 .../Hint/__tests__/HintFooter.test.tsx        |  2 +-
 .../Hint/__tests__/HintTitle.test.tsx         |  2 +-
 .../src/components/JumpLinks/JumpLinks.tsx    |  2 +-
 .../__snapshots__/JumpLinks.test.tsx.snap     | 10 +--
 .../react-core/src/components/Menu/Menu.tsx   | 34 ++++---
 .../src/components/Menu/MenuGroup.tsx         |  2 +-
 .../src/components/Menu/MenuItem.tsx          |  4 +-
 .../src/components/Menu/MenuSearchInput.tsx   |  2 +-
 .../MultipleFileUploadStatus.tsx              |  2 +-
 .../MultipleFileUploadStatus.test.tsx.snap    |  8 +-
 .../react-core/src/components/Nav/NavItem.tsx |  6 +-
 .../NotificationDrawerList.tsx                |  2 +-
 .../NotificationDrawerList.test.tsx.snap      |  4 +-
 .../Page/__tests__/PageSidebarBody.test.tsx   |  2 +-
 .../components/Panel/__tests__/Panel.test.tsx |  4 +-
 .../Panel/__tests__/PanelFooter.test.tsx      |  4 +-
 .../Panel/__tests__/PanelHeader.test.tsx      |  4 +-
 .../Panel/__tests__/PanelMain.test.tsx        |  4 +-
 .../Panel/__tests__/PanelMainBody.test.tsx    |  4 +-
 .../__tests__/ProgressHelperText.test.tsx     |  2 +-
 .../__tests__/ProgressStep.test.tsx           |  8 +-
 .../__tests__/ProgressStepper.test.tsx        |  4 +-
 .../Sidebar/__tests__/Sidebar.test.tsx        |  4 +-
 .../Sidebar/__tests__/SidebarContent.test.tsx |  4 +-
 .../Sidebar/__tests__/SidebarPanel.test.tsx   |  4 +-
 .../src/components/Tabs/TabContent.tsx        |  4 +-
 .../react-core/src/components/Tabs/Tabs.tsx   |  2 +-
 .../__snapshots__/TabContent.test.tsx.snap    |  2 +-
 .../Tabs/__tests__/OverflowTab.test.tsx       |  6 +-
 .../__snapshots__/Tabs.test.tsx.snap          | 90 +++++++++----------
 .../Text/__tests__/TextContent.test.tsx       |  2 +-
 .../__tests__/TextInputGroup.test.tsx         |  2 +-
 .../__tests__/TextInputGroupMain.test.tsx     |  8 +-
 .../TextInputGroupUtilities.test.tsx          |  2 +-
 .../src/components/Timestamp/Timestamp.tsx    |  2 +-
 .../Timestamp/__tests__/Timestamp.test.tsx    |  6 +-
 .../components/Title/__tests__/Title.test.tsx |  4 +-
 .../src/components/TreeView/TreeViewList.tsx  |  2 +-
 .../__snapshots__/TreeView.test.tsx.snap      | 40 ++++-----
 .../Truncate/__tests__/Truncate.test.tsx      |  4 +-
 80 files changed, 257 insertions(+), 259 deletions(-)

diff --git a/packages/react-core/src/components/AboutModal/AboutModalBoxContent.tsx b/packages/react-core/src/components/AboutModal/AboutModalBoxContent.tsx
index 15faa389c35..0c37db076ca 100644
--- a/packages/react-core/src/components/AboutModal/AboutModalBoxContent.tsx
+++ b/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>
diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap
index 722caf78b74..8bd73134f9a 100644
--- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap
+++ b/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"
diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
index 9bb8aac21cf..85903f5bbd2 100644
--- a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
index 9ef10489638..74a2b1a33a9 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
+++ b/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>
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx
index 161a31ae0cd..de1481577d7 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
index 4c27f4e2782..2beb7c10bce 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
+++ b/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">
diff --git a/packages/react-core/src/components/ActionList/ActionListItem.tsx b/packages/react-core/src/components/ActionList/ActionListItem.tsx
index ac796de70fc..da24cc5d6cb 100644
--- a/packages/react-core/src/components/ActionList/ActionListItem.tsx
+++ b/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>
 );
diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx
index d0413b686ac..553a7c88c08 100644
--- a/packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx
index af6fc98b990..c7307824391 100644
--- a/packages/react-core/src/components/ActionList/__tests__/ActionListGroup.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx b/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx
index 7c11ac5859f..57bfd9e961a 100644
--- a/packages/react-core/src/components/ActionList/__tests__/ActionListItem.test.tsx
+++ b/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', () => {
diff --git a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap b/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap
index 4ac9e257f7a..ff9e5225792 100644
--- a/packages/react-core/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap
+++ b/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>
diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
index e420035e7e3..b036aeda9e6 100644
--- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
+++ b/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
diff --git a/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx
index 3dccd8217dc..b7b34b09f46 100644
--- a/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx
index 100533e2c52..1ed71db4f80 100644
--- a/packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx
+++ b/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 />
diff --git a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
index dd2c00c92f0..5438f14cf82 100644
--- a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx
+++ b/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]);
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
index 30f944c2fff..b302808bc1f 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
index 8e0058ac254..ba5c9060b09 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
index cbb80001cbb..d2d339d8286 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
index a7597b23dbe..ebf127e8e82 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
index 4df6acbf915..abf012abb88 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
index 7e1beb8826c..cadaa98b8b2 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
+++ b/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();
 
diff --git a/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx b/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx
index e213736e850..c4bb8386cf7 100644
--- a/packages/react-core/src/components/Backdrop/__tests__/Backdrop.test.tsx
+++ b/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 });
 });
diff --git a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
index 0d25a62f736..0fdeb96dd03 100644
--- a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
+++ b/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');
 });
diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
index 403a850b18b..83d0efc3ce5 100644
--- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
+++ b/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');
 });
diff --git a/packages/react-core/src/components/Brand/Brand.tsx b/packages/react-core/src/components/Brand/Brand.tsx
index 3b8a5752beb..dfed3aa33c9 100644
--- a/packages/react-core/src/components/Brand/Brand.tsx
+++ b/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)}
diff --git a/packages/react-core/src/components/CodeBlock/CodeBlockAction.tsx b/packages/react-core/src/components/CodeBlock/CodeBlockAction.tsx
index e1f609098e5..6802acedfdc 100644
--- a/packages/react-core/src/components/CodeBlock/CodeBlockAction.tsx
+++ b/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>
 );
diff --git a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap
index 4ef2d0dca23..35d5269d68f 100644
--- a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap
+++ b/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>
diff --git a/packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx b/packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx
index 1bee65c930c..205c0ea3268 100644
--- a/packages/react-core/src/components/DescriptionList/DescriptionListDescription.tsx
+++ b/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';
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
index 62e1bc126b5..b9bde9f6974 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
+++ b/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>
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
index c6ccaf748e3..39bfe859e39 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
+++ b/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}
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
index cca6c442c06..835879f250a 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
+++ b/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;
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
index 99cddeb98e5..642b53b0ed0 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
@@ -51,9 +51,9 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
-      (menuRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu') &&
-        !Array.from(menuRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu')
+      (menuRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`) &&
+        !Array.from(menuRef.current.getElementsByClassName(styles.dualListSelectorMenu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`)
         ))
     ) {
       return;
@@ -62,7 +62,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     const validOptions = isTree
       ? (Array.from(
           menuRef.current.querySelectorAll(
-            '.pf-c-dual-list-selector__item-toggle, .pf-c-dual-list-selector__item-check > input'
+            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
           )
         ) as Element[])
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
@@ -74,14 +74,14 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
       validOptions,
       (element: Element) => activeElement.contains(element),
       (element: Element) => {
-        if (element.classList.contains('.pf-c-dual-list-selector__list-item')) {
+        if (element.classList.contains(`.${styles.dualListSelectorListItem}`)) {
           setFocusedOption(element.id);
         } else {
-          setFocusedOption(element.closest('.pf-c-dual-list-selector__list-item').id);
+          setFocusedOption(element.closest(`.${styles.dualListSelectorListItem}`).id);
         }
         return element;
       },
-      ['.pf-c-dual-list-selector__item-toggle', '.pf-c-dual-list-selector__item-check > input'],
+      [`.${styles.dualListSelectorItemToggle}`, `.${styles.dualListSelectorItemCheck} > input`],
       undefined,
       false,
       false,
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
index 6aecf98721e..c98bfe212e2 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
@@ -151,7 +151,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-c-dual-list-selector__title">
+          <div className="pf-v5-c-dual-list-selector__title">
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index d5257a89a10..e36c9cb1045 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -103,7 +103,7 @@ exports[`DualListSelector basic 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -130,7 +130,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -156,7 +156,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -183,7 +183,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -217,7 +217,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -262,7 +262,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -353,7 +353,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -380,7 +380,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -407,7 +407,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -434,7 +434,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -468,7 +468,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -514,7 +514,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -615,7 +615,7 @@ exports[`DualListSelector with actions 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -642,7 +642,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -668,7 +668,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -694,7 +694,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -728,7 +728,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -839,7 +839,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -929,7 +929,7 @@ exports[`DualListSelector with custom status 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -956,7 +956,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -982,7 +982,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1009,7 +1009,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1043,7 +1043,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1088,7 +1088,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1219,7 +1219,7 @@ exports[`DualListSelector with search inputs 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1246,7 +1246,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1272,7 +1272,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1299,7 +1299,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1333,7 +1333,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1419,7 +1419,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1584,7 +1584,7 @@ exports[`DualListSelector with tree 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1611,7 +1611,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1637,7 +1637,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1664,7 +1664,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1698,7 +1698,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
diff --git a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
index 40b1ec4adfc..94954d2900c 100644
--- a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
+++ b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx
@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-c-empty-state__header', className)} {...props}>
+  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-c-empty-state__title')}>
+      <div className={css('pf-v5-c-empty-state__title')}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}
diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
index ec037904ac8..0796ac20bcb 100644
--- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
+++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`EmptyState Full height 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -29,7 +29,7 @@ exports[`EmptyState Full height 1`] = `
 exports[`EmptyState Header with icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__header"
+    class="pf-v5-c-empty-state__header"
   >
     <div
       class="pf-v5-c-empty-state__icon"
@@ -59,10 +59,10 @@ exports[`EmptyState Main 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -123,10 +123,10 @@ exports[`EmptyState Main variant large 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -149,10 +149,10 @@ exports[`EmptyState Main variant small 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -175,10 +175,10 @@ exports[`EmptyState Main variant xs 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
diff --git a/packages/react-core/src/components/Form/FormAlert.tsx b/packages/react-core/src/components/Form/FormAlert.tsx
index 160f6a71057..d46f45dcd46 100644
--- a/packages/react-core/src/components/Form/FormAlert.tsx
+++ b/packages/react-core/src/components/Form/FormAlert.tsx
@@ -13,9 +13,9 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
   className = '',
   ...props
 }: FormAlertProps) => (
-  // There are currently no associated styles with the pf-c-form_alert class.
+  // 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-c-form__alert', className)}>
+  <div {...props} className={css('pf-v5-c-form__alert', className)}>
     {children}
   </div>
 );
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
index 9f39d0e6c53..12ab88b1682 100644
--- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
+++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Form Alert component should render form group required variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-form__alert"
+    class="pf-v5-c-form__alert"
   />
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
index cdf274cc9b3..10000957fc3 100644
--- a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
+++ b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
@@ -14,7 +14,7 @@ test('renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('renders with class pf-c-hint', () => {
+test('renders with class pf-v5-c-hint', () => {
   render(<Hint>Test</Hint>);
 
   const hint = screen.getByText('Test');
@@ -46,7 +46,7 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test('renders with class pf-c-hint__actions if there is an action prop', () => {
+test('renders with class pf-v5-c-hint__actions if there is an action prop', () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');
diff --git a/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx
index 0649e3a0b49..d9142507670 100644
--- a/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx
+++ b/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx
@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__body', () => {
+test('renders with class pf-v5-c-hint__body', () => {
   render(<HintBody>Hint Body Test</HintBody>);
 
   const body = screen.getByText('Hint Body Test');
diff --git a/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx
index 188468c5f5f..f71df174798 100644
--- a/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx
+++ b/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx
@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__footer', () => {
+test('renders with class pf-v5-c-hint__footer', () => {
   render(<HintFooter>Hint Body Test</HintFooter>);
 
   const body = screen.getByText('Hint Body Test');
diff --git a/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx
index f87070e96f0..8fd536bcbf6 100644
--- a/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx
+++ b/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx
@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__title', () => {
+test('renders with class pf-v5-c-hint__title', () => {
   render(<HintTitle>Hint Body Test</HintTitle>);
 
   const body = screen.getByText('Hint Body Test');
diff --git a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx
index e7cd38f07d7..b8560f4f28f 100644
--- a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx
+++ b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx
@@ -222,7 +222,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       {...props}
     >
       <div className={styles.jumpLinksMain}>
-        <div className={css('pf-c-jump-links__header')}>
+        <div className={css('pf-v5-c-jump-links__header')}>
           {expandable && (
             <div className={styles.jumpLinksToggle}>
               <Button
diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
index 9f63e11e8c2..a59bd3db061 100644
--- a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
+++ b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`expandable vertical with subsection 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__toggle"
@@ -169,7 +169,7 @@ exports[`jumplinks centered 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -231,7 +231,7 @@ exports[`jumplinks with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"
@@ -298,7 +298,7 @@ exports[`simple jumplinks 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -360,7 +360,7 @@ exports[`vertical with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"
diff --git a/packages/react-core/src/components/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx
index 02cd259168a..e428fed4571 100644
--- a/packages/react-core/src/components/Menu/Menu.tsx
+++ b/packages/react-core/src/components/Menu/Menu.tsx
@@ -139,12 +139,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   handleDrilldownTransition = (event: TransitionEvent) => {
     const current = this.menuRef.current;
-
     if (
       !current ||
-      (current !== (event.target as HTMLElement).closest('.pf-c-menu') &&
-        !Array.from(current.getElementsByClassName('pf-v5-c-menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-menu')
+      (current !== (event.target as HTMLElement).closest(`.${styles.menu}`) &&
+        !Array.from(current.getElementsByClassName(styles.menu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.menu}`)
         ))
     ) {
       return;
@@ -163,9 +162,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
         // if the drilldown transition ends on the same menu, do not focus the first item
         return;
       }
-
       const nextTarget = nextMenuChildren.filter(
-        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
 
       (nextTarget as HTMLElement).focus();
@@ -178,10 +176,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const activeElement = document.activeElement;
 
     if (
-      (event.target as HTMLElement).closest('.pf-c-menu') !== this.activeMenu &&
-      !(event.target as HTMLElement).classList.contains('pf-c-breadcrumb__link')
+      (event.target as HTMLElement).closest(`.${styles.menu}`) !== this.activeMenu &&
+      !(event.target as HTMLElement).classList.contains('pf-v5-c-breadcrumb__link')
     ) {
-      this.activeMenu = (event.target as HTMLElement).closest('.pf-c-menu');
+      this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
       this.setState({ disableHover: true });
     }
 
@@ -192,8 +190,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const parentMenu = this.activeMenu;
     const key = event.key;
     const isFromBreadcrumb =
-      activeElement.classList.contains('pf-c-breadcrumb__link') ||
-      activeElement.classList.contains('pf-c-dropdown__toggle');
+      activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+      activeElement.classList.contains('pf-v5-c-dropdown__toggle');
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -204,10 +202,10 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           (parentMenu.parentElement.firstChild as HTMLElement).tabIndex = 0;
           this.setState({ transitionMoveTarget: parentMenu.parentElement.firstChild as HTMLElement });
         } else {
-          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains('pf-c-menu')) {
+          if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains(styles.menu)) {
             const childItems = Array.from(
               activeElement.nextElementSibling.getElementsByTagName('UL')[0].children
-            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
 
             (activeElement as HTMLElement).tabIndex = -1;
             (childItems[0].firstChild as HTMLElement).tabIndex = 0;
@@ -225,13 +223,13 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (isDrilldown) {
       return this.activeMenu
         ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     } else {
       return this.menuRef.current
         ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(
-            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
           )
         : [];
     }
@@ -297,7 +295,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isActiveElement={(element: Element) =>
               document.activeElement.closest('li') === element || // if element is a basic MenuItem
               document.activeElement.parentElement === element ||
-              document.activeElement.closest('.pf-c-menu__search') === element || // if element is a MenuSearch
+              document.activeElement.closest(`.${styles.menuSearch}`) === element || // if element is a MenuSearch
               (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
             }
             getFocusableElement={(navigableElement: Element) =>
@@ -308,8 +306,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             }
             noHorizontalArrowHandling={
               document.activeElement &&
-              (document.activeElement.classList.contains('pf-c-breadcrumb__link') ||
-                document.activeElement.classList.contains('pf-c-dropdown__toggle'))
+              (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
+                document.activeElement.classList.contains('pf-v5-c-dropdown__toggle'))
             }
             noEnterHandling
             noSpaceHandling
diff --git a/packages/react-core/src/components/Menu/MenuGroup.tsx b/packages/react-core/src/components/Menu/MenuGroup.tsx
index b1ee09e340b..91e235f087a 100644
--- a/packages/react-core/src/components/Menu/MenuGroup.tsx
+++ b/packages/react-core/src/components/Menu/MenuGroup.tsx
@@ -28,7 +28,7 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
 }: MenuGroupProps) => {
   const Wrapper = typeof label === 'function' ? label : HeadingLevel;
   return (
-    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+    <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
       <>
         {['function', 'string'].includes(typeof label) ? (
           <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx
index b4af60f8dbf..f4c48ba2368 100644
--- a/packages/react-core/src/components/Menu/MenuItem.tsx
+++ b/packages/react-core/src/components/Menu/MenuItem.tsx
@@ -193,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
         const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
-          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
         );
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
@@ -348,7 +348,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
               {hasCheckbox && (
-                <span className={css('pf-c-menu__item-check')}>
+                <span className={css(styles.menuItemCheck)}>
                   <Checkbox
                     id={randomId}
                     component="span"
diff --git a/packages/react-core/src/components/Menu/MenuSearchInput.tsx b/packages/react-core/src/components/Menu/MenuSearchInput.tsx
index d164ab4def1..83840594e28 100644
--- a/packages/react-core/src/components/Menu/MenuSearchInput.tsx
+++ b/packages/react-core/src/components/Menu/MenuSearchInput.tsx
@@ -10,6 +10,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-c-menu__search-input', props.className)} ref={ref} />
+  <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
 ));
 MenuSearchInput.displayName = 'MenuSearchInput';
diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
index 587d167c50f..eb832f83140 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx
@@ -66,7 +66,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
       <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
           {children}
         </ul>
       </ExpandableSection>
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
index a1e5f8491de..9f18534b196 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -119,7 +119,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -180,7 +180,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -239,7 +239,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx
index 08b7dd74965..3abee4fd4a9 100644
--- a/packages/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/react-core/src/components/Nav/NavItem.tsx
@@ -85,7 +85,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   };
 
   const onMouseOver = (event: React.MouseEvent) => {
-    const evtContainedInFlyout = (event.target as HTMLElement).closest('.pf-c-nav__item.pf-m-flyout');
+    const evtContainedInFlyout = (event.target as HTMLElement).closest(`.${styles.navItem}.pf-m-flyout`);
     if (hasFlyout && !flyoutVisible) {
       showFlyout(true);
     } else if (flyoutRef !== null && !evtContainedInFlyout) {
@@ -120,7 +120,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
     // We only want the NavItem to handle closing a flyout menu if only the first level flyout is open.
     // Otherwise, MenuItem should handle closing its flyouts
-    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll('.pf-c-menu').length === 1) {
+    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1) {
       if (flyoutVisible) {
         event.stopPropagation();
         event.preventDefault();
@@ -145,7 +145,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx
index ee1deb764e1..e377d19270c 100644
--- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx
@@ -22,7 +22,7 @@ export const NotificationDrawerList: React.FunctionComponent<NotificationDrawerL
 }: NotificationDrawerListProps) => (
   <ul
     {...props}
-    className={css('pf-c-notification-drawer__list', className)}
+    className={css('pf-v5-c-notification-drawer__list', className)}
     hidden={isHidden}
     role="list"
     aria-label={ariaLabel}
diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap
index 9b819c74f3e..97bd41b7d6a 100644
--- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap
+++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     hidden=""
     role="list"
   />
@@ -13,7 +13,7 @@ exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 exports[`NotificationDrawerList renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     role="list"
   />
 </DocumentFragment>
diff --git a/packages/react-core/src/components/Page/__tests__/PageSidebarBody.test.tsx b/packages/react-core/src/components/Page/__tests__/PageSidebarBody.test.tsx
index d0a2805ff7a..10d64f3cab9 100644
--- a/packages/react-core/src/components/Page/__tests__/PageSidebarBody.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageSidebarBody.test.tsx
@@ -18,7 +18,7 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-page__sidebar-body by default', () => {
+test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');
diff --git a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
index a7c556b26e0..46a32b980ce 100644
--- a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
@@ -20,12 +20,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel', () => {
+test('Renders with the class pf-v5-c-panel', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
 });
 
-test('Renders with only the class pf-c-panel by default', () => {
+test('Renders with only the class pf-v5-c-panel by default', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
 });
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx
index 3876d8efaa1..ed237a07b95 100644
--- a/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__footer', () => {
+test('Renders with the class pf-v5-c-panel__footer', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
 });
 
-test('Renders with only the class pf-c-panel__footer by default', () => {
+test('Renders with only the class pf-v5-c-panel__footer by default', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
 });
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx
index 16def2fe741..54dc1f76c2f 100644
--- a/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__header', () => {
+test('Renders with the class pf-v5-c-panel__header', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
 });
 
-test('Renders with only the class pf-c-panel__header by default', () => {
+test('Renders with only the class pf-v5-c-panel__header by default', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
 });
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx
index e6b18971754..a17dd917441 100644
--- a/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main', () => {
+test('Renders with the class pf-v5-c-panel__main', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
 });
 
-test('Renders with only the class pf-c-panel__main by default', () => {
+test('Renders with only the class pf-v5-c-panel__main by default', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
 });
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx
index 42651253e28..165a43c65eb 100644
--- a/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main-body', () => {
+test('Renders with the class pf-v5-c-panel__main-body', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
 });
 
-test('Renders with only the class pf-c-panel__main-body by default', () => {
+test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
 });
diff --git a/packages/react-core/src/components/Progress/__tests__/ProgressHelperText.test.tsx b/packages/react-core/src/components/Progress/__tests__/ProgressHelperText.test.tsx
index f573360572a..003bccb9545 100644
--- a/packages/react-core/src/components/Progress/__tests__/ProgressHelperText.test.tsx
+++ b/packages/react-core/src/components/Progress/__tests__/ProgressHelperText.test.tsx
@@ -17,7 +17,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');
diff --git a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
index b7b3b3c0d8d..9f142c83c4a 100644
--- a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
+++ b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
@@ -23,7 +23,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress-stepper__step on the containing li element', () => {
+test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
 });
@@ -77,7 +77,7 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-c-progress-stepper__step-icon', () => {
+test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
   expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
 });
@@ -112,12 +112,12 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-c-progress-stepper__step-description', () => {
+test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
   expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
 });
 
-test('Renders children inside class pf-c-progress-stepper__step-title', () => {
+test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
 });
diff --git a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx
index 3d58dd3b551..a1697ee0862 100644
--- a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx
+++ b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-progress-stepper by default', () => {
+test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
 });
 
-test('Renders with class name pf-c-progress-stepper', () => {
+test('Renders with class name pf-v5-c-progress-stepper', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
 });
diff --git a/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx
index 6e3ded95bfb..24c5c92a191 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx
+++ b/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-sidebar by default', () => {
+test('Renders with only class name pf-v5-c-sidebar by default', () => {
   render(<Sidebar>Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar', { exact: true });
 });
 
-test('Renders with class name pf-c-sidebar', () => {
+test('Renders with class name pf-v5-c-sidebar', () => {
   render(<Sidebar>Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-v5-c-sidebar');
 });
diff --git a/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx
index 7e755953cb4..86114800933 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx
+++ b/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx
@@ -7,12 +7,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-sidebar__content by default', () => {
+test('Renders with only class name pf-v5-c-sidebar__content by default', () => {
   render(<SidebarContent>Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content', { exact: true });
 });
 
-test('Renders with class name pf-c-sidebar__content', () => {
+test('Renders with class name pf-v5-c-sidebar__content', () => {
   render(<SidebarContent>Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__content');
 });
diff --git a/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx
index d60ced4f168..263f9d5eb66 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx
+++ b/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx
@@ -7,12 +7,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with with only class name pf-c-sidebar__panel by default', () => {
+test('Renders with with only class name pf-v5-c-sidebar__panel by default', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel', { exact: true });
 });
 
-test('Renders with with class name pf-c-sidebar__panel', () => {
+test('Renders with with class name pf-v5-c-sidebar__panel', () => {
   render(<SidebarPanel>Test</SidebarPanel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-sidebar__panel');
 });
diff --git a/packages/react-core/src/components/Tabs/TabContent.tsx b/packages/react-core/src/components/Tabs/TabContent.tsx
index 3413cf76d0f..53d479d8b24 100644
--- a/packages/react-core/src/components/Tabs/TabContent.tsx
+++ b/packages/react-core/src/components/Tabs/TabContent.tsx
@@ -62,8 +62,8 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
             hidden={children ? null : child.props.eventKey !== activeKey}
             className={
               children
-                ? css('pf-c-tab-content', className, variantStyle[variant])
-                : css('pf-c-tab-content', child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variantStyle[variant])
+                : css(styles.tabContent, child.props.className, variantStyle[variant])
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
index 74257b8b966..6757476e1f8 100644
--- a/packages/react-core/src/components/Tabs/Tabs.tsx
+++ b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -483,7 +483,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
                         <AngleRightIcon arian-hidden="true" />
                       </span>
                       {toggleText && (
-                        <span className={css('pf-c-tabs__toggle-text')} id={`${randomId}-text`}>
+                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
                           {toggleText}
                         </span>
                       )}
diff --git a/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap
index 527019ec449..99791e3857d 100644
--- a/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap
+++ b/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-c-tab-content string"
+    class="pf-v5-c-tab-content string"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="string"
diff --git a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
index f0a0b21041f..36d45c1155f 100644
--- a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
+++ b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
@@ -74,20 +74,20 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+test('Renders with class names pf-m-overflow and pf-v5-c-tabs__item on the presentation element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
   expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
 });
 
-test('Renders with class pf-c-tabs__link on the tab element', () => {
+test('Renders with class pf-v5-c-tabs__link on the tab element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('tab')).toHaveClass('pf-v5-c-tabs__link');
 });
 
-test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
+test("Renders with class pf-v5-c-tabs__link-toggle-icon on the img element's container", () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');
diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
index 7e72f38f430..4127807ad77 100644
--- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `
   </nav>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -92,7 +92,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -104,7 +104,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -227,7 +227,7 @@ exports[`should render box tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -238,7 +238,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -250,7 +250,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -262,7 +262,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -433,7 +433,7 @@ exports[`should render expandable vertical tabs 1`] = `
             </svg>
           </span>
           <span
-            class="pf-c-tabs__toggle-text"
+            class="pf-v5-c-tabs__toggle-text"
             id="pf-random-id-0-text"
           >
             toggle
@@ -542,7 +542,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -553,7 +553,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -565,7 +565,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -577,7 +577,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -670,7 +670,7 @@ exports[`should render filled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -681,7 +681,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -693,7 +693,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -786,7 +786,7 @@ exports[`should render secondary tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-primarieTabs"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-primarieTabs"
@@ -871,7 +871,7 @@ exports[`should render secondary tabs 1`] = `
     </div>
     <section
       aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -883,7 +883,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -895,7 +895,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -908,7 +908,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -920,7 +920,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1043,7 +1043,7 @@ exports[`should render simple tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1054,7 +1054,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1066,7 +1066,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1078,7 +1078,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1171,7 +1171,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-one-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1183,7 +1183,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-two-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1195,7 +1195,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-three-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1288,7 +1288,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1299,7 +1299,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1311,7 +1311,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1405,7 +1405,7 @@ exports[`should render tabs with separate content 1`] = `
   <div>
     <section
       aria-label="Tab item 1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       id="refTab1Section"
@@ -1416,7 +1416,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1432,7 +1432,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1559,7 +1559,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1570,7 +1570,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1582,7 +1582,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1594,7 +1594,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1717,7 +1717,7 @@ exports[`should render vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1728,7 +1728,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1740,7 +1740,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1752,7 +1752,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
diff --git a/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx b/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx
index 070055c2334..a037d3c9826 100644
--- a/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx
+++ b/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx
@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-content', () => {
+test('Renders with class name pf-v5-c-content', () => {
   render(<TextContent>Test</TextContent>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
 });
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
index 043badb95d4..d94aab0c6f4 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
@@ -17,7 +17,7 @@ describe('TextInputGroup', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group', () => {
+  it('renders with class pf-v5-c-text-input-group', () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
index 428c60c3d02..a2e688699d9 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
@@ -20,7 +20,7 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__main', () => {
+  it('renders with class pf-v5-c-text-input-group__main', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupMain = screen.getByText('Test');
@@ -52,7 +52,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupMain).toHaveClass('custom-class');
   });
 
-  it('renders with class pf-c-text-input-group__text on the inputs parent', () => {
+  it('renders with class pf-v5-c-text-input-group__text on the inputs parent', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
@@ -60,7 +60,7 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
   });
 
-  it('renders the input with class pf-c-text-input-group__text-input', () => {
+  it('renders the input with class pf-v5-c-text-input-group__text-input', () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
@@ -180,7 +180,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it('renders the hint input with classes pf-c-text-input-group__text-input and pf-m-hint', () => {
+  it('renders the hint input with classes pf-v5-c-text-input-group__text-input and pf-m-hint', () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx
index da2142fa48b..ef584e8a3f2 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx
@@ -18,7 +18,7 @@ describe('TextInputGroupUtilities', () => {
     expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
   });
 
-  it('renders with class pf-c-text-input-group__utilities', () => {
+  it('renders with class pf-v5-c-text-input-group__utilities', () => {
     render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
 
     const utilities = screen.getByText('Test');
diff --git a/packages/react-core/src/components/Timestamp/Timestamp.tsx b/packages/react-core/src/components/Timestamp/Timestamp.tsx
index b1e6a8c0366..941a8c5a18b 100644
--- a/packages/react-core/src/components/Timestamp/Timestamp.tsx
+++ b/packages/react-core/src/components/Timestamp/Timestamp.tsx
@@ -135,7 +135,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...propsWithoutDateTime}
     >
-      <time className="pf-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
+      <time className="pf-v5-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>
diff --git a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
index 29dc4bcd744..14108715d51 100644
--- a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
+++ b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx
@@ -141,16 +141,16 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
   expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
 });
 
-test('Renders with pf-c-timestamp by default', () => {
+test('Renders with pf-v5-c-timestamp by default', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
   expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-v5-c-timestamp');
 });
 
-test('Renders with pf-c-timestamp__text by default', () => {
+test('Renders with pf-v5-c-timestamp__text by default', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-c-timestamp__text');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-v5-c-timestamp__text');
 });
 
 test('Renders with custom class names', () => {
diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
index 32be4c1250a..c79c14be681 100644
--- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx
+++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-title', () => {
+test('Renders with the pf-v5-c-title', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
 });
 
-test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
+test('Renders with only the class pf-v5-c-title and the heading level modifier class pf-m-2xl by default', () => {
   render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
 });
diff --git a/packages/react-core/src/components/TreeView/TreeViewList.tsx b/packages/react-core/src/components/TreeView/TreeViewList.tsx
index bbca3de692c..dde138401a0 100644
--- a/packages/react-core/src/components/TreeView/TreeViewList.tsx
+++ b/packages/react-core/src/components/TreeView/TreeViewList.tsx
@@ -24,7 +24,7 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css('pf-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul className={css('pf-v5-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
       {children}
     </ul>
   </>
diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
index b20436440f7..850f51498b4 100644
--- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
+++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders compact no background successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact pf-m-no-background"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -59,7 +59,7 @@ exports[`renders compact no background successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -315,7 +315,7 @@ exports[`renders compact successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -368,7 +368,7 @@ exports[`renders compact successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -624,7 +624,7 @@ exports[`renders guides successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-guides"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -673,7 +673,7 @@ exports[`renders guides successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -909,7 +909,7 @@ exports[`tree view renders active successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -958,7 +958,7 @@ exports[`tree view renders active successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1194,7 +1194,7 @@ exports[`tree view renders badges successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1252,7 +1252,7 @@ exports[`tree view renders badges successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1533,7 +1533,7 @@ exports[`tree view renders basic successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1582,7 +1582,7 @@ exports[`tree view renders basic successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1818,7 +1818,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1878,7 +1878,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2174,7 +2174,7 @@ exports[`tree view renders icons successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2238,7 +2238,7 @@ exports[`tree view renders icons successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2549,7 +2549,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2625,7 +2625,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2948,7 +2948,7 @@ exports[`tree view renders toolbar successfully 1`] = `
       class="pf-v5-c-divider"
     />
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2997,7 +2997,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
diff --git a/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx b/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
index b31d2e97e82..0b6008a39ce 100644
--- a/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
+++ b/packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx
@@ -12,7 +12,7 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-c-truncate', () => {
+test('renders with class pf-v5-c-truncate', () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
@@ -44,7 +44,7 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-c-truncate__start with default position', () => {
+test('only renders pf-v5-c-truncate__start with default position', () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');

From b0e731537afbf838a29e170d13835a0955a4c76b Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Wed, 17 May 2023 13:01:06 -0500
Subject: [PATCH 2/6] update cypress test selectors

---
 .../integration/duallistselectorbasic.spec.ts | 44 +++++++++----------
 .../integration/duallistselectortree.spec.ts  | 12 ++---
 .../duallistselectorwithactions.spec.ts       | 20 ++++-----
 .../cypress/integration/menu.spec.ts          |  8 ++--
 .../notificationdrawergroups.spec.ts          |  8 ++--
 .../notificationdrawerlightweight.spec.ts     |  8 ++--
 .../cypress/integration/select.spec.ts        |  2 +-
 7 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts b/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
index 4014dcb2647..b355e76db11 100644
--- a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
@@ -16,16 +16,16 @@ describe('Dual List Selector BasicDemo Test', () => {
       'Available search input'
     );
 
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(0)
       .should('have.attr', 'aria-label', 'Add selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(3)
       .should('have.attr', 'aria-label', 'Remove selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(2)
       .should('have.attr', 'aria-label', 'Remove all')
       .and('have.attr', 'disabled');
@@ -47,7 +47,7 @@ describe('Dual List Selector BasicDemo Test', () => {
   it('Verify selecting options', () => {
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-m-selected').should('not.exist');
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(0).click();
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).and('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).and('not.have.attr', 'disabled');
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-m-selected').should('exist');
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(1).click();
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('2 of 4 items selected');
@@ -58,20 +58,20 @@ describe('Dual List Selector BasicDemo Test', () => {
   });
 
   it('Verify selecting and choosing options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(1).click();
 
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('1 of 3 items selected');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('0 of 1 items selected');
 
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(0).click();
     cy.get('.pf-v5-c-tooltip').should('exist');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
@@ -81,22 +81,22 @@ describe('Dual List Selector BasicDemo Test', () => {
   });
 
   it('Verify removing all options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-tooltip').should('exist');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
 
   it('Verify choosing all options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-tooltip').should('exist');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
 
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('0 of 0 items selected');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('0 of 4 items selected');
@@ -112,14 +112,14 @@ describe('Dual List Selector BasicDemo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
 
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(2).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(2).should('have.attr', 'disabled');
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('0 of 4 items selected');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('0 of 0 items selected');
diff --git a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
index 3179a716727..67b27e5432e 100644
--- a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
@@ -26,11 +26,11 @@ describe('Dual List Selector TreeDemo Test', () => {
   });
 
   it('Verify checkbox selects an option', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__item-check').last().click();
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__item-check').eq(1).click();
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(0).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(2).find('li').should('have.length', 2);
   });
 
@@ -38,7 +38,7 @@ describe('Dual List Selector TreeDemo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input').eq(0).type('Option 1');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(0)
@@ -55,14 +55,14 @@ describe('Dual List Selector TreeDemo Test', () => {
   it('Verify remove all filtered options works', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
diff --git a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
index 2c1f26983bf..02fe832939a 100644
--- a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
@@ -26,16 +26,16 @@ describe('Dual List Selector With Actions Demo Test', () => {
       'dual-list-selector-demo-available-pane-status'
     );
 
-    cy.get('.pf-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
       .eq(0)
       .should('have.attr', 'aria-label', 'Demo add selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
       .eq(3)
       .should('have.attr', 'aria-label', 'Demo remove selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
       .eq(2)
       .should('have.attr', 'aria-label', 'Demo remove all')
       .and('have.attr', 'disabled');
@@ -61,11 +61,11 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify selecting and choosing options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(1).click();
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(0).click();
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('2 available');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('2 chosen');
@@ -75,7 +75,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify removing all options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('4 available');
@@ -83,7 +83,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify choosing all options', () => {
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('0 available');
@@ -106,7 +106,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
@@ -119,7 +119,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
 
   xit('Verify adding all filtered options', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
-    cy.get('.pf-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts
index f096273f5dd..596bf68c11e 100644
--- a/packages/react-integration/cypress/integration/menu.spec.ts
+++ b/packages/react-integration/cypress/integration/menu.spec.ts
@@ -46,10 +46,10 @@ describe('Menu Test', () => {
   });
 
   it('Verify Menu with Titled Groups', () => {
-    cy.get('#group-1.pf-c-menu__group > h1').should('contain', 'Group 1');
-    cy.get('#group-2.pf-c-menu__group > h1').should('contain', 'Group 2');
-    cy.get('#group-3.pf-c-menu__group > div > h1').should('contain', 'Group 3');
-    cy.get('#group-4.pf-c-menu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
+    cy.get('#group-1.pf-v5-c5-c-menu__group > h1').should('contain', 'Group 1');
+    cy.get('#group-2.pf-v5-c5-c-menu__group > h1').should('contain', 'Group 2');
+    cy.get('#group-3.pf-v5-c5-c-menu__group > div > h1').should('contain', 'Group 3');
+    cy.get('#group-4.pf-v5-c5-c-menu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
   });
 
   it('Verify Menu with Description', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
index b411537e5da..7ded248dfd4 100644
--- a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
@@ -20,14 +20,14 @@ describe('Notification Drawer Groups Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-c-notification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-c-notification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-c5-c-notification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-c-notification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items are hoverable', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
index 73ce4ecb716..08b7c4a0b32 100644
--- a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
@@ -16,14 +16,14 @@ describe('Notification Drawer Lightweight Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-c-notification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-c-notification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-c5-c-notification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-c-notification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-c5-c-notification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items in lightweight drawer are all in unread state', () => {
diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts
index 5188b262e41..2ab996bf03a 100644
--- a/packages/react-integration/cypress/integration/select.spec.ts
+++ b/packages/react-integration/cypress/integration/select.spec.ts
@@ -44,7 +44,7 @@ describe('Select Test', () => {
 
   it.skip('Verify Description Select', () => {
     cy.get('#single-select-with-descriptions').click();
-    cy.get('.pf-c-select__menu-footer').should('exist');
+    cy.get('.pf-v5-c5-c-select__menu-footer').should('exist');
     cy.get('#Miss > .pf-v5-c-select__menu-item > .pf-v5-c-select__menu-item-description').click();
     cy.get('#single-select-with-descriptions').contains('Miss').should('exist');
   });

From a22df9e79ddb3fdac2b226712e2d116fc13d6564 Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Wed, 17 May 2023 13:16:00 -0500
Subject: [PATCH 3/6] fix cypress selectors

---
 .../integration/duallistselectortree.spec.ts  | 10 +++++-----
 .../duallistselectorwithactions.spec.ts       | 20 +++++++++----------
 .../cypress/integration/menu.spec.ts          |  8 ++++----
 .../notificationdrawergroups.spec.ts          |  8 ++++----
 .../notificationdrawerlightweight.spec.ts     |  8 ++++----
 .../cypress/integration/select.spec.ts        |  2 +-
 6 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
index 67b27e5432e..fa1ad679546 100644
--- a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
@@ -28,9 +28,9 @@ describe('Dual List Selector TreeDemo Test', () => {
   it('Verify checkbox selects an option', () => {
     cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__item-check').last().click();
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
     cy.get('.pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__item-check').eq(1).click();
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(0).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(2).find('li').should('have.length', 2);
   });
 
@@ -38,7 +38,7 @@ describe('Dual List Selector TreeDemo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input').eq(0).type('Option 1');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(0)
@@ -55,14 +55,14 @@ describe('Dual List Selector TreeDemo Test', () => {
   it('Verify remove all filtered options works', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
diff --git a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
index 02fe832939a..d1086bd4b4a 100644
--- a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
@@ -26,16 +26,16 @@ describe('Dual List Selector With Actions Demo Test', () => {
       'dual-list-selector-demo-available-pane-status'
     );
 
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-cal-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
+    cy.get('.pf-v5-cal-list-selector__controls-item button')
       .eq(0)
       .should('have.attr', 'aria-label', 'Demo add selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-cal-list-selector__controls-item button')
       .eq(3)
       .should('have.attr', 'aria-label', 'Demo remove selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item button')
+    cy.get('.pf-v5-cal-list-selector__controls-item button')
       .eq(2)
       .should('have.attr', 'aria-label', 'Demo remove all')
       .and('have.attr', 'disabled');
@@ -61,11 +61,11 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify selecting and choosing options', () => {
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(1).click();
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(0).click();
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('2 available');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('2 chosen');
@@ -75,7 +75,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify removing all options', () => {
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('4 available');
@@ -83,7 +83,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify choosing all options', () => {
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('0 available');
@@ -106,7 +106,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
@@ -119,7 +119,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
 
   xit('Verify adding all filtered options', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
-    cy.get('.pf-v5-c5-c-dual-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-cal-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts
index 596bf68c11e..92d83bd213a 100644
--- a/packages/react-integration/cypress/integration/menu.spec.ts
+++ b/packages/react-integration/cypress/integration/menu.spec.ts
@@ -46,10 +46,10 @@ describe('Menu Test', () => {
   });
 
   it('Verify Menu with Titled Groups', () => {
-    cy.get('#group-1.pf-v5-c5-c-menu__group > h1').should('contain', 'Group 1');
-    cy.get('#group-2.pf-v5-c5-c-menu__group > h1').should('contain', 'Group 2');
-    cy.get('#group-3.pf-v5-c5-c-menu__group > div > h1').should('contain', 'Group 3');
-    cy.get('#group-4.pf-v5-c5-c-menu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
+    cy.get('#group-1.pf-v5-cnu__group > h1').should('contain', 'Group 1');
+    cy.get('#group-2.pf-v5-cnu__group > h1').should('contain', 'Group 2');
+    cy.get('#group-3.pf-v5-cnu__group > div > h1').should('contain', 'Group 3');
+    cy.get('#group-4.pf-v5-cnu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
   });
 
   it('Verify Menu with Description', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
index 7ded248dfd4..9336e2b861b 100644
--- a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
@@ -20,14 +20,14 @@ describe('Notification Drawer Groups Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-v5-c5-c-notification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-v5-c5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-v5-c5-c-notification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-ctification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-v5-c5-c-notification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items are hoverable', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
index 08b7c4a0b32..00be0623297 100644
--- a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
@@ -16,14 +16,14 @@ describe('Notification Drawer Lightweight Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-v5-c5-c-notification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-v5-c5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-v5-c5-c-notification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-ctification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-v5-c5-c-notification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-ctification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items in lightweight drawer are all in unread state', () => {
diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts
index 2ab996bf03a..14386d873b7 100644
--- a/packages/react-integration/cypress/integration/select.spec.ts
+++ b/packages/react-integration/cypress/integration/select.spec.ts
@@ -44,7 +44,7 @@ describe('Select Test', () => {
 
   it.skip('Verify Description Select', () => {
     cy.get('#single-select-with-descriptions').click();
-    cy.get('.pf-v5-c5-c-select__menu-footer').should('exist');
+    cy.get('.pf-v5-clect__menu-footer').should('exist');
     cy.get('#Miss > .pf-v5-c-select__menu-item > .pf-v5-c-select__menu-item-description').click();
     cy.get('#single-select-with-descriptions').contains('Miss').should('exist');
   });

From 8cafb3486e25ffc70a83da32f97d4d92e1d51528 Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Wed, 17 May 2023 13:45:11 -0500
Subject: [PATCH 4/6] fix cypress selectors

---
 .../integration/duallistselectortree.spec.ts  |  4 ++--
 .../duallistselectorwithactions.spec.ts       | 20 +++++++++----------
 .../cypress/integration/menu.spec.ts          |  8 ++++----
 .../notificationdrawergroups.spec.ts          |  8 ++++----
 .../notificationdrawerlightweight.spec.ts     |  8 ++++----
 .../cypress/integration/select.spec.ts        |  2 +-
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
index fa1ad679546..802e9fb5d2c 100644
--- a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
@@ -55,14 +55,14 @@ describe('Dual List Selector TreeDemo Test', () => {
   it('Verify remove all filtered options works', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}');
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
diff --git a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
index d1086bd4b4a..d6e751df9df 100644
--- a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
@@ -26,16 +26,16 @@ describe('Dual List Selector With Actions Demo Test', () => {
       'dual-list-selector-demo-available-pane-status'
     );
 
-    cy.get('.pf-v5-cal-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
-    cy.get('.pf-v5-cal-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Demo add all');
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(0)
       .should('have.attr', 'aria-label', 'Demo add selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-v5-cal-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(3)
       .should('have.attr', 'aria-label', 'Demo remove selected')
       .and('have.attr', 'disabled');
-    cy.get('.pf-v5-cal-list-selector__controls-item button')
+    cy.get('.pf-v5-c-dual-list-selector__controls-item button')
       .eq(2)
       .should('have.attr', 'aria-label', 'Demo remove all')
       .and('have.attr', 'disabled');
@@ -61,11 +61,11 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify selecting and choosing options', () => {
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(0).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__list-item').eq(1).click();
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(0).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(0).click();
 
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('2 available');
     cy.get('.pf-m-chosen .pf-v5-c-dual-list-selector__status-text').contains('2 chosen');
@@ -75,7 +75,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify removing all options', () => {
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('4 available');
@@ -83,7 +83,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
   });
 
   it('Verify choosing all options', () => {
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
     cy.get('.pf-m-available .pf-v5-c-dual-list-selector__status-text').contains('0 available');
@@ -106,7 +106,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
       .eq(1)
       .type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(2).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(2).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
   });
@@ -119,7 +119,7 @@ describe('Dual List Selector With Actions Demo Test', () => {
 
   xit('Verify adding all filtered options', () => {
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
-    cy.get('.pf-v5-cal-list-selector__controls-item').eq(1).click();
+    cy.get('.pf-v5-c-dual-list-selector__controls-item').eq(1).click();
     cy.get('.pf-v5-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
     cy.get('.pf-v5-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
     cy.get('.pf-v5-c-dual-list-selector__tools-filter input')
diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts
index 92d83bd213a..4eaeffe1b84 100644
--- a/packages/react-integration/cypress/integration/menu.spec.ts
+++ b/packages/react-integration/cypress/integration/menu.spec.ts
@@ -46,10 +46,10 @@ describe('Menu Test', () => {
   });
 
   it('Verify Menu with Titled Groups', () => {
-    cy.get('#group-1.pf-v5-cnu__group > h1').should('contain', 'Group 1');
-    cy.get('#group-2.pf-v5-cnu__group > h1').should('contain', 'Group 2');
-    cy.get('#group-3.pf-v5-cnu__group > div > h1').should('contain', 'Group 3');
-    cy.get('#group-4.pf-v5-cnu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
+    cy.get('#group-1.pf-v5-c-menu__group > h1').should('contain', 'Group 1');
+    cy.get('#group-2.pf-v5-c-menu__group > h1').should('contain', 'Group 2');
+    cy.get('#group-3.pf-v5-c-menu__group > div > h1').should('contain', 'Group 3');
+    cy.get('#group-4.pf-v5-c-menu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
   });
 
   it('Verify Menu with Description', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
index 9336e2b861b..ccc58e83c46 100644
--- a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
@@ -20,14 +20,14 @@ describe('Notification Drawer Groups Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-v5-ctification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-v5-ctification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-v5-ctification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-c-notification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-v5-ctification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items are hoverable', () => {
diff --git a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
index 00be0623297..c29d04b126f 100644
--- a/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
+++ b/packages/react-integration/cypress/integration/notificationdrawerlightweight.spec.ts
@@ -16,14 +16,14 @@ describe('Notification Drawer Lightweight Demo Test', () => {
   });
 
   it('Verify first and last list items are hidden', () => {
-    cy.get('.pf-v5-ctification-drawer__list').first().should('have.attr', 'hidden');
-    cy.get('.pf-v5-ctification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
-    cy.get('.pf-v5-ctification-drawer__list').last().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').first().should('have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').eq(1).should('not.have.attr', 'hidden', false);
+    cy.get('.pf-v5-c-notification-drawer__list').last().should('have.attr', 'hidden');
   });
 
   it('Verify first item is expanded after click', () => {
     cy.get('.pf-v5-c-notification-drawer__group').first().click();
-    cy.get('.pf-v5-ctification-drawer__list').should('not.have.attr', 'hidden');
+    cy.get('.pf-v5-c-notification-drawer__list').should('not.have.attr', 'hidden');
   });
 
   it('Verify list items in lightweight drawer are all in unread state', () => {
diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts
index 14386d873b7..6c01d88ce4a 100644
--- a/packages/react-integration/cypress/integration/select.spec.ts
+++ b/packages/react-integration/cypress/integration/select.spec.ts
@@ -44,7 +44,7 @@ describe('Select Test', () => {
 
   it.skip('Verify Description Select', () => {
     cy.get('#single-select-with-descriptions').click();
-    cy.get('.pf-v5-clect__menu-footer').should('exist');
+    cy.get('.pf-v5-c-select__menu-footer').should('exist');
     cy.get('#Miss > .pf-v5-c-select__menu-item > .pf-v5-c-select__menu-item-description').click();
     cy.get('#single-select-with-descriptions').contains('Miss').should('exist');
   });

From 931fdaffc230832375ed7742f5360d380cc0c8f5 Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Wed, 17 May 2023 16:28:36 -0500
Subject: [PATCH 5/6] update some code-editor/deprecated/table/integration
 directories

---
 .../src/components/CodeEditor/CodeEditor.tsx                  | 4 ++--
 .../__test__/__snapshots__/CodeEditor.test.tsx.snap           | 2 +-
 .../ApplicationLauncher/ApplicationLauncherText.tsx           | 2 +-
 .../__snapshots__/ApplicationLauncherText.test.tsx.snap       | 2 +-
 .../src/deprecated/components/Select/SelectMenu.tsx           | 2 +-
 .../src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx    | 2 +-
 packages/react-table/src/components/Table/Table.tsx           | 2 +-
 packages/react-table/src/components/Table/Td.tsx              | 2 +-
 .../src/components/Table/utils/transformers.test.tsx          | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 3c27ea2a36a..7abc5263d7d 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/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)}>
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 55c08ca9553..c00c60a016b 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/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"
     >
diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx
index 9dcc4fc6f09..189182468ff 100644
--- a/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx
+++ b/packages/react-core/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx
@@ -13,7 +13,7 @@ export const ApplicationLauncherText: React.FunctionComponent<ApplicationLaunche
   children,
   ...props
 }: ApplicationLauncherTextProps) => (
-  <span className={css('pf-c-app-launcher__menu-item-text', className)} {...props}>
+  <span className={css('pf-v5-c-app-launcher__menu-item-text', className)} {...props}>
     {children}
   </span>
 );
diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap
index ab032302c3c..ef839026f83 100644
--- a/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ApplicationLauncherText should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-app-launcher__menu-item-text ''"
+    class="pf-v5-c-app-launcher__menu-item-text ''"
   >
     <div>
       ReactNode
diff --git a/packages/react-core/src/deprecated/components/Select/SelectMenu.tsx b/packages/react-core/src/deprecated/components/Select/SelectMenu.tsx
index c773ab55053..5255c88c3fb 100644
--- a/packages/react-core/src/deprecated/components/Select/SelectMenu.tsx
+++ b/packages/react-core/src/deprecated/components/Select/SelectMenu.tsx
@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-c-select__menu-list',
+        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
index 310c988048c..69f8473bfd0 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
@@ -36,7 +36,7 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
       this.setState({ alerts: [...this.state.alerts, ...incomingAlerts] });
     };
     const getUniqueId = () => new Date().getTime();
-    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+    const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
     this.removeAlert = (key: React.ReactText) => {
       this.setState({ alerts: [...this.state.alerts.filter((el: AlertDemoAlert) => el.key !== key)] });
     };
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index fa6b6c06c60..6e0fed70d51 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -157,7 +157,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     if (
       isNested ||
       !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-c-table:not(.pf-m-nested)'))
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-v5-c-table:not(.pf-m-nested)'))
     ) {
       return;
     }
diff --git a/packages/react-table/src/components/Table/Td.tsx b/packages/react-table/src/components/Table/Td.tsx
index 75e640e714f..5139dd286e5 100644
--- a/packages/react-table/src/components/Table/Td.tsx
+++ b/packages/react-table/src/components/Table/Td.tsx
@@ -50,7 +50,7 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
-  /** Applies pf-c-table__action to td */
+  /** Applies pf-v5-c-table__action to td */
   isActionCell?: boolean;
   /**
    * Tooltip to show on the body cell.
diff --git a/packages/react-table/src/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx
index 25b04acd2d0..61e3bac4fb1 100644
--- a/packages/react-table/src/components/Table/utils/transformers.test.tsx
+++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx
@@ -73,7 +73,7 @@ const testCellActions = async ({
     const { container } = render(returnedData.children as React.ReactElement<any>);
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
-      expect(container.querySelectorAll('.pf-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
+      expect(container.querySelectorAll('.pf-v5-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
     );
   }
 };

From d570b79953378d149e638d784f0d7bcebd2ad01c Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 18 May 2023 16:13:57 -0400
Subject: [PATCH 6/6] update popper css

---
 packages/react-styles/src/css/components/Popper/Popper.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-styles/src/css/components/Popper/Popper.css b/packages/react-styles/src/css/components/Popper/Popper.css
index d5255c6c9bb..9d84a911b97 100644
--- a/packages/react-styles/src/css/components/Popper/Popper.css
+++ b/packages/react-styles/src/css/components/Popper/Popper.css
@@ -1,4 +1,4 @@
-.pf-c-popover[data-popper-reference-hidden="true"] {
+.pf-v5-c-popover[data-popper-reference-hidden="true"] {
     visibility: hidden;
     pointer-events: none;
 }