Remove prepend-left-8 class

This removes the prepend-left-8 CSS class
and replaces it with gl-ml-3 utility class
from GitLab-UI

app/assets/javascripts/badges/components/badge.vue

@@ -84,15 +84,10 @@ export default {
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
-        <icon
-          :size="16"
-          class="prepend-left-8 append-right-8"
-          name="doc-image"
-          aria-hidden="true"
-        />
+        <icon :size="16" class="gl-ml-3 append-right-8" name="doc-image" aria-hidden="true" />
       </div>
       <div class="btn btn-default btn-sm disabled">
-        <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
+        <span class="gl-ml-3 append-right-8">{{ s__('Badges|No badge image') }}</span>
       </div>
     </div>
 

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -89,7 +89,7 @@ export default {
       :type="file.type"
       :path="file.path"
       :is-open="dropdownOpen"
-      class="prepend-left-8"
+      class="gl-ml-3"
       v-on="$listeners"
     />
   </div>

app/assets/javascripts/ide/components/jobs/detail/description.vue

@@ -24,7 +24,7 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <ci-icon :status="job.status" :borderless="true" :size="24" class="d-flex" />
-    <span class="prepend-left-8">
+    <span class="gl-ml-3">
       {{ job.name }}
       <a :href="job.path" target="_blank" class="ide-external-link position-relative">
         {{ jobId }} <icon :size="12" name="external-link" />

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -71,7 +71,7 @@ export default {
         v-tooltip="showTooltip"
         :title="showTooltip ? stage.name : null"
         data-container="body"
-        class="prepend-left-8 text-truncate"
+        class="gl-ml-3 text-truncate"
       >
         {{ stage.name }}
       </strong>

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -63,7 +63,7 @@ export default {
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
-        <span class="prepend-left-8">
+        <span class="gl-ml-3">
           <strong> {{ __('Pipeline') }} </strong>
           <a
             :href="latestPipeline.path"

app/assets/javascripts/issuable_suggestions/components/item.vue

@@ -128,7 +128,7 @@ export default {
           :key="id"
           v-gl-tooltip.bottom
           :title="tooltipTitle"
-          class="suggestion-help-hover prepend-left-8 text-tertiary"
+          class="suggestion-help-hover gl-ml-3 text-tertiary"
         >
           <icon :name="icon" /> {{ count }}
         </span>

app/assets/stylesheets/framework/common.scss

@@ -405,7 +405,6 @@ img.emoji {
 .prepend-top-20 { margin-top: 20px; }
 .prepend-top-32 { margin-top: 32px; }
 .prepend-left-5 { margin-left: 5px; }
-.prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }
 .prepend-left-15 { margin-left: 15px; }
 .prepend-left-default { margin-left: $gl-padding; }

app/helpers/issuables_helper.rb

@@ -207,7 +207,7 @@ module IssuablesHelper
 
     output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip gl-ml-2', title: _('1st contribution!'))
 
-    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block prepend-left-8")
+    output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block gl-ml-3")
     output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "d-md-none")
 
     output.join.html_safe

app/views/groups/_home_panel.html.haml

@@ -17,7 +17,7 @@
           %span
             = _("Group ID: %{group_id}") % { group_id: @group.id }
           - if current_user
-            %span.access-request-links.prepend-left-8
+            %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @group
 
     .home-panel-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end

app/views/layouts/header/_default.html.haml

@@ -16,7 +16,7 @@
             = brand_header_logo
             - logo_text = brand_header_logo_type
             - if logo_text.present?
-              %span.logo-text.d-none.d-lg-block.prepend-left-8
+              %span.logo-text.d-none.d-lg-block.gl-ml-3
                 = logo_text
           - if Gitlab.com_and_canary?
             = link_to 'https://next.gitlab.com', class: 'label-link canary-badge bg-transparent', target: :_blank do

app/views/layouts/header/_logo_with_title.html.haml

 %header.navbar.fixed-top.navbar-gitlab.justify-content-center
   = render 'shared/logo.svg'
-  %span.logo-text.d-none.d-lg-block.prepend-left-8.pt-1
+  %span.logo-text.d-none.d-lg-block.gl-ml-3.pt-1
     = render 'shared/logo_type.svg'

app/views/layouts/terms.html.haml

@@ -19,7 +19,7 @@
                 = brand_header_logo
                 - logo_text = brand_header_logo_type
                 - if logo_text.present?
-                  %span.logo-text.prepend-left-8
+                  %span.logo-text.gl-ml-3
                     = logo_text
               - if header_link?(:user_dropdown)
                 .navbar-collapse

app/views/projects/_home_panel.html.haml

@@ -20,7 +20,7 @@
             %span.text-secondary
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
           - if current_user
-            %span.access-request-links.prepend-left-8
+            %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @project
           - if @project.tag_list.present?
             %span.home-panel-topic-list.mt-2.w-100.d-inline-flex

app/views/projects/branches/_branch.html.haml

@@ -5,7 +5,7 @@
   .branch-info
     .branch-title
       = sprite_icon('fork', size: 12)
-      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name prepend-left-8 qa-branch-name' do
+      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3 qa-branch-name' do
         = branch.name
       - if branch.name == @repository.root_ref
         %span.badge.badge-primary.prepend-left-5 default

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

@@ -39,7 +39,7 @@
     .d-flex
       %h3.page-title= @environment.name
       - if @environment.auto_stop_at?
-        %p.align-self-end.prepend-left-8
+        %p.align-self-end.gl-ml-3
           = s_('Environments|Auto stops %{auto_stop_time}').html_safe % {auto_stop_time: time_ago_with_tooltip(@environment.auto_stop_at)}
     .nav-controls.my-2
       = render 'projects/environments/pin_button', environment: @environment

app/views/projects/issues/_new_branch.html.haml

@@ -41,7 +41,7 @@
               = _('Create branch')
           %li.divider.droplab-item-ignore
 
-          %li.droplab-item-ignore.prepend-left-8.append-right-8.prepend-top-16
+          %li.droplab-item-ignore.gl-ml-3.append-right-8.prepend-top-16
             - if can_create_confidential_merge_request?
               #js-forked-project{ data: { namespace_path: @project.namespace.full_path, project_path: @project.full_path, new_fork_path: new_project_fork_path(@project), help_page_path: help_page_path('user/project/merge_requests') } }
             .form-group

app/views/users/terms/index.html.haml

@@ -6,13 +6,13 @@
   .card-footer.footer-block.clearfix
     - if can?(current_user, :accept_terms, @term)
       .float-right
-        = button_to accept_term_path(@term, redirect_params), class: 'btn btn-success prepend-left-8', data: { qa_selector: 'accept_terms_button' } do
+        = button_to accept_term_path(@term, redirect_params), class: 'btn btn-success gl-ml-3', data: { qa_selector: 'accept_terms_button' } do
           = _('Accept terms')
     - else
       .pull-right
-        = link_to root_path, class: 'btn btn-success prepend-left-8' do
+        = link_to root_path, class: 'btn btn-success gl-ml-3' do
           = _('Continue')
     - if can?(current_user, :decline_terms, @term)
       .float-right
-        = button_to decline_term_path(@term, redirect_params), class: 'btn btn-default prepend-left-8' do
+        = button_to decline_term_path(@term, redirect_params), class: 'btn btn-default gl-ml-3' do
           =  _('Decline and sign out')

ee/app/assets/javascripts/approvals/components/rule_controls.vue

@@ -29,7 +29,7 @@ export default {
       <span>{{ __('Edit') }}</span>
     </gl-deprecated-button>
     <gl-deprecated-button
-      class="prepend-left-8 btn btn-inverted"
+      class="gl-ml-3 btn btn-inverted"
       variant="danger"
       @click="requestDeleteRule(rule)"
     >

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/section_reveal_button.vue

@@ -33,6 +33,6 @@ export default {
 <template>
   <button class="btn-link d-flex align-items-center" type="button" @click="onClickButton">
     <icon :size="16" :name="toggleButtonIcon" />
-    <span class="prepend-left-8">{{ buttonTitle }}</span>
+    <span class="gl-ml-3">{{ buttonTitle }}</span>
   </button>
 </template>

ee/app/assets/javascripts/packages/shared/components/package_list_row.vue

@@ -75,7 +75,7 @@ export default {
 
         <package-tags
           v-if="packageEntity.tags && packageEntity.tags.length"
-          class="prepend-left-8"
+          class="gl-ml-3"
           :tags="packageEntity.tags"
           hide-label
           :tag-display-limit="1"

ee/app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -60,7 +60,7 @@ export default {
         'd-flex': this.tagCount === 1,
         'd-md-flex': this.tagCount > 1,
         'append-right-4': index !== this.tagsToRender.length - 1,
-        'prepend-left-8': !this.hideLabel && index === 0,
+        'gl-ml-3': !this.hideLabel && index === 0,
       };
     },
   },

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

@@ -157,7 +157,7 @@ export default {
   <div class="inline">
     <gl-deprecated-button
       v-gl-modal="modalId"
-      class="btn btn-default btn-sm prepend-left-8 js-review-button"
+      class="btn btn-default btn-sm gl-ml-3 js-review-button"
       :class="cssClass"
       type="button"
     >

ee/spec/frontend/packages/shared/components/package_tags_spec.js

@@ -73,7 +73,7 @@ describe('PackageTags', () => {
     it('shows tag badge when there is only one', () => {
       createComponent([mockTags[0]]);
 
-      const expectedStyle = [...defaultStyle, 'd-flex', 'prepend-left-8'];
+      const expectedStyle = [...defaultStyle, 'd-flex', 'gl-ml-3'];
 
       expect(
         tagBadges()
@@ -105,7 +105,7 @@ describe('PackageTags', () => {
       const allBadges = tagBadges();
 
       expect(allBadges.at(0).classes()).toEqual(
-        expect.arrayContaining([...expectedStyleWithAppend, 'prepend-left-8']),
+        expect.arrayContaining([...expectedStyleWithAppend, 'gl-ml-3']),
       );
       expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
       expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));

spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap

@@ -14,7 +14,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
     />
      
     <strong
-      class="prepend-left-8 text-truncate"
+      class="gl-ml-3 text-truncate"
       data-container="body"
       data-original-title=""
       title=""