Merge branch '36857-replace-deprecated-pt-1' into 'master'

Remove deprecated spacing classes

See merge request gitlab-org/gitlab!39966

app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -236,7 +236,7 @@ export default {
     >
       <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
-        <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
+        <span class="text-truncate gl-pl-2">
           <gl-sprintf
             :message="
               hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message

app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue

@@ -69,9 +69,7 @@ export default {
     >
       <ci-icon :status="group.status" />
 
-      <span
-        class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
-      >
+      <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
         {{ group.name }}
       </span>
 

app/assets/javascripts/pipelines/components/graph/job_name_component.vue

@@ -27,9 +27,7 @@ export default {
 <template>
   <span class="ci-job-name-component mw-100">
     <ci-icon :status="status" />
-    <span
-      class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
-    >
+    <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
       {{ name }}
     </span>
   </span>

app/assets/javascripts/releases/components/evidence_block.vue

@@ -80,9 +80,7 @@ export default {
             <span class="js-short monospace">{{ shortSha(index) }}</span>
           </template>
           <template #expanded>
-            <span class="js-expanded monospace gl-pl-1-deprecated-no-really-do-not-use-me">{{
-              sha(index)
-            }}</span>
+            <span class="js-expanded monospace gl-pl-2">{{ sha(index) }}</span>
           </template>
         </expand-button>
         <clipboard-button

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -228,15 +228,15 @@ export default {
         <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
       </template>
 
-      <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
+      <div class="d-flex justify-content-between gl-p-2">
         <gl-form-group
           v-if="customEnabled"
           :label="customLabel"
           label-for="custom-from-time"
-          label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
-          class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
+          label-class="gl-pb-2"
+          class="custom-time-range-form-group col-md-7 gl-pl-2 gl-pr-0 m-0"
         >
-          <div class="gl-pt-2-deprecated-no-really-do-not-use-me">
+          <div class="gl-pt-3">
             <date-time-picker-input
               id="custom-time-from"
               v-model="startInput"
@@ -264,12 +264,9 @@ export default {
             </gl-button>
           </gl-form-group>
         </gl-form-group>
-        <gl-form-group
-          label-for="group-id-dropdown"
-          class="col-md-5 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-1-deprecated-no-really-do-not-use-me m-0"
-        >
+        <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-px-2 m-0">
           <template #label>
-            <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
+            <span class="gl-pl-7">{{ __('Quick range') }}</span>
           </template>
 
           <gl-deprecated-dropdown-item

app/assets/stylesheets/framework/common.scss

@@ -454,35 +454,6 @@ img.emoji {
   }
 }
 
-/** COMMON SPACING CLASSES **/
-/**
-  🚨 Do not use these classes — they are deprecated and being removed. 🚨
-  See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
-
-  Instead, if you need a spacing class, please use one from Gitlab UI —
-  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
-    $gl-spacing-scale-0: 0;
-    $gl-spacing-scale-1: 2px;
-    $gl-spacing-scale-2: 4px;
-    $gl-spacing-scale-3: 8px;
-    $gl-spacing-scale-4: 12px;
-    $gl-spacing-scale-5: 16px;
-    $gl-spacing-scale-6: 24px;
-    $gl-spacing-scale-7: 32px;
-    $gl-spacing-scale-8: 40px;
-    $gl-spacing-scale-9: 48px;
-    $gl-spacing-scale-10: 56px;
-    $gl-spacing-scale-11: 64px;
-    $gl-spacing-scale-12: 80px;
-    $gl-spacing-scale-13: 96px;
-**/
-@each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
-  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
-}
 
 /**
  * Removes browser specific clear icon from input fields in

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -8,12 +8,12 @@
 - if status.has_details?
   = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item d-flex', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1-deprecated-no-really-do-not-use-me= subject.name
+    %span.ci-build-text.text-truncate.mw-70p.gl-pl-2= subject.name
 
 - else
   .menu-item.mini-pipeline-graph-dropdown-item.d-flex{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1-deprecated-no-really-do-not-use-me= subject.name
+    %span.ci-build-text.text-truncate.mw-70p.gl-pl-2= subject.name
 
 - if status.has_action?
   = link_to status.action_path, class: "gl-button ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do

app/views/projects/blob/_template_selectors.html.haml

-.template-selectors-menu.gl-pl-2-deprecated-no-really-do-not-use-me
+.template-selectors-menu.gl-pl-3
   .template-selector-dropdowns-wrap
     .template-type-selector.js-template-type-selector-wrap.hidden
       - toggle_text = should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : 'Select a template type'

app/views/projects/graphs/show.html.haml

 - page_title _('Contributors')
 
-.sub-header-block.bg-gray-light.gl-p-3-deprecated-no-really-do-not-use-me
+.sub-header-block.bg-gray-light.gl-p-5
   .tree-ref-holder.inline.vertical-align-middle
     = render 'shared/ref_switcher', destination: 'graphs'
   = link_to s_('Commits|History'), project_commits_path(@project, current_ref), class: 'btn'

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -6,7 +6,7 @@
 
 - source_title, target_title = format_mr_branch_names(@merge_request)
 
-.form-group.row.d-flex.gl-pl-3-deprecated-no-really-do-not-use-me.gl-pr-3-deprecated-no-really-do-not-use-me.branch-selector
+.form-group.row.d-flex.gl-px-5.branch-selector
   .align-self-center
     %span
       = html_escape(_('From %{code_open}%{source_title}%{code_close} into')) % { source_title: source_title, code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -168,7 +168,7 @@ export default {
       <div
         class="linked-issues-card-body bg-gray-light"
         :class="{
-          'gl-p-3-deprecated-no-really-do-not-use-me': isFormVisible || shouldShowTokenBody,
+          'gl-p-5': isFormVisible || shouldShowTokenBody,
         }"
       >
         <div

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -195,7 +195,7 @@ export default {
           :title="copyToClipboard.mrId"
           :text="appMetadata.mergeRequestId.toString()"
           :modal-id="modalId"
-          css-classes="border-0 gl-pt-0 gl-pr-0 gl-pl-1-deprecated-no-really-do-not-use-me gl-pb-0"
+          css-classes="border-0 gl-pt-0 gl-pr-0 gl-pl-2 gl-pb-0"
         />
       </p>
       <p v-html="instructionText.step4"></p>

ee/app/views/registrations/welcome.html.haml

@@ -2,7 +2,7 @@
 - onboarding_issues_experiment_enabled = experiment_enabled?(:onboarding_issues)
 
 .row.flex-grow-1.bg-gray-light
-  .d-flex.flex-column.align-items-center.w-100.gl-p-3-deprecated-no-really-do-not-use-me
+  .d-flex.flex-column.align-items-center.w-100.gl-p-5
     .edit-profile.login-page.d-flex.flex-column.align-items-center.pt-lg-3
       - if in_subscription_flow? || (onboarding_issues_experiment_enabled && !in_invitation_flow? && !in_oauth_flow?)
         #progress-bar{ data: { is_in_subscription_flow: in_subscription_flow?.to_s, is_onboarding_issues_experiment_enabled: onboarding_issues_experiment_enabled.to_s } }
@@ -10,7 +10,7 @@
       %p
         .center= html_escape(_('In order to personalize your experience with GitLab%{br_tag}we would like to know a bit more about you.')) % { br_tag: '<br/>'.html_safe }
 
-      = form_for(current_user, url: users_sign_up_update_registration_path, html: { class: 'card w-100 gl-p-3-deprecated-no-really-do-not-use-me', 'aria-live' => 'assertive' }) do |f|
+      = form_for(current_user, url: users_sign_up_update_registration_path, html: { class: 'card w-100 gl-p-5', 'aria-live' => 'assertive' }) do |f|
         .devise-errors
           = render 'devise/shared/error_messages', resource: current_user
         .row

ee/app/views/subscriptions/groups/edit.html.haml

 - page_title _('Your GitLab group')
 
 .row.flex-grow-1.bg-gray-light
-  .d-flex.flex-column.align-items-center.w-100.gl-p-3-deprecated-no-really-do-not-use-me
-    %section.gl-banner.gl-banner-introduction.gl-p-2-deprecated-no-really-do-not-use-me.px-lg-6
+  .d-flex.flex-column.align-items-center.w-100.gl-p-5
+    %section.gl-banner.gl-banner-introduction.gl-p-3.px-lg-6
       .gl-banner-illustration.d-flex
         = image_tag('illustrations/subscription-success.svg', class: 'mw-xs')
       .gl-banner-content.d-flex.flex-column.justify-content-center
         %h3= _('Thanks for your purchase!')
         - number_of_users = n_('1 user', '%{num} users', params[:quantity].to_i) % { num: params[:quantity] }
         %p= _('You have successfully purchased a %{plan} plan subscription for %{seats}. You’ll receive a receipt via email.') % { plan: plan_title, seats: number_of_users }
-    .edit-group.d-flex.flex-column.align-items-center.gl-pt-5-deprecated-no-really-do-not-use-me
+    .edit-group.d-flex.flex-column.align-items-center.gl-pt-7
       - if params[:new_user]
         #progress-bar{ data: { is_onboarding_issues_experiment_enabled: experiment_enabled?(:onboarding_issues).to_s } }
       %h2.center= _('Create your group')
@@ -17,7 +17,7 @@
         %div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.')
         %div= _('Your %{plan} plan will be applied to your group.' % { plan: plan_title })
 
-      = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-3-deprecated-no-really-do-not-use-me' } do |f|
+      = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-5' } do |f|
         = hidden_field_tag :new_user, params[:new_user]
         = form_errors(@group)
         .row

ee/app/views/trial_registrations/_signin_form.html.haml

@@ -5,7 +5,7 @@
   .form-group
     = f.label :password, for: 'user_password', class: 'label-bold'
     = f.password_field :password, class: 'form-control bottom', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
-  .remember-me.gl-py-4
+  .remember-me.gl-py-6
     %label{ for: 'user_remember_me' }
       = f.check_box :remember_me, class: 'remember-me-checkbox'
       %span

spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap

@@ -13,7 +13,7 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
   />
    
   <span
-    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
+    class="text-truncate gl-pl-2"
   >
     Firing: 
             alert-label &gt; 42
@@ -35,7 +35,7 @@ exports[`AlertWidget Alert not firing displays a warning icon and matches snapsh
   />
    
   <span
-    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
+    class="text-truncate gl-pl-2"
   >
     alert-label &gt; 42
   </span>