Remove prepend-left-4 CSS class

This removes the prepend-left-4
CSS class and replaces it for the
GitLab-UI equivalent gl-ml-2 utility class

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

@@ -75,7 +75,7 @@ export default {
       >
         {{ stage.name }}
       </strong>
-      <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
+      <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 gl-ml-2">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
       <icon :name="collapseIcon" class="ide-stage-collapse-icon" />

app/assets/javascripts/ide/components/preview/navigator.vue

@@ -119,7 +119,7 @@ export default {
     >
       <icon :size="18" name="retry" class="m-auto" />
     </button>
-    <div class="position-relative w-100 prepend-left-4">
+    <div class="position-relative w-100 gl-ml-2">
       <input
         :value="path || '/'"
         type="text"

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

@@ -238,7 +238,7 @@ export default {
             <icon
               v-gl-tooltip="$options.alertQueryText.descriptionTooltip"
               name="question"
-              class="prepend-left-4"
+              class="gl-ml-2"
             />
           </div>
         </template>

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

@@ -30,7 +30,7 @@ export default {
     <gl-sprintf :message="__('by %{user}')">
       <template #user>
         <user-avatar-link
-          class="prepend-left-4"
+          class="gl-ml-2"
           :link-href="author.webUrl"
           :img-src="author.avatarUrl"
           :img-alt="userImageAltDescription"

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue

@@ -64,7 +64,7 @@ export default {
       :title="buttonTitle"
       :loading="isLoading"
       :disabled="isActionInProgress"
-      :class="`btn btn-default btn-sm inline prepend-left-4 ${containerClasses}`"
+      :class="`btn btn-default btn-sm inline gl-ml-2 ${containerClasses}`"
       @click="$emit('click')"
     >
       <span class="d-inline-flex align-items-baseline">

app/assets/stylesheets/framework/common.scss

@@ -405,7 +405,6 @@ img.emoji {
 .prepend-top-16 { margin-top: 16px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-top-32 { margin-top: 32px; }
-.prepend-left-4 { margin-left: 4px; }
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }

app/helpers/issuables_helper.rb

@@ -205,7 +205,7 @@ module IssuablesHelper
       author_output
     end
 
-    output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip prepend-left-4', title: _('1st contribution!'))
+    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_short if issuable.tasks?), id: "task_status_short", class: "d-md-none")

app/views/clusters/clusters/_banner.html.haml

@@ -4,7 +4,7 @@
 
 .hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
   %span.spinner.spinner-dark.spinner-sm{ 'aria-label': 'Loading' }
-  %span.prepend-left-4= s_('ClusterIntegration|Kubernetes cluster is being created...')
+  %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
 .hidden.row.js-cluster-api-unreachable.gl-alert.gl-alert-warning{ role: 'alert' }
   = sprite_icon('warning', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')

app/views/groups/_home_panel.html.haml

@@ -11,7 +11,7 @@
         .d-inline-flex.align-items-baseline
           %h1.home-panel-title.prepend-top-8.append-bottom-5
             = @group.name
-            %span.visibility-icon.text-secondary.prepend-left-4.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
               = visibility_level_icon(@group.visibility_level, fw: false, options: {class: 'icon'})
         .home-panel-metadata.d-flex.align-items-center.text-secondary
           %span

app/views/projects/_home_panel.html.haml

@@ -12,7 +12,7 @@
         .d-inline-flex.align-items-baseline
           %h1.home-panel-title.prepend-top-8.append-bottom-5{ data: { qa_selector: 'project_name_content' } }
             = @project.name
-            %span.visibility-icon.text-secondary.prepend-left-4.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
+            %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
         .home-panel-metadata.d-flex.flex-wrap.text-secondary

app/views/projects/tags/_tag.html.haml

@@ -3,10 +3,10 @@
 %li.flex-row.allow-wrap
   .row-main-content
     = icon('tag')
-    = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name prepend-left-4'
+    = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name gl-ml-2'
 
     - if protected_tag?(@project, tag)
-      %span.badge.badge-success.prepend-left-4
+      %span.badge.badge-success.gl-ml-2
         = s_('TagsPage|protected')
 
     - if tag.message.present?

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

@@ -89,7 +89,7 @@ export default {
       v-gl-tooltip
       variant="muted"
       :title="moreTagsTooltip"
-      class="d-none d-md-flex prepend-left-4"
+      class="d-none d-md-flex gl-ml-2"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -101,7 +101,7 @@ export default {
       v-if="moreTagsDisplay && hideLabel"
       ref="moreBadge"
       variant="muted"
-      class="d-md-none prepend-left-4"
+      class="d-md-none gl-ml-2"
       >{{ tagsDisplay }}</gl-badge
     >
   </div>

ee/app/assets/javascripts/vue_shared/dashboards/components/alerts.vue

@@ -59,7 +59,7 @@ export default {
         class="align-text-bottom js-dashboard-alerts-icon"
         name="warning"
       />
-      <span class="js-alert-count text-secondary prepend-left-4"> {{ alertCount }} </span>
+      <span class="js-alert-count text-secondary gl-ml-2"> {{ alertCount }} </span>
       <span v-if="lastAlert" class="text-secondary">{{ alertText }}</span>
     </div>
   </div>

ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue

@@ -94,7 +94,7 @@ export default {
           status="none"
           :status-icon-size="24"
           :component="$options.componentNames.MetricsReportsIssueBody"
-          class="prepend-left-4 prepend-top-4 append-bottom-8"
+          class="gl-ml-2 prepend-top-4 append-bottom-8"
         />
       </smart-virtual-list>
     </div>

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

@@ -25,7 +25,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
     </strong>
      
     <div
-      class="append-right-8 prepend-left-4"
+      class="append-right-8 gl-ml-2"
     >
       <span
         class="badge badge-pill"