Migrate other styles to PF6

src/gitops/components/application/ApplicationSyncStatusTab.tsx

@@ -344,7 +344,7 @@ export const useResourceColumnsDV = (getSortParams: (columnIndex: number) => ThP
       cell: '',
       props: {
         'aria-label': 'actions',
-        className: 'dropdown-kebab-pf pf-c-table__action',
+        className: 'dropdown-kebab-pf pf-v6-c-table__action',
       },
     },
   ];
@@ -410,7 +410,7 @@ const useResourceRowsDV = (
         ),
         props: {
           style: { paddingTop: 8, paddingRight: 0, paddingLeft: 0, width: 10 },
-          className: 'dropdown-kebab-pf pf-c-table__action',
+          className: 'dropdown-kebab-pf pf-v6-c-table__action',
         },
       },
     ]);

src/gitops/components/application/Conditions/ConditionsPopover.tsx

@@ -24,7 +24,7 @@ export const ConditionsPopover: React.FC<ConditionsPopoverProps> = ({ conditions
       headerContent={<div>Application Conditions</div>}
       bodyContent={
         <div>
-          <div className="pf-u-pt-sm pf-u-pb-md">
+          <div className="pf-v6-u-pt-sm pf-v6-u-pb-md">
             A list of currently observed application conditions
           </div>
 
@@ -38,7 +38,7 @@ export const ConditionsPopover: React.FC<ConditionsPopoverProps> = ({ conditions
           >
             {conditions.map((condition) => (
               <StatusPopupItem value={condition.type} key={condition.type}>
-                <span className="pf-u-pr-md">{condition.message}</span>
+                <span className="pf-v6-u-pr-md">{condition.message}</span>
               </StatusPopupItem>
             ))}
           </StatusPopupSection>

src/gitops/components/application/History/History.scss

@@ -1,5 +1,5 @@
 .gitops-plugin__history-id-column {
-    --pf-c-table--cell--Width: 140px;
-    --pf-c-table--cell--MinWidth: 140px;
-    --pf-c-table--cell--MaxWidth: 300px
+    --pf-v6-c-table--cell--Width: 140px;
+    --pf-v6-c-table--cell--MinWidth: 140px;
+    --pf-v6-c-table--cell--MaxWidth: 300px
 }

src/gitops/components/application/application-details-title.scss

@@ -12,7 +12,7 @@
 }
 
 // Breadcrumb styles
-.pf-c-breadcrumb.co-breadcrumb {
+.pf-v6-c-breadcrumb.co-breadcrumb {
   padding: var(--pf-v6-global--spacer--md) var(--pf-v6-global--spacer--lg);
   background-color: var(--pf-v6-global--BackgroundColor--100);
   border-bottom: 1px solid var(--pf-v6-global--BorderColor--100);

src/gitops/components/imageupdater/imageupdater-list.scss

@@ -1,6 +1,6 @@
 // Prevent vertical text wrapping in Name and Namespace columns
-.gitops-imageupdater-list .pf-c-table tbody td[data-label='Name'],
-.gitops-imageupdater-list .pf-c-table tbody td[data-label='Namespace'] {
+.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Name'],
+.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Namespace'] {
   white-space: nowrap !important;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -15,7 +15,7 @@
 }
 
 // Description column text truncation
-.gitops-imageupdater-list .pf-c-table tbody td[data-label='Description'] {
+.gitops-imageupdater-list .pf-v6-c-table tbody td[data-label='Description'] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/gitops/components/project/ProjectAllowDenyTab.tsx

@@ -30,22 +30,22 @@ import ResourceAllowDenyList from './ResourceAllowDenyList';
 const renderStringArray = (items: string[] | undefined, t: (key: string) => string) => {
   if (items && items.length > 0) {
     return (
-      <List isPlain className="pf-u-mt-sm">
+      <List isPlain className="pf-v6-u-mt-sm">
         {items.map((el, idx) => {
           const denyRule = isDenyRule(el);
           const displayValue = getDisplayValue(el);
           return (
             <ListItem key={idx}>
               {denyRule ? (
                 <span>
-                  <Badge isRead color="red" className="pf-u-mr-sm">
+                  <Badge isRead color="red" className="pf-v6-u-mr-sm">
                     {t('Deny')}
                   </Badge>
                   <code>{displayValue}</code>
                 </span>
               ) : (
                 <span>
-                  <Badge isRead color="green" className="pf-u-mr-sm">
+                  <Badge isRead color="green" className="pf-v6-u-mr-sm">
                     {t('Allow')}
                   </Badge>
                   <code>{displayValue}</code>
@@ -57,7 +57,7 @@ const renderStringArray = (items: string[] | undefined, t: (key: string) => stri
       </List>
     );
   } else {
-    return <div className="pf-u-text-align-center pf-u-mt-sm">{'-'}</div>;
+    return <div className="pf-v6-u-text-align-center pf-v6-u-mt-sm">{'-'}</div>;
   }
 };
 

src/gitops/components/project/ProjectRolesTab.tsx

@@ -268,7 +268,7 @@ const useRolesRowsDV = (roles: Role[], t: (key: string) => string): DataViewTr[]
           role.groups && role.groups.length > 0 ? (
             <div>
               {role.groups.map((group, idx) => (
-                <Badge key={idx} isRead color="blue" className="pf-u-mr-sm pf-u-mb-sm">
+                <Badge key={idx} isRead color="blue" className="pf-v6-u-mr-sm pf-v6-u-mb-sm">
                   {group}
                 </Badge>
               ))}
@@ -287,7 +287,7 @@ const useRolesRowsDV = (roles: Role[], t: (key: string) => string): DataViewTr[]
                 const formattedDescription = formatPolicyDescription(policy, t);
                 return (
                   <Tooltip key={idx} content={formattedDescription}>
-                    <Badge isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
+                    <Badge isRead color="grey" className="pf-v6-u-mr-sm pf-v6-u-mb-sm">
                       {policy}
                     </Badge>
                   </Tooltip>

src/gitops/components/project/ProjectSyncWindowsTab.tsx

@@ -327,13 +327,13 @@ const useSyncWindowsRowsDV = (
           window.applications && window.applications.length > 0 ? (
             <div>
               {window.applications.map((app, idx) => (
-                <Badge key={idx} isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
+                <Badge key={idx} isRead color="grey" className="pf-v6-u-mr-sm pf-v6-u-mb-sm">
                   {app}
                 </Badge>
               ))}
             </div>
           ) : (
-            <span className="pf-u-color-400">{t('All')}</span>
+            <span className="pf-v6-u-text-color-subtle">{t('All')}</span>
           ),
         id: `applications-${index}`,
         dataLabel: t('Applications'),
@@ -343,13 +343,13 @@ const useSyncWindowsRowsDV = (
           window.clusters && window.clusters.length > 0 ? (
             <div>
               {window.clusters.map((cluster, idx) => (
-                <Badge key={idx} isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
+                <Badge key={idx} isRead color="grey" className="pf-v6-u-mr-sm pf-v6-u-mb-sm">
                   {cluster}
                 </Badge>
               ))}
             </div>
           ) : (
-            <span className="pf-u-color-400">{t('All')}</span>
+            <span className="pf-v6-u-text-color-subtle">{t('All')}</span>
           ),
         id: `clusters-${index}`,
         dataLabel: t('Clusters'),
@@ -359,13 +359,13 @@ const useSyncWindowsRowsDV = (
           window.namespaces && window.namespaces.length > 0 ? (
             <div>
               {window.namespaces.map((ns, idx) => (
-                <Badge key={idx} isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
+                <Badge key={idx} isRead color="grey" className="pf-v6-u-mr-sm pf-v6-u-mb-sm">
                   {ns}
                 </Badge>
               ))}
             </div>
           ) : (
-            <span className="pf-u-color-400">{t('All')}</span>
+            <span className="pf-v6-u-text-color-subtle">{t('All')}</span>
           ),
         id: `namespaces-${index}`,
         dataLabel: t('Namespaces'),

src/gitops/components/project/project-list.scss

@@ -1,22 +1,19 @@
 // PF6 DataViewTh applies modifier="truncate" on headers. With table-layout: fixed, truncation
 // must happen on the sort-button label text so TableText can detect overflow and show tooltips.
 @mixin gitops-project-list-sortable-header-tooltip {
-  .pf-v6-c-table__button,
-  .pf-c-table__button {
+  .pf-v6-c-table__button {
     width: 100%;
     max-width: 100%;
     min-width: 0;
   }
 
-  .pf-v6-c-table__button-content,
-  .pf-c-table__button-content {
+  .pf-v6-c-table__button-content {
     width: 100%;
     max-width: 100%;
     min-width: 0;
   }
 
-  .pf-v6-c-table__text,
-  .pf-c-table__text {
+  .pf-v6-c-table__text {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -37,9 +34,7 @@
 
   .pf-v6-c-table__button,
   .pf-v6-c-table__button-content,
-  .pf-v6-c-table__text,
-  .pf-c-table__button,
-  .pf-c-table__text {
+  .pf-v6-c-table__text {
     overflow: visible;
     text-overflow: clip;
     max-width: none;
@@ -48,8 +43,7 @@
 }
 
 .gitops-project-list {
-  .pf-v6-c-table,
-  .pf-c-table {
+  .pf-v6-c-table {
     table-layout: fixed;
     width: 100%;
   }

src/gitops/components/rollout/RolloutList.tsx

@@ -370,7 +370,7 @@ export const useRolloutsRowsDV = (
               namespace={obj.metadata.namespace}
               inline={true}
             >
-              <span className="pf-u-pl-sm">
+              <span className="pf-v6-u-pl-sm">
                 {isApplicationRefreshing(obj) && <Spinner size="sm" />}
               </span>
             </ResourceLink>
@@ -431,7 +431,7 @@ export const useRolloutsRowsDV = (
           <>
             {obj.status && obj.status.selector ? (
               <span style={{ display: 'inline', alignItems: 'center' }}>
-                <SearchIcon className="pf-u-pr-xs" />
+                <SearchIcon className="pf-v6-u-pr-xs" />
                 <Link
                   to={getSelectorSearchURL(
                     obj.metadata.namespace,

src/gitops/components/rollout/components/PodList/PodList.tsx

@@ -318,7 +318,7 @@ const usePodRowsDV = (podsList: PodKind[], memResults, cpuResults, namespace): D
       {
         id: 'actions-' + index,
         cell: <PodRowActions pod={obj} index={index} />,
-        props: { className: 'dropdown-kebab-pf pf-c-table__action' },
+        props: { className: 'dropdown-kebab-pf pf-v6-c-table__action' },
       },
     ]);
   });

src/gitops/components/rollout/revisions/Revisions.tsx

@@ -177,7 +177,7 @@ const getRowsDV = (
           namespace={obj.metadata?.namespace}
           inline={true}
         >
-          <span className="pf-u-pl-sm">
+          <span className="pf-v6-u-pl-sm">
             {isApplicationRefreshing(obj) && <Spinner size="sm" />}
           </span>
         </ResourceLink>

src/gitops/components/shared/ApplicationList.tsx

@@ -378,7 +378,7 @@ const useApplicationRowsDV = (applicationsList, namespace): DataViewTr[] => {
               namespace={app.metadata.namespace}
               inline={true}
             >
-              <span className="pf-u-pl-sm">
+              <span className="pf-v6-u-pl-sm">
                 {isApplicationRefreshing(app) && <Spinner size="sm" />}
               </span>
             </ResourceLink>

src/gitops/components/shared/DetailsPageHeader/DetailsPageHeader.tsx

@@ -73,7 +73,7 @@ const DetailsPageHeader: React.FC<DetailsPageHeaderProps> = ({
       <div>
         <DetailsPageTitle
           breadcrumb={
-            <Breadcrumb className="pf-c-breadcrumb co-breadcrumb">
+            <Breadcrumb className="pf-v6-c-breadcrumb co-breadcrumb">
               <BreadcrumbItem>
                 <Link
                   to={`/k8s/ns/${namespace || DEFAULT_NAMESPACE}/${

src/gitops/components/shared/ResourceYAMLTab/ResourceYAMLTab.scss

@@ -10,8 +10,7 @@
     overflow: hidden !important; // Override parent scrolling for YAML tab
   }
 
-  .pf-v6-c-code-editor:focus-within,
-  .pf-c-code-editor:focus-within {
+  .pf-v6-c-code-editor:focus-within {
     box-shadow: none !important;
     outline: none !important;
   }

src/gitops/utils/components/Conditions/Conditions.tsx

@@ -67,7 +67,7 @@ export const Conditions: React.FC<ConditionsProps> = ({ conditions }) => {
         </Table>
       ) : (
         <div className="cos-status-box">
-          <div className="pf-u-text-align-center">
+          <div className="pf-v6-u-text-align-center">
             {t('plugin__gitops-public~No conditions found')}
           </div>
         </div>