Remove append-right-8 CSS class

This removes the append-right-8 CSS class and replaces it with gl-mr-3 utility class from GitLab-UI

Remove append-right-8 CSS class
This removes the append-right-8 CSS class and replaces it with gl-mr-3 utility class from GitLab-UI
f18ec9a9 · Jose Vargas · 3196aca6 · f18ec9a9 · f18ec9a9 · f18ec9a9
Commit f18ec9a9 authored May 28, 2020 by Jose Vargas
51 changed files
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -84,10 +84,10 @@ export default {

    <div v-show="hasError" class="btn-group">
      <div class="btn btn-default btn-sm disabled">
-        <icon :size="16" class="gl-ml-3 append-right-8" name="doc-image" aria-hidden="true" />
+        <icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
      </div>
      <div class="btn btn-default btn-sm disabled">
-        <span class="gl-ml-3 append-right-8">{{ s__('Badges|No badge image') }}</span>
+        <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span>
      </div>
    </div>


--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -54,7 +54,7 @@ export default {
      <div v-if="canEditBadge" class="table-action-buttons">
        <button
          :disabled="badge.isDeleting"
-          class="btn btn-default append-right-8"
+          class="btn btn-default gl-mr-3"
          type="button"
          @click="editBadge(badge)"
        >

--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/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 gl-mt-3"
+          class="board-card-number overflow-hidden d-flex gl-mr-3 gl-mt-3"
        >
          <tooltip-on-truncate
            v-if="issueReferencePath"

--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -170,7 +170,7 @@ export default {
        v-if="tableIsNotEmpty"
        ref="secret-value-reveal-button"
        data-qa-selector="reveal_ci_variable_value_button"
-        class="append-right-8"
+        class="gl-mr-3"
        @click="toggleValues(!valuesHidden)"
        >{{ valuesButtonText }}</gl-deprecated-button
      >

--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -313,7 +313,7 @@ export default {
    :data-qa-selector="id"
  >
    <div class="gl-responsive-table-row-layout" role="row">
-      <div class="table-section append-right-8 section-align-top" role="gridcell">
+      <div class="table-section gl-mr-3 section-align-top" role="gridcell">
        <img
          v-if="hasLogo"
          :src="logoUrl"

--- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
+++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
@@ -168,7 +168,7 @@ export default {
      }}
    </gl-alert>
    <div class="gl-responsive-table-row-layout" role="row">
-      <div class="table-section append-right-8 section-align-top" role="gridcell">
+      <div class="table-section gl-mr-3 section-align-top" role="gridcell">
        <img
          :src="modSecurityLogo"
          :alt="`${$options.title} logo`"

--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -86,7 +86,7 @@ export default {
      <button
        v-gl-tooltip.hover
        type="button"
-        class="btn btn-default append-right-8 js-toggle-tree-list"
+        class="btn btn-default gl-mr-3 js-toggle-tree-list"
        :class="{
          active: showTreeList,
        }"
@@ -126,15 +126,11 @@ export default {
        <gl-deprecated-button
          v-if="commit || startVersion"
          :href="latestVersionPath"
-          class="append-right-8 js-latest-version"
+          class="gl-mr-3 js-latest-version"
        >
          {{ __('Show latest version') }}
        </gl-deprecated-button>
-        <gl-deprecated-button
-          v-show="hasCollapsedFile"
-          class="append-right-8"
-          @click="expandAllFiles"
-        >
+        <gl-deprecated-button v-show="hasCollapsedFile" class="gl-mr-3" @click="expandAllFiles">
          {{ __('Expand all') }}
        </gl-deprecated-button>
        <settings-dropdown />

--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -104,7 +104,7 @@ export default {
      <gl-loading-icon
        v-if="group.isChildrenLoading"
        size="lg"
-        class="d-none d-sm-inline-flex flex-shrink-0 append-right-8"
+        class="d-none d-sm-inline-flex flex-shrink-0 gl-mr-3"
      />
      <div
        :class="{ 'd-sm-flex': !group.isChildrenLoading }"
@@ -117,12 +117,12 @@ export default {
      </div>
      <div class="group-text-container d-flex flex-fill align-items-center">
        <div class="group-text flex-grow-1 flex-shrink-1">
-          <div class="d-flex align-items-center flex-wrap title namespace-title append-right-8">
+          <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3">
            <a
              v-tooltip
              :href="group.relativePath"
              :title="group.fullName"
-              class="no-expand gl-mt-3 append-right-8"
+              class="no-expand gl-mt-3 gl-mr-3"
              data-placement="bottom"
              >{{
                // ending bracket must be by closing tag to prevent

--- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
@@ -56,7 +56,7 @@ export default {
        v-if="canDiscard"
        ref="discardButton"
        type="button"
-        class="btn btn-remove btn-inverted append-right-8"
+        class="btn btn-remove btn-inverted gl-mr-3"
        @click="showDiscardModal"
      >
        {{ __('Discard changes') }}

--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -74,7 +74,7 @@ export default {
  <div class="ide-commit-list-container">
    <header class="multi-file-commit-panel-header d-flex mb-0">
      <div class="d-flex align-items-center flex-fill">
-        <icon v-once :name="iconName" :size="18" class="append-right-8" />
+        <icon v-once :name="iconName" :size="18" class="gl-mr-3" />
        <strong> {{ titleText }} </strong>
        <div class="d-flex ml-auto">
          <button

--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -87,7 +87,7 @@ export default {
      @click="openFileInEditor"
    >
      <span class="multi-file-commit-list-file-path d-flex align-items-center">
-        <file-icon :file-name="file.name" class="append-right-8" />
+        <file-icon :file-name="file.name" class="gl-mr-3" />
        <template v-if="file.prevName && file.prevName !== file.name">
          {{ file.prevName }} &#x2192;
        </template>

--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/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 gl-ml-2">
+      <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2">
        <span class="badge badge-pill"> {{ jobsCount }} </span>
      </div>
      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />

--- a/app/assets/javascripts/ide/components/mr_file_icon.vue
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -18,6 +18,6 @@ export default {
    :title="__('Part of merge request changes')"
    :size="12"
    name="git-merge"
-    class="append-right-8"
+    class="gl-mr-3"
  />
 </template>
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -285,7 +285,7 @@ export default {
      <slot name="topLeft"></slot>
      <h5
        ref="graphTitle"
-        class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate append-right-8"
+        class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"
        tabindex="0"
      >
        {{ title }}

--- a/app/assets/javascripts/releases/components/evidence_block.vue
+++ b/app/assets/javascripts/releases/components/evidence_block.vue
@@ -71,7 +71,7 @@ export default {
          :download="evidenceTitle(index)"
          :href="evidenceUrl(index)"
        >
-          <gl-icon name="review-list" class="align-middle append-right-8" />
+          <gl-icon name="review-list" class="align-middle gl-mr-3" />
          <span>{{ evidenceTitle(index) }}</span>
        </gl-link>

@@ -96,7 +96,7 @@ export default {
        <gl-icon
          v-gl-tooltip
          name="clock"
-          class="align-middle append-right-8"
+          class="align-middle gl-mr-3"
          :title="collectedAt(index)"
        />
        <span>{{ timeSummary(index) }}</span>

--- a/app/assets/javascripts/releases/components/release_block_metadata.vue
+++ b/app/assets/javascripts/releases/components/release_block_metadata.vue
@@ -57,7 +57,7 @@ export default {

 <template>
  <div class="card-subtitle d-flex flex-wrap text-secondary">
-    <div class="append-right-8">
+    <div class="gl-mr-3">
      <icon name="commit" class="align-middle" />
      <gl-link v-if="commitUrl" v-gl-tooltip.bottom :title="commit.title" :href="commitUrl">
        {{ commit.shortId }}
@@ -65,7 +65,7 @@ export default {
      <span v-else v-gl-tooltip.bottom :title="commit.title">{{ commit.shortId }}</span>
    </div>

-    <div class="append-right-8">
+    <div class="gl-mr-3">
      <icon name="tag" class="align-middle" />
      <gl-link v-if="tagUrl" v-gl-tooltip.bottom :title="__('Tag')" :href="tagUrl">
        {{ release.tagName }}

--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -117,7 +117,7 @@ export default {
            :href="webIdePath"
            :title="ideButtonTitle"
            :class="{ disabled: !mr.canPushToSourceBranch }"
-            class="btn btn-default js-web-ide d-none d-md-inline-block append-right-8"
+            class="btn btn-default js-web-ide d-none d-md-inline-block gl-mr-3"
            data-placement="bottom"
            tabindex="0"
            role="button"
@@ -129,7 +129,7 @@ export default {
            :disabled="mr.sourceBranchRemoved"
            data-target="#modal_merge_info"
            data-toggle="modal"
-            class="btn btn-default js-check-out-branch append-right-8"
+            class="btn btn-default js-check-out-branch gl-mr-3"
            type="button"
          >
            {{ s__('mrWidget|Check out branch') }}

--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -52,7 +52,7 @@ export default {
        :download="fileName"
        target="_blank"
      >
-        <icon :size="16" name="download" class="float-left append-right-8" />
+        <icon :size="16" name="download" class="float-left gl-mr-3" />
        {{ __('Download') }}
      </gl-link>
    </div>

--- a/app/assets/javascripts/vue_shared/components/file_finder/item.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/item.vue
@@ -75,12 +75,8 @@ export default {
    @mouseover="mouseOverRow"
    @mousemove="mouseMove"
  >
-    <file-icon
-      :file-name="file.name"
-      :size="16"
-      css-classes="diff-file-changed-icon append-right-8"
-    />
-    <span class="diff-changed-file-content append-right-8">
+    <file-icon :file-name="file.name" :size="16" css-classes="diff-file-changed-icon gl-mr-3" />
+    <span class="diff-changed-file-content gl-mr-3">
      <strong class="diff-changed-file-name">
        <span
          v-for="(char, charIndex) in file.name.split('')"

--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -414,7 +414,6 @@ img.emoji {
 .append-right-2 { margin-right: 2px; }
 .append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -920,7 +920,7 @@ button.mini-pipeline-graph-dropdown-toggle {


      .ci-status-icon {
-        @extend .append-right-8;
+        @include gl-mr-3;

        position: relative;


--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -9,7 +9,7 @@
    = form_for @hook, as: :hook, url: admin_hook_path do |f|
      = render partial: 'form', locals: { form: f, hook: @hook }
      .form-actions
-        %span>= f.submit _('Save changes'), class: 'btn btn-success append-right-8'
+        %span>= f.submit _('Save changes'), class: 'btn btn-success gl-mr-3'
        = render 'shared/web_hooks/test_button', hook: @hook
        = link_to _('Delete'), admin_hook_path(@hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: _('Are you sure?') }


--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -2,7 +2,7 @@
 .bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
  %button.close.js-close{ type: "button" }  &times;
  .gcp-signup-offer--content
-    .gcp-signup-offer--icon.append-right-8
+    .gcp-signup-offer--icon.gl-mr-3
      = sprite_icon("information", size: 16)
    .gcp-signup-offer--copy
      %h4= s_('ClusterIntegration|Did you know?')

--- a/app/views/import/bitbucket_server/new.html.haml
+++ b/app/views/import/bitbucket_server/new.html.haml
@@ -13,14 +13,14 @@
  .form-group.row
    = label_tag :bitbucket_server_url, 'Bitbucket Server URL', class: 'col-form-label col-md-2'
    .col-md-4
-      = text_field_tag :bitbucket_server_url, '', class: 'form-control append-right-8', placeholder: _('https://your-bitbucket-server'), size: 40
+      = text_field_tag :bitbucket_server_url, '', class: 'form-control gl-mr-3', placeholder: _('https://your-bitbucket-server'), size: 40
  .form-group.row
    = label_tag :bitbucket_server_url, 'Username', class: 'col-form-label col-md-2'
    .col-md-4
-      = text_field_tag :bitbucket_username, '', class: 'form-control append-right-8', placeholder: _('username'), size: 40
+      = text_field_tag :bitbucket_username, '', class: 'form-control gl-mr-3', placeholder: _('username'), size: 40
  .form-group.row
    = label_tag :personal_access_token, 'Password/Personal Access Token', class: 'col-form-label col-md-2'
    .col-md-4
-      = password_field_tag :personal_access_token, '', class: 'form-control append-right-8', placeholder: _('Personal Access Token'), size: 40
+      = password_field_tag :personal_access_token, '', class: 'form-control gl-mr-3', placeholder: _('Personal Access Token'), size: 40
  .form-actions
    = submit_tag _('List your Bitbucket Server repositories'), class: 'btn btn-success'
--- a/app/views/import/phabricator/new.html.haml
+++ b/app/views/import/phabricator/new.html.haml
@@ -16,10 +16,10 @@
  .form-group.row
    = label_tag :phabricator_server_url, _('Phabricator Server URL'), class: 'col-form-label col-md-2'
    .col-md-4
-      = text_field_tag :phabricator_server_url, params[:phabricator_server_url], class: 'form-control append-right-8', placeholder: 'https://your-phabricator-server', size: 40
+      = text_field_tag :phabricator_server_url, params[:phabricator_server_url], class: 'form-control gl-mr-3', placeholder: 'https://your-phabricator-server', size: 40
  .form-group.row
    = label_tag :api_token, _('API Token'), class: 'col-form-label col-md-2'
    .col-md-4
-      = password_field_tag :api_token, params[:api_token], class: 'form-control append-right-8', placeholder: _('Personal Access Token'), size: 40
+      = password_field_tag :api_token, params[:api_token], class: 'form-control gl-mr-3', placeholder: _('Personal Access Token'), size: 40
  .form-actions
    = submit_tag _('Import tasks'), class: 'btn btn-success'
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -80,7 +80,7 @@
  - if @project.badges.present?
    .project-badges.mb-2
      - @project.badges.each do |badge|
-        %a.append-right-8{ href: badge.rendered_link_url(@project),
+        %a.gl-mr-3{ href: badge.rendered_link_url(@project),
          target: '_blank',
          rel: 'noopener noreferrer' }>
          %img.project-badge{ src: badge.rendered_image_url(@project),

--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
 - unless @project.empty_repo?
  - if current_user && can?(current_user, :fork_project, @project)
-    .count-badge.d-inline-flex.align-item-stretch.append-right-8
+    .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
      - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'btn btn-default has-tooltip count-badge-button d-flex align-items-center fork-btn' do
          = sprite_icon('fork', { css_class: 'icon' })

--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
 - if current_user
-  .count-badge.d-inline-flex.align-item-stretch.append-right-8
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
    %button.count-badge-button.btn.btn-default.btn-xs.d-flex.align-items-center.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(@project, :json) } }
      - if current_user.starred?(@project)
        = sprite_icon('star', { css_class: 'icon' })
@@ -12,7 +12,7 @@
        = @project.star_count

 - else
-  .count-badge.d-inline-flex.align-item-stretch.append-right-8
+  .count-badge.d-inline-flex.align-item-stretch.gl-mr-3
    = link_to new_user_session_path, class: 'btn btn-default btn-xs has-tooltip count-badge-button d-flex align-items-center star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
      = sprite_icon('star-o', { css_class: 'icon' })
      %span= s_('ProjectOverview|Star')

--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -22,8 +22,8 @@
        - diff_files.each do |diff_file|
          %li
            %a.diff-changed-file{ href: "##{hexdigest(diff_file.file_path)}", title: diff_file.new_path }
-              = sprite_icon(diff_file_changed_icon(diff_file), size: 16, css_class: "#{diff_file_changed_icon_color(diff_file)} diff-file-changed-icon append-right-8")
-              %span.diff-changed-file-content.append-right-8
+              = sprite_icon(diff_file_changed_icon(diff_file), size: 16, css_class: "#{diff_file_changed_icon_color(diff_file)} diff-file-changed-icon gl-mr-3")
+              %span.diff-changed-file-content.gl-mr-3
                - if diff_file.file_path
                  %strong.diff-changed-file-name
                    = diff_file.file_path

--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -10,7 +10,7 @@
    = form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: project_hook_path(@project, @hook) do |f|
      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }

-      %span>= f.submit 'Save changes', class: 'btn btn-success append-right-8'
+      %span>= f.submit 'Save changes', class: 'btn btn-success gl-mr-3'
      = render 'shared/web_hooks/test_button', hook: @hook
      = link_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: _('Are you sure?') }


--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -41,7 +41,7 @@
              = _('Create branch')
          %li.divider.droplab-item-ignore

-          %li.droplab-item-ignore.gl-ml-3.append-right-8.prepend-top-16
+          %li.droplab-item-ignore.gl-ml-3.gl-mr-3.prepend-top-16
            - if can_create_confidential_merge_request?
              #js-forked-project{ data: { namespace_path: @project.namespace.full_path, project_path: @project.full_path, new_fork_path: new_project_fork_path(@project), help_page_path: help_page_path('user/project/merge_requests') } }
            .form-group

--- a/app/views/shared/notifications/_new_button.html.haml
+++ b/app/views/shared/notifications/_new_button.html.haml
@@ -8,7 +8,7 @@
  - else
    - button_title = _("Notification setting - %{notification_title}") % { notification_title: notification_title(notification_setting.level) }

-  .js-notification-dropdown.notification-dropdown.home-panel-action-button.prepend-top-default.append-right-8.dropdown.inline
+  .js-notification-dropdown.notification-dropdown.home-panel-action-button.prepend-top-default.gl-mr-3.dropdown.inline
    = form_for notification_setting, remote: true, html: { class: "inline notification-form no-label" } do |f|
      = hidden_setting_source_input(notification_setting)
      = hidden_field_tag "hide_label", true

--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -32,7 +32,7 @@
        .d-flex.align-items-center.flex-wrap.project-title
          %h2.d-flex.gl-mt-3
            = link_to project_path(project), class: 'text-plain' do
-              %span.project-full-name.append-right-8><
+              %span.project-full-name.gl-mr-3><
                %span.namespace-name
                  - if project.namespace && !skip_namespace
                    = project.namespace.human_name

--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -11,6 +11,6 @@
          = hook.enable_ssl_verification ? _('enabled') : _('disabled')

    .col-md-4.col-lg-5.text-right-md.prepend-top-5
-      %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm append-right-8'
-      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn btn-sm append-right-8'
+      %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm gl-mr-3'
+      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn btn-sm gl-mr-3'
      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn btn-sm'
--- a/ee/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/ee/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -86,7 +86,7 @@ export default {
        <publish-button
          :show-count="true"
          :should-publish="false"
-          class="btn btn-success btn-inverted append-right-8"
+          class="btn btn-success btn-inverted gl-mr-3"
        />
        <loading-button
          ref="publishNowButton"

--- a/ee/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/ee/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -103,7 +103,7 @@ export default {
          :show-count="false"
          :should-publish="true"
          :label="__('Submit review')"
-          class="float-right append-right-8"
+          class="float-right gl-mr-3"
        />
      </div>
    </div>

--- a/ee/app/assets/javascripts/batch_comments/components/preview_item.vue
+++ b/ee/app/assets/javascripts/batch_comments/components/preview_item.vue
@@ -83,7 +83,7 @@ export default {
    @click="scrollToDraft(draft)"
  >
    <span class="review-preview-item-header">
-      <icon class="append-right-8 flex-shrink-0" :name="iconName" />
+      <icon class="gl-mr-3 flex-shrink-0" :name="iconName" />
      <span class="bold text-nowrap">
        <span class="review-preview-item-header-text block-truncated"> {{ titleText }} </span>
        <template v-if="showLinePosition">
@@ -98,7 +98,7 @@ export default {
      v-if="draft.discussion_id && resolvedStatusMessage"
      class="review-preview-item-footer draft-note-resolution p-0"
    >
-      <icon class="append-right-8" name="status_success" /> {{ resolvedStatusMessage }}
+      <icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }}
    </span>
  </button>
 </template>
--- a/ee/app/assets/javascripts/billings/components/subscription_table_row.vue
+++ b/ee/app/assets/javascripts/billings/components/subscription_table_row.vue
@@ -54,7 +54,7 @@ export default {
  <div class="grid-row d-flex flex-grow-1 flex-column flex-sm-column flex-md-column flex-lg-row">
    <div class="grid-cell header-cell">
      <span class="icon-wrapper">
-        <icon v-if="header.icon" class="append-right-8" :name="header.icon" aria-hidden="true" />
+        <icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
        {{ header.title }}
      </span>
    </div>

--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue
@@ -38,12 +38,12 @@ export default {
    <div class="d-flex align-items-center">
      <project-avatar :project="project.namespace" :size="20" class="flex-shrink-0" />
      <gl-link class="js-namespace-link text-secondary" :href="`/${project.namespace.full_path}`">
-        <span class="js-namespace append-right-8"> {{ project.namespace.name }} </span>
+        <span class="js-namespace gl-mr-3"> {{ project.namespace.name }} </span>
      </gl-link>
-      <span class="append-right-8">&gt;</span>
+      <span class="gl-mr-3">&gt;</span>
      <project-avatar :project="project" :size="20" class="flex-shrink-0" />
      <gl-link class="js-project-link text-secondary" :href="project.web_url">
-        <span class="js-name append-right-8"> {{ project.name }} </span>
+        <span class="js-name gl-mr-3"> {{ project.name }} </span>
      </gl-link>
    </div>
    <div class="dropdown js-more-actions">

--- a/ee/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/ee/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -232,7 +232,7 @@ export default {
          v-if="canUserConfigure"
          v-gl-modal="'configure-feature-flags'"
          type="button"
-          class="js-ff-configure append-right-8 btn-inverted btn btn-primary"
+          class="js-ff-configure gl-mr-3 btn-inverted btn btn-primary"
        >
          {{ s__('FeatureFlags|Configure') }}
        </button>

--- a/ee/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
+++ b/ee/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
@@ -185,7 +185,7 @@ export default {
              v-for="scope in featureFlag.scopes"
              :key="scope.id"
              v-gl-tooltip.hover="scopeTooltipText(scope)"
-              class="badge append-right-8 gl-mt-2"
+              class="badge gl-mr-3 gl-mt-2"
              :class="{
                'badge-active': scope.active,
                'badge-inactive': !scope.active,

--- a/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
+++ b/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
@@ -70,7 +70,7 @@ export default {
 <template>
  <div class="d-flex align-items-center">
    <div v-if="!hideLabel" ref="tagLabel" class="d-flex align-items-center">
-      <gl-icon name="labels" class="append-right-8" />
+      <gl-icon name="labels" class="gl-mr-3" />
      <strong class="js-tags-count">{{ tagsDisplay }}</strong>
    </div>


--- a/ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue
+++ b/ee/app/assets/javascripts/subscriptions/new/components/checkout/step_header.vue
@@ -21,7 +21,7 @@ export default {
  <div class="d-flex">
    <icon
      v-show="isFinished"
-      class="checkmark append-right-8"
+      class="checkmark gl-mr-3"
      :size="18"
      :aria-label="title"
      name="check-circle"

--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/blocking_merge_requests/blocking_merge_request_body.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/blocking_merge_requests/blocking_merge_request_body.vue
@@ -34,7 +34,7 @@ export default {

 <template>
  <div v-if="issue.hiddenCount" class="p-3 d-flex align-items-center">
-    <icon class="append-right-8" name="eye-slash" aria-hidden="true" />
+    <icon class="gl-mr-3" name="eye-slash" aria-hidden="true" />
    {{ hiddenBlockingMRsText }}
  </div>
  <related-issuable-item

--- a/ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue
@@ -172,7 +172,7 @@ export default {
      <div v-if="showActionButtons" slot="actionButtons" class="append-right-default">
        <a
          v-if="licenseManagementSettingsPath"
-          :class="{ 'append-right-8': fullReportPath }"
+          :class="{ 'gl-mr-3': fullReportPath }"
          :href="licenseManagementSettingsPath"
          class="btn btn-default btn-sm js-manage-licenses"
        >

--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/severity_badge.vue
@@ -44,7 +44,7 @@ export default {

 <template>
  <div v-if="hasSeverityBadge" class="severity-badge text-left text-nowrap gl-text-gray-900">
-    <span :class="className"><gl-icon :name="iconName" :size="12" class="append-right-8"/></span
+    <span :class="className"><gl-icon :name="iconName" :size="12" class="gl-mr-3"/></span
    >{{ severityTitle }}
  </div>
 </template>
--- a/ee/app/views/groups/hooks/edit.html.haml
+++ b/ee/app/views/groups/hooks/edit.html.haml
@@ -9,6 +9,6 @@
    = form_for [@group, @hook], as: :hook, url: group_hook_path(@group, @hook) do |f|
      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }

-      %span>= f.submit _('Save changes'), class: 'btn btn-success append-right-8'
+      %span>= f.submit _('Save changes'), class: 'btn btn-success gl-mr-3'
      = render 'shared/web_hooks/test_button', hook: @hook
      = link_to _('Delete'), group_hook_path(@group, @hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: _('Are you sure?') }
--- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap
+++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap
@@ -18,14 +18,14 @@ exports[`Project Header matches the snapshot 1`] = `
      href="/hello"
    >
      <span
-        class="js-namespace append-right-8"
+        class="js-namespace gl-mr-3"
      >
         hello 
      </span>
    </gl-link-stub>
     
    <span
-      class="append-right-8"
+      class="gl-mr-3"
    >
      &gt;
    </span>
@@ -40,7 +40,7 @@ exports[`Project Header matches the snapshot 1`] = `
      class="js-project-link text-secondary"
    >
      <span
-        class="js-name append-right-8"
+        class="js-name gl-mr-3"
      >
         world 
      </span>

--- a/ee/spec/frontend/vue_shared/license_compliance/__snapshots__/mr_widget_license_report_spec.js.snap
+++ b/ee/spec/frontend/vue_shared/license_compliance/__snapshots__/mr_widget_license_report_spec.js.snap
@@ -50,7 +50,7 @@ exports[`License Report MR Widget report section should render correctly 1`] = `
    class="append-right-default"
  >
    <a
-      class="btn btn-default btn-sm js-manage-licenses append-right-8"
+      class="btn btn-default btn-sm js-manage-licenses gl-mr-3"
      href="http://test.host/lm_settings"
    >
      

--- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
+++ b/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 gl-ml-2"
+      class="gl-mr-3 gl-ml-2"
    >
      <span
        class="badge badge-pill"

--- a/spec/frontend/jobs/components/job_log_spec.js
+++ b/spec/frontend/jobs/components/job_log_spec.js
@@ -10,7 +10,7 @@ describe('Job Log', () => {
  let vm;

  const trace =
-    '<span>Running with gitlab-runner 12.1.0 (de7731dd)<br/></span><span>  on docker-auto-scale-com d5ae8d25<br/></span><div class="append-right-8" data-timestamp="1565502765" data-section="prepare-executor" role="button"></div><span class="section section-header js-s-prepare-executor">Using Docker executor with image ruby:2.6 ...<br/></span>';
+    '<span>Running with gitlab-runner 12.1.0 (de7731dd)<br/></span><span>  on docker-auto-scale-com d5ae8d25<br/></span><div class="gl-mr-3" data-timestamp="1565502765" data-section="prepare-executor" role="button"></div><span class="section section-header js-s-prepare-executor">Using Docker executor with image ruby:2.6 ...<br/></span>';

  beforeEach(() => {
    store = createStore();