Remove prepend-top-8 CSS class

This removes the prepend-top-8 CSS class
and replaces it for the gl-mt-3 utility
class from GitLab-UI

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -188,7 +188,7 @@ export default {
       >
         <span
           v-if="issue.referencePath"
-          class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8"
+          class="board-card-number overflow-hidden d-flex append-right-8 gl-mt-3"
         >
           <tooltip-on-truncate
             v-if="issueReferencePath"
@@ -199,7 +199,7 @@ export default {
           >
           #{{ issue.iid }}
         </span>
-        <span class="board-info-items prepend-top-8 d-inline-block">
+        <span class="board-info-items gl-mt-3 d-inline-block">
           <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight

app/assets/javascripts/groups/components/group_item.vue

@@ -122,7 +122,7 @@ export default {
               v-tooltip
               :href="group.relativePath"
               :title="group.fullName"
-              class="no-expand prepend-top-8 append-right-8"
+              class="no-expand gl-mt-3 append-right-8"
               data-placement="bottom"
               >{{
                 // ending bracket must be by closing tag to prevent
@@ -133,9 +133,9 @@ export default {
             <item-stats-value
               :icon-name="visibilityIcon"
               :title="visibilityTooltip"
-              css-class="item-visibility d-inline-flex align-items-center prepend-top-8 append-right-4 text-secondary"
+              css-class="item-visibility d-inline-flex align-items-center gl-mt-3 append-right-4 text-secondary"
             />
-            <span v-if="group.permission" class="user-access-role prepend-top-8">
+            <span v-if="group.permission" class="user-access-role gl-mt-3">
               {{ group.permission }}
             </span>
           </div>

app/assets/javascripts/jobs/components/stages_dropdown.vue

@@ -81,7 +81,7 @@ export default {
     <button
       type="button"
       data-toggle="dropdown"
-      class="js-selected-stage dropdown-menu-toggle prepend-top-8"
+      class="js-selected-stage dropdown-menu-toggle gl-mt-3"
     >
       {{ selectedStage }} <i class="fa fa-chevron-down"></i>
     </button>

app/assets/javascripts/monitoring/components/charts/empty_chart.vue

@@ -23,10 +23,10 @@ export default {
 <template>
   <div class="d-flex flex-column justify-content-center">
     <div
-      class="prepend-top-8 svg-w-100 d-flex align-items-center"
+      class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
       v-html="chartEmptyStateIllustration"
     ></div>
-    <h5 class="text-center prepend-top-8">{{ __('No data to display') }}</h5>
+    <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>
 </template>

app/assets/javascripts/pipelines/components/test_reports/test_summary.vue

@@ -68,7 +68,7 @@ export default {
 <template>
   <div>
     <div class="row">
-      <div class="col-12 d-flex prepend-top-8 align-items-center">
+      <div class="col-12 d-flex gl-mt-3 align-items-center">
         <gl-deprecated-button
           v-if="showBack"
           size="sm"

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

@@ -32,7 +32,7 @@ export default {
       <span class="js-assets-count badge badge-pill">{{ assets.count }}</span>
     </b>
 
-    <ul v-if="assets.links.length" class="pl-0 mb-0 prepend-top-8 list-unstyled js-assets-list">
+    <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list">
       <li v-for="link in assets.links" :key="link.name" class="append-bottom-8">
         <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl">
           <icon name="package" class="align-middle append-right-4 align-text-bottom" />

app/assets/javascripts/serverless/components/function_row.vue

@@ -71,7 +71,7 @@ export default {
       </p>
       <b>{{ name }}</b>
       <div v-for="line in description.split('\n')" :key="line">{{ line }}</div>
-      <url :uri="targetUrl" class="prepend-top-8 no-expand" />
+      <url :uri="targetUrl" class="gl-mt-3 no-expand" />
     </div>
   </li>
 </template>

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -261,7 +261,7 @@ export default {
             </li>
           </template>
           <li v-else class="dropdown-menu-empty-item">
-            <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
+            <div class="append-right-default prepend-left-default gl-mt-3 append-bottom-8">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>

app/assets/stylesheets/framework/common.scss

@@ -398,7 +398,6 @@ img.emoji {
 **/
 .prepend-top-4 { margin-top: $gl-padding-4; }
 .prepend-top-5 { margin-top: 5px; }
-.prepend-top-8 { margin-top: $grid-size; }
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
 .prepend-top-default { margin-top: $gl-padding !important; }

app/views/groups/_home_panel.html.haml

@@ -9,7 +9,7 @@
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.prepend-top-8.append-bottom-5
+          %h1.home-panel-title.gl-mt-3.append-bottom-5
             = @group.name
             %span.visibility-icon.text-secondary.prepend-left-4.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
               = visibility_level_icon(@group.visibility_level, fw: false, options: {class: 'icon'})

app/views/groups/settings/_general.html.haml

@@ -12,7 +12,7 @@
         = f.label :id, _('Group ID'), class: 'label-bold'
         = f.text_field :id, class: 'form-control w-auto', readonly: true
 
-    .row.prepend-top-8
+    .row.gl-mt-3
       .form-group.col-md-9
         = f.label :description, _('Group description (optional)'), class: 'label-bold'
         = f.text_area :description, class: 'form-control', rows: 3, maxlength: 250

app/views/projects/_home_panel.html.haml

@@ -10,7 +10,7 @@
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.prepend-top-8.append-bottom-5{ data: { qa_selector: 'project_name_content' } }
+          %h1.home-panel-title.gl-mt-3.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) }
               = visibility_level_icon(@project.visibility_level, fw: false, options: {class: 'icon'})

app/views/shared/_new_merge_request_checkbox.html.haml

-.form-check.prepend-top-8
+.form-check.gl-mt-3
   - nonce = SecureRandom.hex
   = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request form-check-input', id: "create_merge_request-#{nonce}"
   = label_tag "create_merge_request-#{nonce}", class: 'form-check-label' do

app/views/shared/projects/_project.html.haml

@@ -30,7 +30,7 @@
     .project-details.d-sm-flex.flex-sm-fill.align-items-center{ data: { qa_selector: 'project', qa_project_name: project.name } }
       .flex-wrapper
         .d-flex.align-items-center.flex-wrap.project-title
-          %h2.d-flex.prepend-top-8
+          %h2.d-flex.gl-mt-3
             = link_to project_path(project), class: 'text-plain' do
               %span.project-full-name.append-right-8><
                 %span.namespace-name
@@ -40,22 +40,22 @@
                 %span.project-name<
                   = project.name
 
-          %span.metadata-info.visibility-icon.append-right-10.prepend-top-8.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
+          %span.metadata-info.visibility-icon.append-right-10.gl-mt-3.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
             = visibility_level_icon(project.visibility_level, fw: true)
 
           - if explore_projects_tab? && license_name
-            %span.metadata-info.d-inline-flex.align-items-center.append-right-10.prepend-top-8
+            %span.metadata-info.d-inline-flex.align-items-center.append-right-10.gl-mt-3
               = sprite_icon('scale', size: 14, css_class: 'append-right-4')
               = license_name
 
           - if !explore_projects_tab? && access&.nonzero?
             -# haml-lint:disable UnnecessaryStringOutput
             = ' ' # prevent haml from eating the space between elements
-            .metadata-info.prepend-top-8
+            .metadata-info.gl-mt-3
               %span.user-access-role.d-block= Gitlab::Access.human_access(access)
 
           - if !explore_projects_tab?
-            .metadata-info.prepend-top-8
+            .metadata-info.gl-mt-3
               = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project
 
         - if show_last_commit_as_description

ee/app/assets/javascripts/packages/details/components/conan_installation.vue

@@ -31,7 +31,7 @@ export default {
 <template>
   <installation-tabs :tracking-label="$options.trackingLabel">
     <template #installation>
-      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
       <code-instruction
         :instruction="conanInstallationCommand"
         :copy-text="s__('PackageRegistry|Copy Conan Command')"
@@ -41,7 +41,7 @@ export default {
     </template>
 
     <template #setup>
-      <p class="prepend-top-8 font-weight-bold">
+      <p class="gl-mt-3 font-weight-bold">
         {{ s__('PackageRegistry|Add Conan Remote') }}
       </p>
       <code-instruction

ee/app/assets/javascripts/packages/details/components/maven_installation.vue

@@ -37,7 +37,7 @@ export default {
 <template>
   <installation-tabs :tracking-label="$options.trackingLabel">
     <template #installation>
-      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
       <p>
         <gl-sprintf :message="$options.i18n.xmlText">
           <template #code="{ content }">

ee/app/assets/javascripts/packages/details/components/npm_installation.vue

@@ -43,7 +43,7 @@ export default {
 <template>
   <installation-tabs :tracking-label="$options.trackingLabel">
     <template #installation>
-      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
       <code-instruction
         :instruction="npmCommand"
         :copy-text="s__('PackageRegistry|Copy npm command')"
@@ -61,7 +61,7 @@ export default {
     </template>
 
     <template #setup>
-      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
       <code-instruction
         :instruction="npmSetup"
         :copy-text="s__('PackageRegistry|Copy npm setup command')"

ee/app/assets/javascripts/packages/details/components/nuget_installation.vue

@@ -31,7 +31,7 @@ export default {
 <template>
   <installation-tabs :tracking-label="$options.trackingLabel">
     <template #installation>
-      <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
+      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
       <code-instruction
         :instruction="nugetInstallationCommand"
         :copy-text="s__('PackageRegistry|Copy NuGet Command')"
@@ -41,7 +41,7 @@ export default {
     </template>
 
     <template #setup>
-      <p class="prepend-top-8 font-weight-bold">
+      <p class="gl-mt-3 font-weight-bold">
         {{ s__('PackageRegistry|Add NuGet Source') }}
       </p>
       <code-instruction

ee/app/assets/javascripts/packages/details/components/package_title.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="flex-column">
-    <h1 class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4">
+    <h1 class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4">
       {{ packageEntity.name }}
     </h1>
 

ee/app/assets/javascripts/subscriptions/new/components/checkout/step.vue

@@ -61,7 +61,7 @@ export default {
     <div class="card">
       <div v-show="isActive" @keyup.enter="nextStep">
         <slot name="body" :active="isActive"></slot>
-        <gl-form-group v-if="nextStepButtonText" class="prepend-top-8 gl-mb-0">
+        <gl-form-group v-if="nextStepButtonText" class="gl-mt-3 gl-mb-0">
           <gl-deprecated-button variant="success" :disabled="!isValid" @click="nextStep">
             {{ nextStepButtonText }}
           </gl-deprecated-button>

ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -5,7 +5,7 @@ exports[`PackageTitle renders with tags 1`] = `
   class="flex-column"
 >
   <h1
-    class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4"
+    class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4"
   >
     
     Test package
@@ -82,7 +82,7 @@ exports[`PackageTitle renders without tags 1`] = `
   class="flex-column"
 >
   <h1
-    class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4"
+    class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4"
   >
     
     Test package