From d8bb3485d8a66a4f7ff4f6d7be4a311d6b19d8bc Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Mon, 25 Nov 2024 09:42:09 +0100
Subject: [PATCH] Wizard: Add v5 PF slug to classNames

This adds v5 PF slug to classNames throughout the code base, making the formatting work properly.
---
 .../CreateImageWizard/CreateImageWizard.scss  | 18 +++----
 ...ileSystemAutomaticPartitionInformation.tsx |  2 +-
 .../FileSystem/FileSystemConfiguration.tsx    |  4 +-
 .../steps/FileSystem/FileSystemTable.tsx      |  2 +-
 .../steps/ImageOutput/TargetEnvironment.tsx   | 16 +++----
 .../CreateImageWizard/steps/Oscap/Oscap.tsx   |  2 +-
 .../steps/Oscap/OscapProfileInformation.tsx   | 12 ++---
 .../steps/Packages/Packages.tsx               | 10 ++--
 .../PackageInfoNotAvailablePopover.tsx        |  2 +-
 .../Registration/ActivationKeyInformation.tsx |  6 +--
 .../steps/Registration/ActivationKeysList.tsx |  2 +-
 .../steps/Registration/Registration.tsx       |  6 +--
 .../steps/Repositories/RepositoriesStatus.tsx |  6 +--
 .../steps/Repositories/components/Empty.tsx   |  2 +-
 .../steps/Review/ReviewStep.tsx               |  4 +-
 .../steps/Review/ReviewStepTextLists.tsx      | 38 +++++++--------
 src/Components/ImagesTable/EmptyState.tsx     |  2 +-
 src/Components/ImagesTable/ImageDetails.tsx   | 48 +++++++++++--------
 src/Components/ImagesTable/ImagesTable.tsx    |  2 +-
 src/Components/ImagesTable/Instance.tsx       |  4 +-
 src/Components/ImagesTable/Status.tsx         | 14 +++---
 src/Components/LandingPage/LandingPage.scss   |  6 +--
 src/Components/LandingPage/Quickstarts.tsx    | 18 +++----
 .../ShareImageModal/RegionsSelect.tsx         |  2 +-
 .../sharedComponents/BetaLabel.scss           |  4 +-
 .../sharedComponents/ImageBuilderHeader.tsx   |  2 +-
 26 files changed, 122 insertions(+), 112 deletions(-)

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss
index b3f3c566..ad52466f 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.scss
+++ b/src/Components/CreateImageWizard/CreateImageWizard.scss
@@ -15,11 +15,11 @@
 }
 
 .pf-c-form {
-    --pf-c-form--GridGap: var(--pf-global--spacer--md);
+    --pf-c-form--GridGap: var(--pf-v5-global--spacer--md);
 }
 
 .pf-c-form__group-label {
-    --pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--xs);
+    --pf-c-form__group-label--PaddingBottom: var(--pf-v5-global--spacer--xs);
 }
 
 .tiles {
@@ -33,9 +33,9 @@
 
 .pf-c-tile:focus {
     --pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
-    --pf-c-tile__icon--Color: var(---pf-global--Color--100);
-    --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-    --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-tile__icon--Color: var(---pf-v5-global--Color--100);
+    --pf-c-tile--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+    --pf-c-tile--before--BorderColor: var(--pf-v5-global--BorderColor--100);
 }
 
 .pf-c-tile.pf-m-selected:focus {
@@ -48,12 +48,12 @@
     height: 1em;
 }
 
-.pf-u-min-width {
-    --pf-u-min-width--MinWidth: 18ch;
+.pf-v5-u-min-width {
+    --pf-v5-u-min-width--MinWidth: 18ch;
 }
 
-.pf-u-max-width {
-    --pf-u-max-width--MaxWidth: 26rem;
+.pf-v5-u-max-width {
+    --pf-v5-u-max-width--MaxWidth: 26rem;
 }
 
 ul.pf-m-plain {
diff --git a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
index e30066b8..cd5959a3 100644
--- a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
+++ b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
@@ -27,7 +27,7 @@ const FileSystemAutomaticPartition = () => {
           icon={<ExternalLinkAltIcon />}
           iconPosition="right"
           href={FILE_SYSTEM_CUSTOMIZATION_URL}
-          className="pf-u-pl-0"
+          className="pf-v5-u-pl-0"
         >
           Customizing file systems during the image creation
         </Button>
diff --git a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
index c1b555a0..49288cf0 100644
--- a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
+++ b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
@@ -65,7 +65,7 @@ const FileSystemConfiguration = () => {
             icon={<ExternalLinkAltIcon />}
             iconPosition="right"
             href={FILE_SYSTEM_CUSTOMIZATION_URL}
-            className="pf-u-pl-0"
+            className="pf-v5-u-pl-0"
           >
             Read more about manual configuration here
           </Button>
@@ -83,7 +83,7 @@ const FileSystemConfiguration = () => {
         <Button
           ouiaId="add-partition"
           data-testid="file-system-add-partition"
-          className="pf-u-text-align-left"
+          className="pf-v5-u-text-align-left"
           variant="link"
           icon={<PlusCircleIcon />}
           onClick={handleAddPartition}
diff --git a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
index dc59b15a..08d39602 100644
--- a/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
+++ b/src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
@@ -54,7 +54,7 @@ export const MinimumSizePopover = () => {
         variant="plain"
         aria-label="File system configuration info"
         aria-describedby="file-system-configuration-info"
-        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+        className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
       >
         <HelpIcon />
       </Button>
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
index c969ff9e..dacd1f02 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
@@ -98,7 +98,7 @@ const TargetEnvironment = () => {
         <div className="tiles">
           {supportedEnvironments?.includes('aws') && (
             <Tile
-              className="tile pf-u-mr-sm"
+              className="tile pf-v5-u-mr-sm"
               data-testid="upload-aws"
               title="Amazon Web Services"
               icon={
@@ -120,7 +120,7 @@ const TargetEnvironment = () => {
           )}
           {supportedEnvironments?.includes('gcp') && (
             <Tile
-              className="tile pf-u-mr-sm"
+              className="tile pf-v5-u-mr-sm"
               data-testid="upload-google"
               title="Google Cloud Platform"
               icon={
@@ -144,7 +144,7 @@ const TargetEnvironment = () => {
           )}
           {supportedEnvironments?.includes('azure') && (
             <Tile
-              className="tile pf-u-mr-sm"
+              className="tile pf-v5-u-mr-sm"
               data-testid="upload-azure"
               title="Microsoft Azure"
               icon={
@@ -168,7 +168,7 @@ const TargetEnvironment = () => {
           )}
           {supportedEnvironments?.includes('oci') && (
             <Tile
-              className="tile pf-u-mr-sm"
+              className="tile pf-v5-u-mr-sm"
               data-testid="upload-oci"
               title="Oracle Cloud Infrastructure"
               icon={
@@ -193,7 +193,7 @@ const TargetEnvironment = () => {
         <>
           <FormGroup
             label={<Text component={TextVariants.small}>Private cloud</Text>}
-            className="pf-u-mt-sm"
+            className="pf-v5-u-mt-sm"
             data-testid="target-private"
           >
             <Checkbox
@@ -243,7 +243,7 @@ const TargetEnvironment = () => {
                             }
                           >
                             <Button
-                              className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+                              className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
                               variant="plain"
                               aria-label="About OVA file"
                               isInline
@@ -267,7 +267,7 @@ const TargetEnvironment = () => {
                     />
                   )}
                   <Radio
-                    className="pf-u-mt-sm"
+                    className="pf-v5-u-mt-sm"
                     name="vsphere-radio"
                     aria-label="VMware vSphere radio button VMDK"
                     id="vsphere-radio-vmdk"
@@ -290,7 +290,7 @@ const TargetEnvironment = () => {
                           }
                         >
                           <Button
-                            className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+                            className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
                             variant="plain"
                             aria-label="About VMDK file"
                             isInline
diff --git a/src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx b/src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx
index 06810553..5af2a9e9 100644
--- a/src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx
+++ b/src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx
@@ -76,7 +76,7 @@ const OpenSCAPFGLabel = () => {
           variant="plain"
           aria-label="About OpenSCAP"
           isInline
-          className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
+          className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
         >
           <HelpIcon />
         </Button>
diff --git a/src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx b/src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx
index 55e79c1b..ccece346 100644
--- a/src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx
+++ b/src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx
@@ -102,7 +102,7 @@ export const OscapProfileInformation = ({
             <TextList component={TextListVariants.dl}>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Profile description:
               </TextListItem>
@@ -111,7 +111,7 @@ export const OscapProfileInformation = ({
               </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Operating system:
               </TextListItem>
@@ -120,7 +120,7 @@ export const OscapProfileInformation = ({
               </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Reference ID:
               </TextListItem>
@@ -132,7 +132,7 @@ export const OscapProfileInformation = ({
               </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Kernel arguments:
               </TextListItem>
@@ -145,7 +145,7 @@ export const OscapProfileInformation = ({
               </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Disabled services:
               </TextListItem>
@@ -158,7 +158,7 @@ export const OscapProfileInformation = ({
               </TextListItem>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Enabled services:
               </TextListItem>
diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
index d35c9856..883b1a34 100644
--- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
+++ b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
@@ -541,7 +541,7 @@ const Packages = () => {
                   </EmptyStateActions>
                   <EmptyStateActions>
                     <Button
-                      className="pf-u-pt-md"
+                      className="pf-v5-u-pt-md"
                       variant="link"
                       isInline
                       component="a"
@@ -1035,10 +1035,10 @@ const Packages = () => {
                     variant="plain"
                     aria-label="About included packages"
                     component="span"
-                    className="pf-u-p-0"
+                    className="pf-v5-u-p-0"
                     isInline
                   >
-                    <HelpIcon className="pf-u-ml-xs" />
+                    <HelpIcon className="pf-v5-u-ml-xs" />
                   </Button>
                 </Popover>
               </Td>
@@ -1308,7 +1308,7 @@ const Packages = () => {
                           variant="plain"
                           aria-label="About included repositories"
                           component="span"
-                          className="pf-u-p-0"
+                          className="pf-v5-u-p-0"
                           size="sm"
                           isInline
                         >
@@ -1339,7 +1339,7 @@ const Packages = () => {
                           variant="plain"
                           aria-label="About other repositories"
                           component="span"
-                          className="pf-u-p-0"
+                          className="pf-v5-u-p-0"
                           size="sm"
                           isInline
                         >
diff --git a/src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx b/src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
index b477ad89..6ef60a47 100644
--- a/src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
+++ b/src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
@@ -23,7 +23,7 @@ const PackageInfoNotAvailablePopover = () => {
       <Button
         variant="plain"
         aria-label="Package description"
-        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+        className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
       >
         <HelpIcon />
       </Button>
diff --git a/src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx b/src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
index b092f073..fea15ed2 100644
--- a/src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
+++ b/src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
@@ -80,7 +80,7 @@ const ActivationKeyInformation = (): JSX.Element => {
                 <Button
                   variant="plain"
                   aria-label="About additional repositories"
-                  className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+                  className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
                 >
                   <HelpIcon />
                 </Button>
@@ -88,7 +88,7 @@ const ActivationKeyInformation = (): JSX.Element => {
             </TextListItem>
             <TextListItem
               component={TextListItemVariants.dd}
-              className="pf-u-display-flex pf-u-align-items-flex-end"
+              className="pf-v5-u-display-flex pf-v5-u-align-items-flex-end"
             >
               {activationKeyInfo.body?.additionalRepositories &&
               activationKeyInfo.body?.additionalRepositories?.length > 0 ? (
@@ -126,7 +126,7 @@ const ActivationKeyInformation = (): JSX.Element => {
                     data-testid="repositories-popover-button"
                     variant="link"
                     aria-label="Show additional repositories"
-                    className="pf-u-pl-0 pf-u-pt-0 pf-u-pb-0"
+                    className="pf-v5-u-pl-0 pf-v5-u-pt-0 pf-v5-u-pb-0"
                   >
                     {activationKeyInfo.body?.additionalRepositories?.length}{' '}
                     repositories
diff --git a/src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx b/src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
index 25e9c666..38c31804 100644
--- a/src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
+++ b/src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
@@ -76,7 +76,7 @@ export const PopoverActivation = () => {
         variant="plain"
         aria-label="Activation key popover"
         aria-describedby="subscription-activation-key"
-        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
+        className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
       >
         <HelpIcon />
       </Button>
diff --git a/src/Components/CreateImageWizard/steps/Registration/Registration.tsx b/src/Components/CreateImageWizard/steps/Registration/Registration.tsx
index e017e6e0..69cace8a 100644
--- a/src/Components/CreateImageWizard/steps/Registration/Registration.tsx
+++ b/src/Components/CreateImageWizard/steps/Registration/Registration.tsx
@@ -48,7 +48,7 @@ const InsightsPopover = () => {
     >
       <Button
         variant="plain"
-        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+        className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
         aria-label="About remote host configuration (rhc)"
         isInline
       >
@@ -87,7 +87,7 @@ const RhcPopover = () => {
     >
       <Button
         variant="plain"
-        className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
+        className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
         aria-label="About remote host configuration (rhc)"
         isInline
       >
@@ -152,7 +152,7 @@ const Registration = () => {
         body={
           showOptions && (
             <Checkbox
-              className="pf-u-ml-lg"
+              className="pf-v5-u-ml-lg"
               label={
                 <>
                   Enable predictive analytics and management capabilities
diff --git a/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx b/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx
index 7aa1057c..341f45e9 100644
--- a/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx
+++ b/src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx
@@ -74,11 +74,11 @@ const RepositoriesStatus = ({
               <Alert
                 variant={repoStatus === 'Invalid' ? 'danger' : 'warning'}
                 title={repoStatus}
-                className="pf-u-pb-sm"
+                className="pf-v5-u-pb-sm"
                 isInline
                 isPlain
               />
-              <p className="pf-u-pb-md">Cannot fetch {repoUrl}</p>
+              <p className="pf-v5-u-pb-md">Cannot fetch {repoUrl}</p>
               {(repoIntrospections || repoFailCount) && (
                 <>
                   <DescriptionList
@@ -124,7 +124,7 @@ const RepositoriesStatus = ({
             </>
           }
         >
-          <Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
+          <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
             {repoStatus === 'Invalid' && (
               <ExclamationCircleIcon className="error" />
             )}
diff --git a/src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx b/src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
index f9bc4fc1..03ca4c8b 100644
--- a/src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
+++ b/src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
@@ -42,7 +42,7 @@ export default function Empty({ hasFilterValue, refetch }: EmptyProps) {
           component="a"
           target="_blank"
           href={CONTENT_URL}
-          className="pf-u-mr-sm"
+          className="pf-v5-u-mr-sm"
         >
           Go to repositories
         </Button>
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
index 02985504..d91be19b 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
@@ -105,7 +105,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         data-testid={testId}
         component="span"
         onClick={() => revisitStep(stepId)}
-        className="pf-u-p-0 pf-u-font-weight-bold"
+        className="pf-v5-u-p-0 pf-v5-u-font-weight-bold"
         isInline
       >
         Revisit step <ArrowRightIcon />
@@ -123,7 +123,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         <TextList component={TextListVariants.dl}>
           <TextListItem
             component={TextListItemVariants.dt}
-            className="pf-u-min-width pf-v5-u-text-align-left"
+            className="pf-v5-u-min-width pf-v5-u-text-align-left"
           >
             <Button variant="link" component="span" isInline>
               {label}
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
index fdbeebf7..4c5b1948 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -76,7 +76,7 @@ import { PopoverActivation } from '../Registration/ActivationKeysList';
 
 const ExpirationWarning = () => {
   return (
-    <div className="pf-u-mr-sm pf-u-font-size-sm pf-v5-u-warning-color-200">
+    <div className="pf-v5-u-mr-sm pf-v5-u-font-size-sm pf-v5-u-warning-color-200">
       <ExclamationTriangleIcon /> Expires 14 days after creation
     </div>
   );
@@ -105,7 +105,7 @@ export const ImageOutputList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Release
         </TextListItem>
@@ -131,7 +131,7 @@ export const FSCList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Configuration type
         </TextListItem>
@@ -155,7 +155,7 @@ export const FSCList = () => {
                   variant="link"
                   aria-label="File system configuration info"
                   aria-describedby="file-system-configuration-info"
-                  className="pf-u-pt-0 pf-u-pb-0"
+                  className="pf-v5-u-pt-0 pf-v5-u-pb-0"
                 >
                   View partitions
                 </Button>
@@ -225,7 +225,7 @@ export const TargetEnvAWSList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Image type
         </TextListItem>
@@ -267,7 +267,7 @@ export const TargetEnvGCPList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Image type
         </TextListItem>
@@ -330,7 +330,7 @@ export const TargetEnvAzureList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Image type
         </TextListItem>
@@ -387,7 +387,7 @@ export const TargetEnvOciList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Object Storage URL
         </TextListItem>
@@ -405,7 +405,7 @@ export const TargetEnvOtherList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Image type
         </TextListItem>
@@ -485,7 +485,7 @@ export const ContentList = ({
             <>
               <TextListItem
                 component={TextListItemVariants.dt}
-                className="pf-u-min-width"
+                className="pf-v5-u-min-width"
               >
                 Repository snapshot
               </TextListItem>
@@ -509,7 +509,7 @@ export const ContentList = ({
                   <Button
                     variant="link"
                     aria-label="Snapshot method"
-                    className="pf-u-p-0"
+                    className="pf-v5-u-p-0"
                     isDisabled={noRepositoriesSelected || isLoading || isError}
                     isLoading={isLoading}
                   >
@@ -552,7 +552,7 @@ export const ContentList = ({
                 <Button
                   variant="link"
                   aria-label="About custom repositories"
-                  className="pf-u-p-0"
+                  className="pf-v5-u-p-0"
                 >
                   {customRepositories?.length +
                     recommendedRepositories.length || 0}
@@ -564,7 +564,7 @@ export const ContentList = ({
           </TextListItem>
           <TextListItem
             component={TextListItemVariants.dt}
-            className="pf-u-min-width"
+            className="pf-v5-u-min-width"
           >
             Additional packages
           </TextListItem>
@@ -583,7 +583,7 @@ export const ContentList = ({
                 <Button
                   variant="link"
                   aria-label="About packages"
-                  className="pf-u-p-0"
+                  className="pf-v5-u-p-0"
                 >
                   {packages?.length + groups?.length}
                 </Button>
@@ -615,7 +615,7 @@ export const RegisterLaterList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           Registration type
         </TextListItem>
@@ -644,7 +644,7 @@ export const RegisterNowList = () => {
         <TextList component={TextListVariants.dl}>
           <TextListItem
             component={TextListItemVariants.dt}
-            className="pf-u-min-width"
+            className="pf-v5-u-min-width"
           >
             Registration type
           </TextListItem>
@@ -708,7 +708,7 @@ export const DetailsList = () => {
           <>
             <TextListItem
               component={TextListItemVariants.dt}
-              className="pf-u-min-width"
+              className="pf-v5-u-min-width"
             >
               Blueprint name
             </TextListItem>
@@ -721,7 +721,7 @@ export const DetailsList = () => {
           <>
             <TextListItem
               component={TextListItemVariants.dt}
-              className="pf-u-min-width"
+              className="pf-v5-u-min-width"
             >
               Description
             </TextListItem>
@@ -747,7 +747,7 @@ export const FirstBootList = () => {
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}
-          className="pf-u-min-width"
+          className="pf-v5-u-min-width"
         >
           First boot script
         </TextListItem>
diff --git a/src/Components/ImagesTable/EmptyState.tsx b/src/Components/ImagesTable/EmptyState.tsx
index 148c44ae..a5996b4c 100644
--- a/src/Components/ImagesTable/EmptyState.tsx
+++ b/src/Components/ImagesTable/EmptyState.tsx
@@ -99,7 +99,7 @@ const EmptyImagesTable = () => {
                 iconPosition="right"
                 isInline
                 href={CREATING_IMAGES_WITH_IB_SERVICE_URL}
-                className="pf-u-pt-md"
+                className="pf-v5-u-pt-md"
               >
                 Image builder for RPM-DNF documentation
               </Button>
diff --git a/src/Components/ImagesTable/ImageDetails.tsx b/src/Components/ImagesTable/ImageDetails.tsx
index efae389a..f735be8d 100644
--- a/src/Components/ImagesTable/ImageDetails.tsx
+++ b/src/Components/ImagesTable/ImageDetails.tsx
@@ -40,7 +40,7 @@ const SourceNotFoundPopover = () => {
           <Alert
             variant="danger"
             title="Source name cannot be loaded"
-            className="pf-u-pb-md"
+            className="pf-v5-u-pb-md"
             isInline
             isPlain
           />
@@ -63,7 +63,7 @@ const SourceNotFoundPopover = () => {
         </>
       }
     >
-      <Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
+      <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
         <div className="failure-button">Source name cannot be loaded</div>
       </Button>
     </Popover>
@@ -140,8 +140,10 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -190,7 +192,7 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
       </DescriptionList>
       <>
         <br />
-        <div className="pf-u-font-weight-bold pf-u-pb-md">
+        <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
           Cloud Provider Identifiers
         </div>
       </>
@@ -229,8 +231,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -264,10 +268,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
         </DescriptionListGroup>
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Image name</DescriptionListTerm>
           <DescriptionListDescription>
@@ -314,8 +318,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -351,10 +357,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
         )}
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Image name</DescriptionListTerm>
           <DescriptionListDescription>
@@ -393,8 +399,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -414,10 +422,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
         </DescriptionListGroup>
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Object Storage URL</DescriptionListTerm>
           <DescriptionListDescription>
@@ -445,8 +453,10 @@ type AwsS3DetailsPropTypes = {
 export const AwsS3Details = ({ compose }: AwsS3DetailsPropTypes) => {
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx
index 4405be56..f8ec8220 100644
--- a/src/Components/ImagesTable/ImagesTable.tsx
+++ b/src/Components/ImagesTable/ImagesTable.tsx
@@ -229,7 +229,7 @@ const ImagesTable = () => {
           );
         })}
       </Table>
-      <Toolbar className="pf-u-mb-xl">
+      <Toolbar className="pf-v5-u-mb-xl">
         <ToolbarContent>
           <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             <Pagination
diff --git a/src/Components/ImagesTable/Instance.tsx b/src/Components/ImagesTable/Instance.tsx
index 3e66bef2..c8868f57 100644
--- a/src/Components/ImagesTable/Instance.tsx
+++ b/src/Components/ImagesTable/Instance.tsx
@@ -316,7 +316,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
               iconPosition="right"
               // TO DO update the link after documentation is up
               href={FILE_SYSTEM_CUSTOMIZATION_URL}
-              className="pf-u-pl-0"
+              className="pf-v5-u-pl-0"
             >
               Read more about launching OCI images
             </Button>
@@ -325,7 +325,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
       >
         <Button
           variant="link"
-          className="pf-u-p-0 pf-u-font-size-sm"
+          className="pf-v5-u-p-0 pf-v5-u-font-size-sm"
           isDisabled={data?.image_status.status === 'success' ? false : true}
         >
           Image link
diff --git a/src/Components/ImagesTable/Status.tsx b/src/Components/ImagesTable/Status.tsx
index 06299eaf..53e57d96 100644
--- a/src/Components/ImagesTable/Status.tsx
+++ b/src/Components/ImagesTable/Status.tsx
@@ -276,8 +276,8 @@ type StatusPropTypes = {
 
 const Status = ({ icon, text }: StatusPropTypes) => {
   return (
-    <Flex className="pf-u-align-items-baseline pf-m-nowrap">
-      <div className="pf-u-mr-sm">{icon}</div>
+    <Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
+      <div className="pf-v5-u-mr-sm">{icon}</div>
       <p>{text}</p>
     </Flex>
   );
@@ -312,8 +312,8 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
   }
 
   return (
-    <Flex className="pf-u-align-items-baseline pf-m-nowrap">
-      <div className="pf-u-mr-sm">{icon}</div>
+    <Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
+      <div className="pf-v5-u-mr-sm">{icon}</div>
       <Popover
         data-testid="errorstatus-popover"
         position="bottom"
@@ -321,7 +321,7 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
         bodyContent={
           <>
             <Alert variant="danger" title={text} isInline isPlain />
-            <Text className="pf-u-pt-md pf-u-pb-md">{reason}</Text>
+            <Text className="pf-v5-u-pt-md pf-v5-u-pb-md">{reason}</Text>
             <Panel isScrollable>
               <PanelMain maxHeight="25rem">
                 <CodeBlock>
@@ -336,14 +336,14 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
                   reason + '\n\n' + detailsArray.join('\n')
                 )
               }
-              className="pf-u-pl-0 pf-u-mt-md"
+              className="pf-v5-u-pl-0 pf-v5-u-mt-md"
             >
               Copy error text to clipboard <CopyIcon />
             </Button>
           </>
         }
       >
-        <Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
+        <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
           <div className="failure-button">{text}</div>
         </Button>
       </Popover>
diff --git a/src/Components/LandingPage/LandingPage.scss b/src/Components/LandingPage/LandingPage.scss
index e46af229..1dfb6fa0 100644
--- a/src/Components/LandingPage/LandingPage.scss
+++ b/src/Components/LandingPage/LandingPage.scss
@@ -1,13 +1,13 @@
 .pf-c-form__group-label-help {
-    color: var(--pf-global--icon--Color--light);
+    color: var(--pf-v5-global--icon--Color--light);
 }
 
 .pf-c-form__group-label-help:active {
-    color: var(--pf-global--icon--Color--dark);
+    color: var(--pf-v5-global--icon--Color--dark);
 }
 
 .expand-section {
-    background-color: var(--pf-global--palette--white);
+    background-color: var(--pf-v5-global--palette--white);
 }
 
 .sidebar-panel {
diff --git a/src/Components/LandingPage/Quickstarts.tsx b/src/Components/LandingPage/Quickstarts.tsx
index f9148e89..72a07c77 100644
--- a/src/Components/LandingPage/Quickstarts.tsx
+++ b/src/Components/LandingPage/Quickstarts.tsx
@@ -13,13 +13,13 @@ export const Quickstarts = () => {
 
   return (
     <ExpandableSection
-      className="pf-m-light pf-u-mb-xl expand-section"
+      className="pf-m-light pf-v5-u-mb-xl expand-section"
       toggleText="Help get started with new features"
       onToggle={(_event, val) => setShowHint(val)}
       isExpanded={showHint}
       displaySize="lg"
     >
-      <p className="pf-u-pt-sm">
+      <p className="pf-v5-u-pt-sm">
         <Button
           icon={<ArrowRightIcon />}
           iconPosition="right"
@@ -27,12 +27,12 @@ export const Quickstarts = () => {
           isInline
           component="a"
           onClick={activateQuickstart('insights-launch-aws')}
-          className="pf-u-font-weight-bold"
+          className="pf-v5-u-font-weight-bold"
         >
           Launch an AWS Image
         </Button>
       </p>
-      <p className="pf-u-pt-sm">
+      <p className="pf-v5-u-pt-sm">
         <Button
           icon={<ArrowRightIcon />}
           iconPosition="right"
@@ -40,12 +40,12 @@ export const Quickstarts = () => {
           isInline
           component="a"
           onClick={activateQuickstart('insights-launch-azure')}
-          className="pf-u-font-weight-bold"
+          className="pf-v5-u-font-weight-bold"
         >
           Launch an Azure Image
         </Button>
       </p>
-      <p className="pf-u-pt-sm">
+      <p className="pf-v5-u-pt-sm">
         <Button
           icon={<ArrowRightIcon />}
           iconPosition="right"
@@ -53,12 +53,12 @@ export const Quickstarts = () => {
           isInline
           component="a"
           onClick={activateQuickstart('insights-launch-gcp')}
-          className="pf-u-font-weight-bold"
+          className="pf-v5-u-font-weight-bold"
         >
           Launch a GCP Image
         </Button>
       </p>
-      <p className="pf-u-pt-sm">
+      <p className="pf-v5-u-pt-sm">
         <Button
           icon={<ArrowRightIcon />}
           iconPosition="right"
@@ -66,7 +66,7 @@ export const Quickstarts = () => {
           isInline
           component="a"
           onClick={activateQuickstart('insights-custom-repos')}
-          className="pf-u-font-weight-bold"
+          className="pf-v5-u-font-weight-bold"
         >
           Build an Image with Custom Content
         </Button>
diff --git a/src/Components/ShareImageModal/RegionsSelect.tsx b/src/Components/ShareImageModal/RegionsSelect.tsx
index 6514b7dd..98ca12be 100644
--- a/src/Components/ShareImageModal/RegionsSelect.tsx
+++ b/src/Components/ShareImageModal/RegionsSelect.tsx
@@ -224,7 +224,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
             <Button
               variant="plain"
               aria-label="About regions"
-              className="pf-u-pl-sm header-button"
+              className="pf-v5-u-pl-sm header-button"
               isInline
             >
               <HelpIcon />
diff --git a/src/Components/sharedComponents/BetaLabel.scss b/src/Components/sharedComponents/BetaLabel.scss
index be1fbd87..9bdcae20 100644
--- a/src/Components/sharedComponents/BetaLabel.scss
+++ b/src/Components/sharedComponents/BetaLabel.scss
@@ -1,5 +1,5 @@
 .beta-label {
-    --pf-c-label--BackgroundColor: var(--pf-global--palette--green-300);
-    --pf-c-label__content--before--BorderColor: var(--pf-global--palette--green-300);
+    --pf-c-label--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    --pf-c-label__content--before--BorderColor: var(--pf-v5-global--palette--green-300);
     margin-right: .5rem;
 }
diff --git a/src/Components/sharedComponents/ImageBuilderHeader.tsx b/src/Components/sharedComponents/ImageBuilderHeader.tsx
index 711bc693..ce2a7127 100644
--- a/src/Components/sharedComponents/ImageBuilderHeader.tsx
+++ b/src/Components/sharedComponents/ImageBuilderHeader.tsx
@@ -84,7 +84,7 @@ const AboutImageBuilderPopover = () => {
       <Button
         variant="plain"
         aria-label="About image builder"
-        className="pf-u-pl-sm header-button"
+        className="pf-v5-u-pl-sm header-button"
       >
         <HelpIcon />
       </Button>