Global replace “--pf-v6-global--spacer” with “--pf-t--global--spacer”

opendatahub-io · Jul 26, 2024 · 74111de · 74111de
1 parent d067079
commit 74111de
Show file tree

Hide file tree

Showing 26 changed files with 86 additions and 86 deletions.
diff --git a/frontend/src/app/AboutDialog.tsx b/frontend/src/app/AboutDialog.tsx
@@ -82,7 +82,7 @@ const AboutDialog: React.FC<AboutDialogProps> = ({ onClose }) => {
         </div>
         {error ? (
           <Alert
-            style={{ marginTop: 'var(--pf-v6-global--spacer--lg)' }}
+            style={{ marginTop: 'var(--pf-t--global--spacer--lg)' }}
             variant="danger"
             title="Problem loading product information"
           >

diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
@@ -14,7 +14,7 @@ body,
     border: 1px solid var(--pf-v6-global--BorderColor--100);
     display: flex;
     flex: 1;
-    margin: var(--pf-v6-global--spacer--md);
+    margin: var(--pf-t--global--spacer--md);
   }
 
   .pf-v6-c-app-launcher__group-title {

diff --git a/frontend/src/components/GenericSidebar.tsx b/frontend/src/components/GenericSidebar.tsx
@@ -24,7 +24,7 @@ const GenericSidebar: React.FC<GenericSidebarProps> = ({
   maxWidth,
 }) => (
   <Sidebar hasGutter>
-    <SidebarPanel variant="sticky" style={{ maxWidth, top: 'var(--pf-v6-global--spacer--md)' }}>
+    <SidebarPanel variant="sticky" style={{ maxWidth, top: 'var(--pf-t--global--spacer--md)' }}>
       <JumpLinks
         isVertical
         label="Jump to section"
@@ -38,7 +38,7 @@ const GenericSidebar: React.FC<GenericSidebarProps> = ({
         ))}
       </JumpLinks>
     </SidebarPanel>
-    <SidebarContent style={{ paddingBottom: 'var(--pf-v6-global--spacer--lg)' }}>
+    <SidebarContent style={{ paddingBottom: 'var(--pf-t--global--spacer--lg)' }}>
       {children}
     </SidebarContent>
   </Sidebar>

diff --git a/frontend/src/components/MarkdownView.scss b/frontend/src/components/MarkdownView.scss
@@ -2,10 +2,10 @@
   word-break: break-word;
 
   &--with-padding {
-    padding-bottom: var(--pf-v6-global--spacer--md);
+    padding-bottom: var(--pf-t--global--spacer--md);
 
     p {
-      margin-bottom: var(--pf-v6-global--spacer--sm);
+      margin-bottom: var(--pf-t--global--spacer--sm);
     }
   }
 
@@ -17,8 +17,8 @@
   h6 {
     font-family: var(--pf-v6-global--FontFamily--heading--sans-serif);
     font-weight: var(--pf-v6-global--FontWeight--normal);
-    margin-top: var(--pf-v6-global--spacer--md);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
+    margin-top: var(--pf-t--global--spacer--md);
+    margin-bottom: var(--pf-t--global--spacer--sm);
   }
 
   h1 {
@@ -37,21 +37,21 @@
   h5,
   h6 {
     font-size: var(--pf-v6-global--FontSize--md);
-    margin-top: var(--pf-v6-global--spacer--sm);
+    margin-top: var(--pf-t--global--spacer--sm);
   }
 
   ul,
   ol {
     margin-top: 0;
-    margin-bottom: var(--pf-v6-global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
   }
 
   ul {
     list-style: initial;
   }
 
   li {
-    margin-left: var(--pf-v6-global--spacer--lg);
+    margin-left: var(--pf-t--global--spacer--lg);
   }
 
   code,
@@ -69,8 +69,8 @@
 
   pre {
     display: block;
-    padding: var(--pf-v6-global--spacer--sm);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
+    padding: var(--pf-t--global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
     font-size: var(--pf-v6-global--FontSize--sm);
     color: var(--pf-v6-global--Color--300);
     word-break: break-all;

diff --git a/frontend/src/components/OdhCard.scss b/frontend/src/components/OdhCard.scss
@@ -21,20 +21,20 @@
   }
 
   &__partner-badge-container {
-    margin-top: calc(var(--pf-v6-global--spacer--sm) * -1);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
+    margin-top: calc(var(--pf-t--global--spacer--sm) * -1);
+    margin-bottom: var(--pf-t--global--spacer--sm);
   }
 
   &__partner-badge {
     background-color: var(--pf-v6-global--BackgroundColor--light-300);
     border-color: var(--pf-v6-global--BorderColor--200);
     border-style: solid;
     border-width: 1px;
-    border-radius: var(--pf-v6-global--spacer--md);
+    border-radius: var(--pf-t--global--spacer--md);
     font-size: var(--pf-v6-global--FontSize--xs);
     font-weight: var(--pf-v6-global--FontWeight--normal);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
-    padding: 0 var(--pf-v6-global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
+    padding: 0 var(--pf-t--global--spacer--sm);
 
     &.m-hidden {
       visibility: hidden;
@@ -46,14 +46,14 @@
       align-items: center;
 
       > svg {
-        margin-right: var(--pf-v6-global--spacer--xs);
+        margin-right: var(--pf-t--global--spacer--xs);
       }
     }
     &.odh-m-beta {
       color: var(--pf-v6-global--palette--gold-700);
       background-color: var(--pf-v6-global--palette--gold-50);
       border-color: var(--pf-v6-global--palette--gold-100);
-      padding: 0 var(--pf-v6-global--spacer--md);
+      padding: 0 var(--pf-t--global--spacer--md);
     }
   }
 
@@ -95,7 +95,7 @@
       font-size: var(--pf-v6-global--FontSize--md);
       padding: 0;
       > svg {
-        margin-left: var(--pf-v6-global--spacer--xs);
+        margin-left: var(--pf-t--global--spacer--xs);
       }
       &.m-hidden {
         visibility: hidden;

diff --git a/frontend/src/components/OdhListItem.scss b/frontend/src/components/OdhListItem.scss
@@ -44,20 +44,20 @@
   }
 
   &__partner-badge-container {
-    margin-top: calc(var(--pf-v6-global--spacer--sm) * -1);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
+    margin-top: calc(var(--pf-t--global--spacer--sm) * -1);
+    margin-bottom: var(--pf-t--global--spacer--sm);
   }
 
   &__partner-badge {
     background-color: var(--pf-v6-global--BackgroundColor--light-300);
     border-color: var(--pf-v6-global--BorderColor--200);
     border-style: solid;
     border-width: 1px;
-    border-radius: var(--pf-v6-global--spacer--md);
+    border-radius: var(--pf-t--global--spacer--md);
     font-size: var(--pf-v6-global--FontSize--xs);
     font-weight: var(--pf-v6-global--FontWeight--normal);
-    margin-bottom: var(--pf-v6-global--spacer--sm);
-    padding: 0 var(--pf-v6-global--spacer--sm);
+    margin-bottom: var(--pf-t--global--spacer--sm);
+    padding: 0 var(--pf-t--global--spacer--sm);
     width: fit-content;
 
     &.m-hidden {
@@ -70,7 +70,7 @@
       align-items: center;
 
       > svg {
-        margin-right: var(--pf-v6-global--spacer--xs);
+        margin-right: var(--pf-t--global--spacer--xs);
       }
       &.m-hidden {
         display: none;

diff --git a/frontend/src/components/SupportedAppTitle.tsx b/frontend/src/components/SupportedAppTitle.tsx
@@ -18,7 +18,7 @@ const SupportedAppTitle: React.FC<SupportedAppTitleProps> = ({ odhApp, showProvi
           icon={
             <img
               data-testid="tooltip-img"
-              style={{ marginLeft: 'var(--pf-v6-global--spacer--xs)' }}
+              style={{ marginLeft: 'var(--pf-t--global--spacer--xs)' }}
               src="../images/CheckStar.svg"
               alt={`${ODH_PRODUCT_NAME} certified and supported`}
             />

diff --git a/frontend/src/concepts/dashboard/DashboardPopupIconButton.tsx b/frontend/src/concepts/dashboard/DashboardPopupIconButton.tsx
@@ -14,7 +14,7 @@ const DashboardPopupIconButton = ({
 }: DashboardPopupIconButtonProps): React.JSX.Element => (
   <Button
     icon={
-      <Icon isInline style={{ marginLeft: 'var(--pf-v6-global--spacer--xs)' }}>
+      <Icon isInline style={{ marginLeft: 'var(--pf-t--global--spacer--xs)' }}>
         {icon}
       </Icon>
     }

diff --git a/frontend/src/concepts/design/CollapsibleSection.tsx b/frontend/src/concepts/design/CollapsibleSection.tsx
@@ -33,7 +33,7 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
         style={
           (open ?? innerOpen) || showChildrenWhenClosed
             ? {
-                marginBottom: 'var(--pf-v6-global--spacer--md)',
+                marginBottom: 'var(--pf-t--global--spacer--md)',
               }
             : undefined
         }

diff --git a/frontend/src/concepts/design/DividedGallery.scss b/frontend/src/concepts/design/DividedGallery.scss
@@ -5,23 +5,23 @@
   &__border {
     width: 2px;
     position: absolute;
-    top: var(--pf-v6-global--spacer--md);
-    bottom: var(--pf-v6-global--spacer--md);
+    top: var(--pf-t--global--spacer--md);
+    bottom: var(--pf-t--global--spacer--md);
     left: 0;
     background-color: white;
     content: ' ';
   }
   &__item {
     border-left: 1px solid var(--pf-v6-global--BorderColor--100);
-    padding: 0 var(--pf-v6-global--spacer--xl);
-    margin: var(--pf-v6-global--spacer--md) 0;
+    padding: 0 var(--pf-t--global--spacer--xl);
+    margin: var(--pf-t--global--spacer--md) 0;
   }
   .pf-v6-l-gallery {
     position: relative;
   }
   &__close {
     position: absolute;
-    top: var(--pf-v6-global--spacer--xs);
+    top: var(--pf-t--global--spacer--xs);
     right: 0;
   }
 }
diff --git a/frontend/src/concepts/design/ScrolledGallery.tsx b/frontend/src/concepts/design/ScrolledGallery.tsx
@@ -22,8 +22,8 @@ const ScrolledGallery: React.FC<ScrolledGalleryProps> = ({
         display: 'grid',
         gridAutoFlow: 'column',
         overflowY: 'auto',
-        gap: 'var(--pf-v6-global--spacer--md)',
-        paddingBottom: 'var(--pf-v6-global--spacer--sm)',
+        gap: 'var(--pf-t--global--spacer--md)',
+        paddingBottom: 'var(--pf-t--global--spacer--sm)',
       }}
       {...rest}
     >

diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableSection.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableSection.tsx
@@ -119,7 +119,7 @@ const RoleBindingPermissionsTableSection: React.FC<RoleBindingPermissionsTableSe
           icon={<PlusCircleIcon />}
           iconPosition="left"
           onClick={() => setAddField(true)}
-          style={{ paddingLeft: 'var(--pf-v6-global--spacer--lg)' }}
+          style={{ paddingLeft: 'var(--pf-t--global--spacer--lg)' }}
         >
           {subjectKind === RoleBindingPermissionsRBType.USER ? 'Add user' : 'Add group'}
         </Button>

diff --git a/...s/distributedWorkloads/global/projectMetrics/sections/WorkloadResourceMetricsTableRow.tsx b/...s/distributedWorkloads/global/projectMetrics/sections/WorkloadResourceMetricsTableRow.tsx
@@ -30,7 +30,7 @@ const WorkloadResourceMetricsTableRow: React.FC<WorkloadResourceMetricsTableRowP
   return (
     <Tr key={workload.metadata?.uid}>
       <Td dataLabel="Name">{getWorkloadName(workload)}</Td>
-      <Td dataLabel="CPU usage (cores)" style={{ paddingRight: 'var(--pf-v6-global--spacer--xl)' }}>
+      <Td dataLabel="CPU usage (cores)" style={{ paddingRight: 'var(--pf-t--global--spacer--xl)' }}>
         {' '}
         <WorkloadResourceUsageBar
           showData={inActiveState || (usage.cpuCoresUsed || 0) > 0}
@@ -43,7 +43,7 @@ const WorkloadResourceMetricsTableRow: React.FC<WorkloadResourceMetricsTableRowP
       </Td>
       <Td
         dataLabel="Memory usage (GiB)"
-        style={{ paddingRight: 'var(--pf-v6-global--spacer--xl)' }}
+        style={{ paddingRight: 'var(--pf-t--global--spacer--xl)' }}
       >
         {' '}
         <WorkloadResourceUsageBar

diff --git a/frontend/src/pages/exploreApplication/EnableModal.scss b/frontend/src/pages/exploreApplication/EnableModal.scss
@@ -3,11 +3,11 @@
     display: flex;
     align-items: center;
     > svg {
-      margin-right: var(--pf-v6-global--spacer--sm);
+      margin-right: var(--pf-t--global--spacer--sm);
     }
   }
   &__enable-link {
-    margin-top: var(--pf-v6-global--spacer--md);
+    margin-top: var(--pf-t--global--spacer--md);
   }
   .pf-v6-c-alert.m-no-alert-icon {
     .pf-v6-c-alert__icon {

diff --git a/frontend/src/pages/learningCenter/LearningCenter.scss b/frontend/src/pages/learningCenter/LearningCenter.scss
@@ -1,6 +1,6 @@
 .odh-learning-paths {
   &__filter-panel {
-    padding-top: var(--pf-v6-global--spacer--md);
+    padding-top: var(--pf-t--global--spacer--md);
     width: 240px;
     &.m-is-collapsible {
       background: var(--pf-v6-global--BackgroundColor--light-100);
@@ -20,17 +20,17 @@
     &__collapse-button {
       position: absolute;
       right: 0;
-      top: var(--pf-v6-global--spacer--sm);
+      top: var(--pf-t--global--spacer--sm);
       z-index: var(--pf-v6-global--ZIndex--md);
     }
     .vertical-tabs-pf-tab > a {
       font-size: var(--pf-v6-global--FontSize--sm);
     }
     .vertical-tabs-pf-tab:first-of-type {
-      margin-bottom: var(--pf-v6-global--spacer--lg);
+      margin-bottom: var(--pf-t--global--spacer--lg);
     }
     .filter-panel-pf-category {
-      padding-left: var(--pf-v6-global--spacer--md);
+      padding-left: var(--pf-t--global--spacer--md);
       .filter-panel-pf-category-title {
         font-size: var(--pf-v6-global--FontSize--sm);
       }
@@ -46,30 +46,30 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding: var(--pf-v6-global--spacer--md);
+    padding: var(--pf-t--global--spacer--md);
 
     &__list-view {
-      padding: 0 0 var(--pf-v6-global--spacer--md) 0;
+      padding: 0 0 var(--pf-t--global--spacer--md) 0;
     }
   }
   &__toolbar {
     padding-top: 0;
   }
   &__list-view {
     display: grid;
-    column-gap: var(--pf-v6-global--spacer--md);
-    row-gap: var(--pf-v6-global--spacer--md);
+    column-gap: var(--pf-t--global--spacer--md);
+    row-gap: var(--pf-t--global--spacer--md);
     grid-template-columns: 20px fit-content(50%) fit-content(20%) 110px auto auto;
     &.m-odh-size-md {
       grid-template-columns: auto fit-content(50%) fit-content(20%) auto 0 auto;
       .odh-list-item__link {
-        margin-left: calc(-1 * var(--pf-v6-global--spacer--md));
+        margin-left: calc(-1 * var(--pf-t--global--spacer--md));
       }
     }
     &.m-odh-size-sm {
       grid-template-columns: auto fit-content(50%) fit-content(20%) 0 0 auto;
       .odh-list-item__link {
-        margin-left: calc(-2 * var(--pf-v6-global--spacer--md));
+        margin-left: calc(-2 * var(--pf-t--global--spacer--md));
       }
     }
     &__header {