Merge branch...

Merge branch '225194-refactor-container-registry-cleanup-policies-to-gitlab-ui-utility-classes' into 'master'

Refactor container registry cleanup policies to gitlab-ui utility classes

Closes #225194

See merge request gitlab-org/gitlab!36814

app/assets/javascripts/registry/settings/components/settings_form.vue

@@ -103,11 +103,11 @@ export default {
         />
       </template>
       <template #footer>
-        <div class="d-flex justify-content-end">
+        <div class="gl-display-flex gl-justify-content-end">
           <gl-deprecated-button
             ref="cancel-button"
             type="reset"
-            class="mr-2 d-block"
+            class="gl-mr-3 gl-display-block"
             :disabled="isCancelButtonDisabled"
           >
             {{ __('Cancel') }}
@@ -117,10 +117,10 @@ export default {
             type="submit"
             :disabled="isSubmitButtonDisabled"
             variant="success"
-            class="d-flex justify-content-center align-items-center js-no-auto-disable"
+            class="gl-display-flex gl-justify-content-center gl-align-items-center js-no-auto-disable"
           >
             {{ $options.i18n.SET_CLEANUP_POLICY_BUTTON }}
-            <gl-loading-icon v-if="isLoading" class="ml-2" />
+            <gl-loading-icon v-if="isLoading" class="gl-ml-3" />
           </gl-deprecated-button>
         </div>
       </template>

app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue

@@ -177,7 +177,7 @@ export default {
 </script>
 
 <template>
-  <div ref="form-elements" class="lh-2">
+  <div ref="form-elements" class="gl-line-height-20">
     <gl-form-group
       :id="idGenerator('expiration-policy-toggle-group')"
       :label-cols="labelCols"
@@ -185,13 +185,13 @@ export default {
       :label-for="idGenerator('expiration-policy-toggle')"
       :label="$options.i18n.ENABLE_TOGGLE_LABEL"
     >
-      <div class="d-flex align-items-start">
+      <div class="gl-display-flex">
         <gl-toggle
           :id="idGenerator('expiration-policy-toggle')"
           v-model="enabled"
           :disabled="isLoading"
         />
-        <span class="mb-2 ml-2 lh-2">
+        <span class="gl-mb-3 gl-ml-3 gl-line-height-20">
           <gl-sprintf :message="$options.i18n.ENABLE_TOGGLE_DESCRIPTION">
             <template #toggleStatus>
               <strong>{{ policyEnabledText }}</strong>

spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Expiration Policy Form renders 1`] = `
 <div
-  class="lh-2"
+  class="gl-line-height-20"
 >
   <gl-form-group-stub
     id="expiration-policy-toggle-group"
@@ -12,7 +12,7 @@ exports[`Expiration Policy Form renders 1`] = `
     label-for="expiration-policy-toggle"
   >
     <div
-      class="d-flex align-items-start"
+      class="gl-display-flex"
     >
       <gl-toggle-stub
         id="expiration-policy-toggle"
@@ -20,7 +20,7 @@ exports[`Expiration Policy Form renders 1`] = `
       />
        
       <span
-        class="mb-2 ml-2 lh-2"
+        class="gl-mb-3 gl-ml-3 gl-line-height-20"
       >
         <strong>
           Disabled