fix: update remaining pf-v5 class names and CSS vars to pf-v6 (#881)

Ran @patternfly/class-name-updater and @patternfly/pf-codemods to
catch leftover PatternFly v5 references missed during the v5 to v6
migration. Manually fixed SCSS selectors and CSS variables that the
automated tools did not cover, and regenerated test snapshots.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: tahmidefaz

src/components/recently-visited/recently-visited.tsx

@@ -26,8 +26,8 @@ const RecentlyVisited = () => {
   const lastVisited = useLastVisited();
   const lastVisitedData = lastVisited.slice(0, 10);
   return (
-    <Content className="pf-m-fill pf-v5-u-px-xl pf-v5-u-py-lg">
-      <Content component={ContentVariants.h3} className="pf-v5-u-mb-lg">
+    <Content className="pf-m-fill pf-v6-u-px-xl pf-v6-u-py-lg">
+      <Content component={ContentVariants.h3} className="pf-v6-u-mb-lg">
         Recently visited
       </Content>
       {lastVisitedData.map(({ bundle, pathname, title }, index) => (

src/components/widgets/explore-capabilities.tsx

@@ -73,7 +73,7 @@ const ExploreCapabilities: React.FunctionComponent = () => {
           <Card ouiaId={cardData.ouiaId} isFullHeight>
             <CardBody className="pf-v6-u-p-md pf-v6-u-text-align-center land-c-card__body-explore">
               <img
-                className="pf-v5-u-justify-content-center"
+                className="pf-v6-u-justify-content-center"
                 src={cardData.img}
                 alt={cardData.alt}
               />

src/components/widgets/recently-visited.tsx

@@ -30,7 +30,7 @@ const RecentlyVisited = () => {
   const lastVisited = useLastVisited();
   const lastVisitedData = lastVisited.slice(0, 10);
   return (
-    <Gallery hasGutter className="widget-recently-visited pf-v5-u-m-md">
+    <Gallery hasGutter className="widget-recently-visited pf-v6-u-m-md">
       {lastVisitedData.map(({ bundle, pathname, title }, index) => (
         <Fragment key={index}>
           <Content>

src/components/widgets/simple-service-widget.tsx

@@ -23,28 +23,28 @@ export const SimpleServiceWidget: React.FunctionComponent<
   return (
     <Card isPlain>
       <>
-        <CardBody className="pf-v5-u-p-md pf-v5-u-pb-0">
+        <CardBody className="pf-v6-u-p-md pf-v6-u-pb-0">
           <Content
             key={props.id}
-            className="pf-v5-u-display-flex pf-v5-u-flex-direction-column"
+            className="pf-v6-u-display-flex pf-v6-u-flex-direction-column"
           >
-            <Content component="p" className="pf-v5-u-flex-grow-1">
+            <Content component="p" className="pf-v6-u-flex-grow-1">
               {props.body}{' '}
             </Content>
           </Content>
         </CardBody>
-        <CardFooter className="pf-v5-u-p-md">
+        <CardFooter className="pf-v6-u-p-md">
           {props.isExternal ? (
             <a href={props.url}>
               {props.linkTitle}
-              <Icon className="pf-v5-u-ml-sm" isInline>
+              <Icon className="pf-v6-u-ml-sm" isInline>
                 <ExternalLinkAltIcon />
               </Icon>
             </a>
           ) : (
             <Link to={props.url}>
               {props.linkTitle}
-              <Icon className="pf-v5-u-ml-sm" isInline>
+              <Icon className="pf-v6-u-ml-sm" isInline>
                 <ArrowRightIcon />
               </Icon>
             </Link>

src/components/widgets/support-case-widget.scss

@@ -1,4 +1,4 @@
-.pf-v5-c-empty-state {
+.pf-v6-c-empty-state {
   height: 100%;
   padding: var(--pf-t--global--spacer--md);
   &__icon {

src/components/widgets/support-case-widget.tsx

@@ -235,7 +235,7 @@ const SupportCaseWidget: React.FunctionComponent = () => {
                 <Tr key={c.id}>
                   <Td dataLabel={columnNames.caseId}>
                     <Button
-                      className="pf-v5-u-pl-0"
+                      className="pf-v6-u-pl-0"
                       variant="link"
                       icon={<ExternalLinkAltIcon />}
                       iconPosition="end"

src/moduleEntries/PdfEntry.tsx

@@ -37,7 +37,7 @@ const PdfEntry = ({
   return (
     <>
       <h1>Services</h1>
-      <div className="pf-v5-u-m-xl">
+      <div className="pf-v6-u-m-xl">
         <Table>
           <Thead>
             <Tr>

src/routes/404.tsx

@@ -12,7 +12,7 @@ const isBeta = () => {
 
 const NotFound = () => (
   <div className="landing">
-    <section className="pf-v5-l-page__main-section pf-v5-c-page__main-section land-c-page__404">
+    <section className="pf-v6-l-page__main-section pf-v6-c-page__main-section land-c-page__404">
       <Title headingLevel="h1" size="3xl">
         404: We lost that page
       </Title>

src/routes/Logout.tsx

@@ -9,7 +9,7 @@ const onButtonClick = (url: string) => {
 };
 
 const Logout = () => (
-  <section className="pf-v5-l-page__main-section pf-v5-c-page__main-section land-c-page__logout">
+  <section className="pf-v6-l-page__main-section pf-v6-c-page__main-section land-c-page__logout">
     <Title headingLevel="h1" size="3xl">
       You have logged out.
     </Title>

src/routes/Maintenance.scss

@@ -3,10 +3,10 @@
     justify-content: center;
     text-align: center;
 
-    .pf-v5-c-empty-state { margin-top: 64px; }
+    .pf-v6-c-empty-state { margin-top: 64px; }
 
     svg {
-        margin-bottom: var(--pf-v5-c-empty-state__icon--MarginBottom);
+        margin-bottom: var(--pf-v6-c-empty-state__icon--MarginBottom);
         height: 100px;
     }
 }