Remove append-bottom-5 CSS class

This replaces the append-bottom-5 CSS class
and replaces it for the gl-mb-2 utility
class from GitLab-UI

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

@@ -32,7 +32,7 @@ export default {
       block: !isLastBlock,
     }"
   >
-    <p class="append-bottom-5">
+    <p class="gl-mb-2">
       <span class="font-weight-bold">{{ __('Commit') }}</span>
 
       <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">

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

@@ -46,7 +46,7 @@ export default {
     <p
       v-if="trigger.short_token"
       class="js-short-token"
-      :class="{ 'append-bottom-5': hasVariables, 'gl-mb-0': !hasVariables }"
+      :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
     >
       <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
     </p>

app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div ref="accessibility-issue-description" class="report-block-list-issue-description-text">
       <div
         v-if="isNew"

app/assets/javascripts/reports/components/test_issue_body.vue

@@ -25,7 +25,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div class="report-block-list-issue-description-text" data-testid="test-issue-body-description">
       <button
         type="button"

app/assets/stylesheets/framework/common.scss

@@ -411,7 +411,6 @@ img.emoji {
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
-.append-bottom-5 { margin-bottom: 5px; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }

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.gl-mt-3.append-bottom-5
+          %h1.home-panel-title.gl-mt-3.gl-mb-2
             = @group.name
             %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'})

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.gl-mt-3.append-bottom-5{ data: { qa_selector: 'project_name_content' } }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2{ data: { qa_selector: 'project_name_content' } }
             = @project.name
             %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'})

app/views/shared/_milestone_expired.html.haml

 - if milestone.expired? and not milestone.closed?
-  .status-box.status-box-expired.append-bottom-5= _('Expired')
+  .status-box.status-box-expired.gl-mb-2= _('Expired')
 - if milestone.upcoming?
-  .status-box.status-box-mr-merged.append-bottom-5= _('Upcoming')
+  .status-box.status-box-mr-merged.gl-mb-2= _('Upcoming')
 - if milestone.closed?
-  .status-box.status-box-closed.append-bottom-5= _('Closed')
+  .status-box.status-box-closed.gl-mb-2= _('Closed')

app/views/shared/milestones/_milestone.html.haml

@@ -5,17 +5,17 @@
 %li{ class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
   .row
     .col-sm-6
-      .append-bottom-5
+      .gl-mb-2
         %strong= link_to truncate(milestone.title, length: 100), milestone_path(milestone)
         - if @group
           = " - #{milestone_type}"
 
       - if milestone.due_date || milestone.start_date
-        .text-tertiary.append-bottom-5
+        .text-tertiary.gl-mb-2
           = milestone_date_range(milestone)
       - recent_releases, total_count, more_count = recent_releases_with_counts(milestone)
       - unless total_count.zero?
-        .text-tertiary.append-bottom-5.milestone-release-links
+        .text-tertiary.gl-mb-2.milestone-release-links
           = sprite_icon("rocket", size: 12)
           = n_('Release', 'Releases', total_count)
           - recent_releases.each do |release|

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

@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <template v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</template>
 

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

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <template v-if="issueScore">
         {{ issue.name }}: <strong>{{ issueScore }}</strong>

ee/app/assets/javascripts/vue_shared/security_reports/components/security_issue_body.vue

@@ -34,7 +34,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div class="report-block-list-issue-description-text">
       <severity-badge v-if="issue.severity" class="d-inline-block" :severity="issue.severity" />
       <modal-open-name :issue="issue" :status="status" />

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue

@@ -231,7 +231,7 @@ export default {
             <div class="report-block-list-icon append-right-5 failed">
               <icon :size="32" name="status_failed_borderless" />
             </div>
-            <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+            <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
               <div class="report-block-list-issue-description-text">
                 {{ instance.method }}
               </div>

ee/app/views/projects/mirrors/_mirror_repos_form.html.haml

@@ -29,7 +29,7 @@
 
   .form-group
     = f.label :mirror_user_id_select, _('Mirror user'), class: 'label-light'
-    = select_tag(:mirror_user_id_select, options_for_mirror_user, class: 'js-mirror-user select2 lg append-bottom-5', required: true, disabled: true)
+    = select_tag(:mirror_user_id_select, options_for_mirror_user, class: 'js-mirror-user select2 lg gl-mb-2', required: true, disabled: true)
     .help-block
       = _('You will be the author of all events in the activity feed that are the result of an update, like new branches being created or new commits being pushed to existing branches.')
 

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap

@@ -205,7 +205,7 @@ key2: value2"
           </div>
            
           <div
-            class="report-block-list-issue-description prepend-top-5 append-bottom-5"
+            class="report-block-list-issue-description prepend-top-5 gl-mb-2"
           >
             <div
               class="report-block-list-issue-description-text"