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

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>
 

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)"
         >

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"

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
       >

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"

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`"

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 />

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

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') }}

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

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>

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" />

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>

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 }}

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>

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 }}

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') }}

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>

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('')"

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; }

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;
 

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?') }
 

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" }  ×
   .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?')

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'

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'

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),

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' })

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')

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

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?') }
 

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

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

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

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'

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"

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>

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>

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>

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">

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>

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,

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>
 

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"

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

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"
         >

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>

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?') }

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>

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"
     >
       

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"

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();