Remove prepend-bottom-0 CSS rule

This removes the prepend-bottom-0 CSS rule
and replaces it for the gl-mb-0 utility class
from GitLab-UI

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

@@ -147,7 +147,7 @@ export default {
 <template>
   <div>
     <div class="d-flex board-card-header" dir="auto">
-      <h4 class="board-card-title append-bottom-0 gl-mt-0">
+      <h4 class="board-card-title gl-mb-0 gl-mt-0">
         <icon
           v-if="issue.blocked"
           v-gl-tooltip

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -249,7 +249,7 @@ export default {
           <gl-link href="/help/ci/variables/README#masked-variables">
             <gl-icon name="question" :size="12" />
           </gl-link>
-          <p class="prepend-top-4 append-bottom-0 text-secondary">
+          <p class="prepend-top-4 gl-mb-0 text-secondary">
             {{ __('Variable will be masked in job logs.') }}
             <span
               :class="{

app/assets/javascripts/clusters/components/application_row.vue

@@ -322,7 +322,7 @@ export default {
         ></span>
         <slot name="description"></slot>
         <div v-if="hasError" class="cluster-application-error text-danger prepend-top-10">
-          <p class="js-cluster-application-general-error-message append-bottom-0">
+          <p class="js-cluster-application-general-error-message gl-mb-0">
             {{ generalErrorDescription }}
           </p>
           <ul v-if="statusReason || requestReason">

app/assets/javascripts/clusters/components/applications.vue

@@ -272,7 +272,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
 <template>
   <section id="cluster-applications">
-    <p class="append-bottom-0">
+    <p class="gl-mb-0">
       {{
         s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
             Helm Tiller is required to install any of the following applications.`)
@@ -614,7 +614,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
       >
         <div slot="description">
           <span v-if="!rbac">
-            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
+            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info gl-mb-0">
               {{
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
               to install Knative.`)

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

@@ -98,7 +98,7 @@ export default {
         </div>
       </div>
     </header>
-    <ul v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0">
+    <ul v-if="filesLength" class="multi-file-commit-list list-unstyled gl-mb-0">
       <li v-for="file in fileList" :key="file.key">
         <list-item
           :file="file"

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

@@ -82,9 +82,9 @@ export default {
         class="mb-auto mt-auto"
       />
       <div v-else-if="latestPipeline.yamlError" class="bs-callout bs-callout-danger">
-        <p class="append-bottom-0">{{ __('Found errors in your .gitlab-ci.yml:') }}</p>
-        <p class="append-bottom-0 break-word">{{ latestPipeline.yamlError }}</p>
-        <p class="append-bottom-0" v-html="ciLintText"></p>
+        <p class="gl-mb-0">{{ __('Found errors in your .gitlab-ci.yml:') }}</p>
+        <p class="gl-mb-0 break-word">{{ latestPipeline.yamlError }}</p>
+        <p class="gl-mb-0" v-html="ciLintText"></p>
       </div>
       <tabs v-else class="ide-pipeline-list">
         <tab :active="!pipelineFailed">

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

@@ -49,7 +49,7 @@ export default {
 
 <template>
   <div class="multi-file-tabs">
-    <ul ref="tabsScroller" class="list-unstyled append-bottom-0">
+    <ul ref="tabsScroller" class="list-unstyled gl-mb-0">
       <repo-tab v-for="tab in files" :key="tab.key" :tab="tab" />
     </ul>
   </div>

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

@@ -53,6 +53,6 @@ export default {
       </span>
     </p>
 
-    <p class="append-bottom-0">{{ commit.title }}</p>
+    <p class="gl-mb-0">{{ commit.title }}</p>
   </div>
 </template>

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

@@ -277,7 +277,7 @@ export default {
   <div class="prepend-top-default append-bottom-default js-environment-container">
     <div class="environment-information">
       <ci-icon :status="iconStatus" />
-      <p class="inline append-bottom-0" v-html="environment"></p>
+      <p class="inline gl-mb-0" v-html="environment"></p>
     </div>
   </div>
 </template>

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

@@ -26,7 +26,7 @@ export default {
 </script>
 <template>
   <div class="bs-callout bs-callout-warning">
-    <p v-if="tags.length" class="js-stuck-with-tags append-bottom-0">
+    <p v-if="tags.length" class="js-stuck-with-tags gl-mb-0">
       {{
         s__(`This job is stuck because you don't have
   any active runners online with any of these tags assigned to them:`)
@@ -35,13 +35,13 @@ export default {
         {{ tag }}
       </span>
     </p>
-    <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners append-bottom-0">
+    <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners gl-mb-0">
       {{
         s__(`Job|This job is stuck because the project
   doesn't have any runners online assigned to it.`)
       }}
     </p>
-    <p v-else class="js-stuck-no-active-runner append-bottom-0">
+    <p v-else class="js-stuck-no-active-runner gl-mb-0">
       {{
         s__(`This job is stuck because you don't
   have any active runners that can run this job.`)

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, 'append-bottom-0': !hasVariables }"
+      :class="{ 'append-bottom-5': hasVariables, 'gl-mb-0': !hasVariables }"
     >
       <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
     </p>

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

@@ -17,7 +17,7 @@ export default {
 </script>
 <template>
   <div class="bs-callout bs-callout-danger">
-    <p class="js-failed-unmet-prerequisites append-bottom-0">
+    <p class="js-failed-unmet-prerequisites gl-mb-0">
       {{
         s__(`Job|This job failed because the necessary resources were not successfully created.`)
       }}

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

@@ -75,11 +75,11 @@ export default {
           rel="noopener noreferrer nofollow"
           class="js-deploy-url-menu-item menu-item"
         >
-          <strong class="str-truncated-100 append-bottom-0 d-block">
+          <strong class="str-truncated-100 gl-mb-0 d-block">
             {{ slotProps.result.path }}
           </strong>
 
-          <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
+          <p class="text-secondary str-truncated-100 gl-mb-0 d-block">
             {{ slotProps.result.external_url }}
           </p>
         </gl-link>

app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-  <p v-once class="mr-info-list mr-links append-bottom-0">
+  <p v-once class="mr-info-list mr-links gl-mb-0">
     <span class="status-text" v-html="removesBranchText"> </span>
     <i v-tooltip :title="tooltipTitle" :aria-label="tooltipTitle" class="fa fa-question-circle">
     </i>

app/assets/stylesheets/framework/common.scss

@@ -426,7 +426,6 @@ img.emoji {
 .append-right-32 { margin-right: 32px; }
 .append-right-48 { margin-right: 48px; }
 .prepend-right-32 { margin-right: 32px; }
-.append-bottom-0 { margin-bottom: 0; }
 .append-bottom-2 { margin-bottom: 2px; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }
 .append-bottom-5 { margin-bottom: 5px; }

app/views/clusters/clusters/_gitlab_integration_form.html.haml

@@ -4,7 +4,7 @@
     .d-flex.align-items-center
       %h4.pr-2.m-0
         = s_('ClusterIntegration|GitLab Integration')
-      %label.append-bottom-0.js-cluster-enable-toggle-area{ title: s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.'), data: { toggle: 'tooltip', container: 'body' } }
+      %label.gl-mb-0.js-cluster-enable-toggle-area{ title: s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.'), data: { toggle: 'tooltip', container: 'body' } }
         = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster), data: { qa_selector: 'integration_status_toggle' } do
           = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
 

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

@@ -7,7 +7,7 @@
   %p= _('Export this group with all related data to a new GitLab instance. Once complete, you can import the data file from the "New Group" page.')
 
   .bs-callout.bs-callout-info
-    %p.append-bottom-0
+    %p.gl-mb-0
       %p= _('The following items will be exported:')
       %ul
         - group_export_descriptions.each do |description|

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

@@ -33,13 +33,13 @@
             = raw @qr_code
           .col-md-8
             .account-well
-              %p.gl-mt-0.append-bottom-0
+              %p.gl-mt-0.gl-mb-0
                 = _("Can't scan the code?")
-              %p.gl-mt-0.append-bottom-0
+              %p.gl-mt-0.gl-mb-0
                 = _('To add the entry manually, provide the following details to the application on your phone.')
-              %p.gl-mt-0.append-bottom-0
+              %p.gl-mt-0.gl-mb-0
                 = _('Account: %{account}') % { account: @account_string }
-              %p.gl-mt-0.append-bottom-0
+              %p.gl-mt-0.gl-mb-0
                 = _('Key: %{key}') %{ key: current_user.otp_secret.scan(/.{4}/).join(' ') }
               %p.two-factor-new-manual-content
                 = _('Time based: Yes')

app/views/projects/_export.html.haml

@@ -7,7 +7,7 @@
   %p= _('Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.')
 
   .bs-callout.bs-callout-info
-    %p.append-bottom-0
+    %p.gl-mb-0
       %p= _('The following items will be exported:')
       %ul
         - project_export_descriptions.each do |desc|

app/views/projects/empty.html.haml

@@ -10,7 +10,7 @@
     = _('The repository for this project is empty')
 
   - if @project.can_current_user_push_code?
-    %p.append-bottom-0
+    %p.gl-mb-0
       = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
   .project-buttons.qa-quick-actions

app/views/projects/forks/new.html.haml

@@ -9,7 +9,7 @@
   .col-lg-9
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
-        %h5.gl-mt-0.append-bottom-0.prepend-left-default.append-right-default
+        %h5.gl-mt-0.gl-mb-0.prepend-left-default.append-right-default
           = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace

app/views/projects/project_templates/_built_in_templates.html.haml

@@ -11,7 +11,7 @@
     .controls.d-flex.align-items-center
       %a.btn.btn-default.append-right-10{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_event: "click_button", track_value: "" } }
         = _("Preview")
-      %label.btn.btn-success.template-button.choose-template.append-bottom-0{ for: template.name }
+      %label.btn.btn-success.template-button.choose-template.gl-mb-0{ for: template.name }
         %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_event: "click_button", track_value: "" } }
         %span{ data: { qa_selector: 'use_template_button' } }
           = _("Use template")

app/views/projects/snippets/_actions.html.haml

@@ -14,7 +14,7 @@
     = link_to _('Submit as spam'), mark_as_spam_project_snippet_path(@project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: _('Submit as spam')
 - if can?(current_user, :create_snippet, @project) || can?(current_user, :update_snippet, @snippet)
   .d-block.d-sm-none.dropdown
-    %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    %button.btn.btn-default.btn-block.gl-mb-0.prepend-top-5{ data: { toggle: "dropdown" } }
       = _('Options')
       = icon('caret-down')
     .dropdown-menu.dropdown-menu-full-width

app/views/projects/triggers/_index.html.haml

@@ -96,6 +96,6 @@
         %p.light
           With webhook:
 
-        %pre.append-bottom-0
+        %pre.gl-mb-0
           :plain
              #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN&variables[RUN_NIGHTLY_BUILD]=true

app/views/shared/_visibility_level.html.haml

@@ -2,7 +2,7 @@
 
 .form-group.visibility-level-setting
   - if with_label
-    = f.label :visibility_level, _('Visibility level'), class: 'label-bold append-bottom-0'
+    = f.label :visibility_level, _('Visibility level'), class: 'label-bold gl-mb-0'
     %p
       = _('Who can see this group?')
       - visibility_docs_path = help_page_path('public_access/public_access')

app/views/shared/deploy_keys/_form.html.haml

@@ -30,5 +30,5 @@
         = deploy_keys_project_form.label :can_push do
           = deploy_keys_project_form.check_box :can_push
           %strong= _('Write access allowed')
-        %p.light.append-bottom-0
+        %p.light.gl-mb-0
           = _('Allow this key to push to repository as well? (Default only allows pull access.)')

app/views/shared/deploy_keys/_project_group_form.html.haml

@@ -7,7 +7,7 @@
     = f.label :key, class: "label-bold"
     = f.text_area :key, class: "form-control", rows: 5, required: true
   .form-group.row
-    %p.light.append-bottom-0
+    %p.light.gl-mb-0
       = _('Paste a machine public key here. Read more about how to generate it')
       = link_to "here", help_page_path("ssh/README")
 
@@ -17,7 +17,7 @@
         = deploy_keys_project_form.check_box :can_push
         %strong= _('Write access allowed')
     .form-group.row
-      %p.light.append-bottom-0
+      %p.light.gl-mb-0
         = _('Allow this key to push to repository as well? (Default only allows pull access.)')
 
   .form-group.row

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

@@ -8,7 +8,7 @@
 
   %template.js-milestone-deprecation-message-template
     .milestone-popover-body
-      %ol.milestone-popover-instructions-list.append-bottom-0
+      %ol.milestone-popover-instructions-list.gl-mb-0
         %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe
         %li= _('Click the <strong>Promote</strong> button in the top right corner to promote it to a group milestone.').html_safe
     %hr.popover-hr

app/views/shared/tokens/_scopes_list.html.haml

@@ -6,7 +6,7 @@
   %td
     = _('Scopes')
   %td
-    %ul.scopes-list.append-bottom-0
+    %ul.scopes-list.gl-mb-0
       - token.scopes.each do |scope|
         %li
           %span.bold= scope

app/views/snippets/_actions.html.haml

@@ -13,7 +13,7 @@
   - if @snippet.submittable_as_spam_by?(current_user)
     = link_to _('Submit as spam'), mark_as_spam_snippet_path(@snippet), method: :post, class: 'btn btn-grouped btn-spam', title: _('Submit as spam')
 .d-block.d-sm-none.dropdown
-  %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+  %button.btn.btn-default.btn-block.gl-mb-0.prepend-top-5{ data: { toggle: "dropdown" } }
     = _("Options")
     = icon('caret-down')
   .dropdown-menu.dropdown-menu-full-width

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

@@ -66,10 +66,7 @@ export default {
       >
         <span class="property-label"> {{ col.label }} </span>
         <popover v-if="col.popover" :options="getPopoverOptions(col)" />
-        <p
-          class="property-value prepend-top-5 append-bottom-0"
-          :class="[col.colClass ? col.colClass : '']"
-        >
+        <p class="property-value prepend-top-5 gl-mb-0" :class="[col.colClass ? col.colClass : '']">
           {{ getDisplayValue(col) }}
         </p>
       </div>

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 append-bottom-0">
+        <gl-form-group v-if="nextStepButtonText" class="prepend-top-8 gl-mb-0">
           <gl-deprecated-button variant="success" :disabled="!isValid" @click="nextStep">
             {{ nextStepButtonText }}
           </gl-deprecated-button>

ee/app/views/admin/users/_limits.html.haml

@@ -5,6 +5,6 @@
   %fieldset
     %legend Limits
     = render 'namespaces/shared_runners_minutes_setting', form: namespace_form
-    .form-group.append-bottom-0
+    .form-group.gl-mb-0
       .offset-sm-2.col-sm-10
-        = render 'namespaces/shared_runners_minutes_setting_reset', link_reset_minutes: reset_runners_minutes_admin_user_path(@user), css_class: 'append-bottom-0'
+        = render 'namespaces/shared_runners_minutes_setting_reset', link_reset_minutes: reset_runners_minutes_admin_user_path(@user), css_class: 'gl-mb-0'

ee/app/views/users/_custom_project_templates.html.haml

@@ -13,7 +13,7 @@
         .controls.d-flex.align-items-baseline
           %a.btn.btn-default.append-right-10{ href: project_path(template), rel: 'noopener noreferrer', target: '_blank' }
             = _('Preview')
-          %label.btn.btn-success.custom-template-button.choose-template.append-bottom-0{ for: template.name }
+          %label.btn.btn-success.custom-template-button.choose-template.gl-mb-0{ for: template.name }
             %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: template.name, value: template.id, data: { template_name: template.name } }
             %span{ data: { qa_selector: 'use_template_button' } }
               = _('Use template')

ee/app/views/users/_custom_project_templates_from_groups.html.haml

@@ -32,7 +32,7 @@
             .controls.d-flex.align-items-baseline
               %a.btn.btn-default.append-right-10{ href: project_path(project), rel: 'noopener noreferrer', target: '_blank' }
                 = _('Preview')
-              %label.btn.btn-success.custom-template-button.choose-template.append-bottom-0{ for: project.name }
+              %label.btn.btn-success.custom-template-button.choose-template.gl-mb-0{ for: project.name }
                 %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: project.name, value: project.id, data: { subgroup_id: project.namespace_id, template_name: project.name } }
                 %span.qa-use-template-button
                   = _('Use template')