Replace append-bottom-10 css class

This replaces the append-bottom-10 css
class for the gl-mb-3 utility class
from GitLab-UI

app/assets/javascripts/boards/components/modal/header.vue

@@ -67,7 +67,7 @@ export default {
       </h2>
     </header>
     <modal-tabs v-if="!loading && issuesCount > 0" />
-    <div v-if="showSearch" class="d-flex append-bottom-10">
+    <div v-if="showSearch" class="d-flex gl-mb-3">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"

app/assets/javascripts/boards/components/modal/tabs.vue

@@ -19,7 +19,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-area prepend-top-10 append-bottom-10">
+  <div class="top-area prepend-top-10 gl-mb-3">
     <ul class="nav-links issues-state-filters">
       <li :class="{ active: activeTab == 'all' }">
         <a href="#" role="button" @click.prevent="changeTab('all')">

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -84,7 +84,7 @@ export default {
       :title="additionsTooltip"
       data-container="body"
       data-placement="left"
-      class="append-bottom-10"
+      class="gl-mb-3"
     >
       <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
@@ -94,7 +94,7 @@ export default {
       :title="modifiedTooltip"
       data-container="body"
       data-placement="left"
-      class="prepend-top-10 append-bottom-10"
+      class="prepend-top-10 gl-mb-3"
     >
       <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>

app/assets/javascripts/packages/details/components/code_instruction.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!multiline" class="input-group append-bottom-10">
+  <div v-if="!multiline" class="input-group gl-mb-3">
     <input
       :value="instruction"
       type="text"

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

@@ -182,7 +182,7 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             :markdown-docs-path="markdownDocsPath"
             :add-spacing-classes="false"
-            class="prepend-top-10 append-bottom-10"
+            class="prepend-top-10 gl-mb-3"
           >
             <template #textarea>
               <textarea

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

@@ -33,7 +33,7 @@ export default {
         v-for="(field, key, index) in modalData"
         v-if="field.value"
         :key="index"
-        class="row prepend-top-10 append-bottom-10"
+        class="row prepend-top-10 gl-mb-3"
       >
         <strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
 

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <template>
-  <div class="title hide-collapsed append-bottom-10">
+  <div class="title hide-collapsed gl-mb-3">
     {{ __('Labels') }}
     <template v-if="canEdit">
       <gl-loading-icon inline class="align-text-top block-loading" />

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 
 <template>
-  <div class="title hide-collapsed append-bottom-10">
+  <div class="title hide-collapsed gl-mb-3">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" inline />

app/assets/stylesheets/framework/common.scss

@@ -403,7 +403,6 @@ img.emoji {
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-64 { margin-left: 64px; }
 .append-right-20 { margin-right: 20px; }
-.append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-20 { margin-bottom: 20px; }
 .ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }

app/views/ci/runner/_how_to_setup_runner.html.haml

 - link = link_to _("Install GitLab Runner"), 'https://docs.gitlab.com/runner/install/', target: '_blank'
-.append-bottom-10
+.gl-mb-3
   %h4= _("Set up a %{type} Runner manually") % { type: type }
 
 %ol
@@ -13,7 +13,7 @@
     = _("Use the following registration token during setup:")
     %code#registration_token= registration_token
     = clipboard_button(target: '#registration_token', title: _("Copy token"), class: "btn-transparent btn-clipboard")
-    .prepend-top-10.append-bottom-10
+    .prepend-top-10.gl-mb-3
       = button_to _("Reset runners registration token"), reset_token_url,
       method: :put, class: 'btn btn-default',
       data: { confirm: _("Are you sure you want to reset registration token?") }

app/views/ci/runner/_how_to_setup_runner_automatically.html.haml

-.append-bottom-10
+.gl-mb-3
   %h4= _('Set up a %{type} Runner automatically') % { type: type }
 
 %p

app/views/import/manifest/_form.html.haml

@@ -18,6 +18,6 @@
       = _('Import multiple repositories by uploading a manifest file.')
       = link_to icon('question-circle'), help_page_path('user/project/import/manifest')
 
-  .append-bottom-10
+  .gl-mb-3
     = submit_tag _('List available repositories'), class: 'btn btn-success'
     = link_to _('Cancel'), new_project_path, class: 'btn btn-cancel'

app/views/profiles/accounts/show.html.haml

@@ -17,7 +17,7 @@
     - if current_user.two_factor_enabled?
       = link_to _('Manage two-factor authentication'), profile_two_factor_auth_path, class: 'btn btn-info'
     - else
-      .append-bottom-10
+      .gl-mb-3
         = link_to _('Enable two-factor authentication'), profile_two_factor_auth_path, class: 'btn btn-success'
 
 %hr

app/views/profiles/show.html.haml

@@ -29,7 +29,7 @@
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
-      .gl-mt-2.append-bottom-10
+      .gl-mt-2.gl-mb-3
         %button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'

app/views/profiles/two_factor_auths/show.html.haml

@@ -28,7 +28,7 @@
           - help_link_start = '<a href="%{url}" target="_blank">' % { url: help_page_path('user/profile/account/two_factor_authentication') }
           - register_2fa_token = _('Install a soft token authenticator like %{free_otp_link} or Google Authenticator from your application repository and use that app to scan this QR code. More information is available in the %{help_link_start}documentation%{help_link_end}.') % { free_otp_link:'<a href="https://freeotp.github.io/">FreeOTP</a>', help_link_start:help_link_start, help_link_end:'</a>' }
           = register_2fa_token.html_safe
-        .row.append-bottom-10
+        .row.gl-mb-3
           .col-md-4
             = raw @qr_code
           .col-md-8

app/views/projects/cleanup/_show.html.haml

@@ -14,8 +14,8 @@
   .settings-content
     - url = cleanup_namespace_project_settings_repository_path(@project.namespace, @project)
     = form_for @project, url: url, method: :post, authenticity_token: true, html: { class: 'js-requires-input' } do |f|
-      %fieldset.gl-mt-0.append-bottom-10
-        .append-bottom-10
+      %fieldset.gl-mt-0.gl-mb-3
+        .gl-mb-3
           %h5.gl-mt-0
             = _("Upload object map")
           %button.btn.btn-default.js-choose-file{ type: "button" }

app/views/projects/mirrors/_mirror_repos.html.haml

@@ -27,7 +27,7 @@
 
             = render 'projects/mirrors/mirror_repos_form', f: f
 
-            .form-check.append-bottom-10
+            .form-check.gl-mb-3
               = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
               = label_tag :only_protected_branches, _('Only mirror protected branches'), class: 'form-check-label'
               = link_to icon('question-circle'), help_page_path('user/project/protected_branches'), target: '_blank'

app/views/projects/mirrors/_mirror_repos_push.html.haml

@@ -7,7 +7,7 @@
   = rm_f.hidden_field :keep_divergent_refs, class: 'js-mirror-keep-divergent-refs-hidden'
   = render partial: 'projects/mirrors/ssh_host_keys', locals: { f: rm_f }
   = render partial: 'projects/mirrors/authentication_method', locals: { f: rm_f }
-  .form-check.append-bottom-10
+  .form-check.gl-mb-3
     = check_box_tag :keep_divergent_refs, '1', false, class: 'js-mirror-keep-divergent-refs form-check-input'
     = label_tag :keep_divergent_refs, _('Keep divergent refs'), class: 'form-check-label'
     = link_to icon('question-circle'), help_page_path('user/project/repository/repository_mirroring', anchor: 'keep-divergent-refs-core'), target: '_blank'

app/views/projects/mirrors/_ssh_host_keys.html.haml

@@ -6,7 +6,7 @@
   %button.btn.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
     .js-spinner.d-none.spinner.mr-1
     = _('Detect host keys')
-  .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.append-bottom-10{ class: ('collapse' unless mirror.ssh_mirror_url?) }
+  .fingerprint-ssh-info.js-fingerprint-ssh-info.prepend-top-10.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
       = _('Fingerprints')
     .fingerprints-list.js-fingerprints-list{ data: { qa_selector: 'fingerprints_list' } }

app/views/shared/members/_invite_group.html.haml

@@ -14,7 +14,7 @@
         .select-wrapper
           = select_tag group_access_field, options_for_select(access_levels, default_access_level), data: { qa_selector: 'group_access_field' }, class: "form-control select-control"
           = icon('chevron-down')
-        .form-text.text-muted.append-bottom-10
+        .form-text.text-muted.gl-mb-3
           - permissions_docs_path = help_page_path('user/permissions')
           - link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
           = _("%{link_start}Read more%{link_end} about role permissions").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }

app/views/shared/members/_invite_member.html.haml

@@ -14,7 +14,7 @@
         .select-wrapper
           = select_tag :access_level, options_for_select(access_levels, default_access_level), class: "form-control project-access-select select-control"
           = icon('chevron-down')
-        .form-text.text-muted.append-bottom-10
+        .form-text.text-muted.gl-mb-3
           - permissions_docs_path = help_page_path('user/permissions')
           - link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
           = _("%{link_start}Read more%{link_end} about role permissions").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }

app/views/u2f/_register.html.haml

@@ -6,13 +6,13 @@
 
 %script#js-register-u2f-setup{ type: "text/template" }
   - if current_user.two_factor_otp_enabled?
-    .row.append-bottom-10
+    .row.gl-mb-3
       .col-md-4
         %button#js-setup-u2f-device.btn.btn-info.btn-block= _("Set up new U2F device")
       .col-md-8
         %p= _("Your U2F device needs to be set up. Plug it in (if not already) and click the button on the left.")
   - else
-    .row.append-bottom-10
+    .row.gl-mb-3
       .col-md-4
         %button#js-setup-u2f-device.btn.btn-info.btn-block{ disabled: true }= _("Set up new U2F device")
       .col-md-8
@@ -28,11 +28,11 @@
     %a.btn.btn-warning#js-token-2fa-try-again= _("Try again?")
 
 %script#js-register-u2f-registered{ type: "text/template" }
-  .row.append-bottom-10
+  .row.gl-mb-3
     .col-md-12
       %p= _("Your device was successfully set up! Give it a name and register it with the GitLab server.")
       = form_tag(create_u2f_profile_two_factor_auth_path, method: :post) do
-        .row.append-bottom-10
+        .row.gl-mb-3
           .col-md-3
             = text_field_tag 'u2f_registration[name]', nil, class: 'form-control', placeholder: _("Pick a name")
           .col-md-3

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -113,7 +113,7 @@ export default {
 
         <select
           v-model="selectedProjectId"
-          class="js-project-select form-control prepend-top-10 append-bottom-10"
+          class="js-project-select form-control prepend-top-10 gl-mb-3"
         >
           <option v-for="project in projects" :key="project.id" :value="project.id">
             {{ project.name }}
@@ -135,7 +135,7 @@ export default {
       </span>
     </div>
 
-    <div class="center prepend-top-20 append-bottom-10 gl-mr-2 gl-ml-2">
+    <div class="center prepend-top-20 gl-mb-3 gl-mr-2 gl-ml-2">
       <img v-once :src="gitlabForSlackGifPath" class="gitlab-slack-gif" />
     </div>
 
@@ -143,7 +143,7 @@ export default {
       <h3>{{ __('How it works') }}</h3>
 
       <div class="well gitlab-slack-well mx-auto">
-        <code class="code mx-auto append-bottom-10"
+        <code class="code mx-auto gl-mb-3"
           >/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code
         >
         <span>

ee/app/assets/javascripts/billings/components/subscription_table.vue

@@ -118,7 +118,7 @@ export default {
       v-else-if="isLoading && !hasError"
       :label="s__('SubscriptionTable|Loading subscriptions')"
       size="lg"
-      class="prepend-top-10 append-bottom-10"
+      class="prepend-top-10 gl-mb-3"
     />
   </div>
 </template>

ee/app/assets/javascripts/boards/components/assignee_select.vue

@@ -99,7 +99,7 @@ export default {
 
 <template>
   <div :class="wrapperClass" class="block">
-    <div class="title append-bottom-10">
+    <div class="title gl-mb-3">
       {{ label }}
       <button v-if="canEdit" type="button" class="edit-link btn btn-blank float-right">
         {{ __('Edit') }}

ee/app/assets/javascripts/boards/components/board_scope.vue

@@ -94,13 +94,13 @@ export default {
 
 <template>
   <div data-qa-selector="board_scope_modal">
-    <div v-if="canAdminBoard" class="media append-bottom-10">
+    <div v-if="canAdminBoard" class="media gl-mb-3">
       <label class="form-section-title label-bold media-body">{{ __('Board scope') }}</label>
       <button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
         {{ expandButtonText }}
       </button>
     </div>
-    <p class="text-secondary append-bottom-10">
+    <p class="text-secondary gl-mb-3">
       {{ __('Board scope affects which issues are displayed for anyone who visits this board') }}
     </p>
     <div v-if="!collapseScope || expanded">

ee/app/assets/javascripts/boards/components/milestone_select.vue

@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div class="block milestone">
-    <div class="title append-bottom-10">
+    <div class="title gl-mb-3">
       {{ __('Milestone') }}
       <button v-if="canEdit" type="button" class="edit-link btn btn-blank float-right">
         {{ __('Edit') }}

ee/app/assets/javascripts/boards/components/weight_select.vue

@@ -69,7 +69,7 @@ export default {
 
 <template>
   <div class="block weight">
-    <div class="title append-bottom-10">
+    <div class="title gl-mb-3">
       {{ __('Weight') }}
       <gl-deprecated-button
         v-if="canEdit"

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_title.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <div class="title hide-collapsed align-items-center append-bottom-10">
+  <div class="title hide-collapsed align-items-center gl-mb-3">
     <div class="flex-grow-1">
       <span :class="{ 'align-text-top': isLoading }">{{ blockTitle }}</span>
       <gl-loading-icon v-show="isLoading" inline />

ee/app/assets/javascripts/vue_shared/license_compliance/components/set_approval_status_modal.vue

@@ -47,16 +47,13 @@ export default {
     @cancel="resetLicenseInModal"
   >
     <slot v-if="currentLicenseInModal">
-      <div class="row prepend-top-10 append-bottom-10 js-license-name">
+      <div class="row prepend-top-10 gl-mb-3 js-license-name">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|License') }}:
         </label>
         <div class="col-sm-9 text-secondary">{{ currentLicenseInModal.name }}</div>
       </div>
-      <div
-        v-if="currentLicenseInModal.url"
-        class="row prepend-top-10 append-bottom-10 js-license-url"
-      >
+      <div v-if="currentLicenseInModal.url" class="row prepend-top-10 gl-mb-3 js-license-url">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|URL') }}:
         </label>
@@ -66,7 +63,7 @@ export default {
           }}</gl-link>
         </div>
       </div>
-      <div class="row prepend-top-10 append-bottom-10 js-license-packages">
+      <div class="row prepend-top-10 gl-mb-3 js-license-packages">
         <label class="col-sm-3 text-right font-weight-bold">
           {{ s__('LicenseCompliance|Packages') }}:
         </label>

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

@@ -40,7 +40,7 @@
       .help-block
         = _("Mirrored branches will have this prefix. If you enabled 'Only mirror protected branches' you need to include this prefix on protected branches in this project or nothing will be mirrored.")
 
-  .form-check.append-bottom-10
+  .form-check.gl-mb-3
     = f.check_box :mirror_overwrites_diverged_branches, class: 'form-check-input', checked: false
     = f.label :mirror_overwrites_diverged_branches, _('Overwrite diverged branches'), class: 'form-check-label'
     .form-text.text-muted

ee/app/views/shared/_mirror_trigger_builds_setting.html.haml

@@ -2,7 +2,7 @@
 - check_box_options = {}
 - check_box_options[:checked] = checked unless checked.nil?
 
-.form-check.append-bottom-10
+.form-check.gl-mb-3
   = f.check_box :mirror_trigger_builds, check_box_options.merge(class: "form-check-input")
   = f.label :mirror_trigger_builds, _("Trigger pipelines for mirror updates"), class: "form-check-label"
   .form-text.text-muted

ee/spec/frontend/billings/components/__snapshots__/subscription_table_spec.js.snap

@@ -47,7 +47,7 @@ Array [
 exports[`SubscriptionTable component when created matches the snapshot 1`] = `
 <div>
   <gl-loading-icon-stub
-    class="prepend-top-10 append-bottom-10"
+    class="prepend-top-10 gl-mb-3"
     color="orange"
     label="Loading subscriptions"
     size="lg"

spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap

@@ -13,7 +13,7 @@ multiline text
 
 exports[`Package code instruction single line to match the default snapshot 1`] = `
 <div
-  class="input-group append-bottom-10"
+  class="input-group gl-mb-3"
 >
   <input
     class="form-control monospace js-instruction-input"