Replace append-right-5 class

This replaces the append-right-5 utility
class for the gl-mr-2 class from GitLab-UI

app/assets/javascripts/commit_merge_requests.js

@@ -15,14 +15,14 @@ export function createHeader(childElementCount, mergeRequestCount) {
   const headerText = getHeaderText(childElementCount, mergeRequestCount);
 
   return $('<span />', {
-    class: 'append-right-5',
+    class: 'gl-mr-2',
     text: headerText,
   });
 }
 
 export function createLink(mergeRequest) {
   return $('<a />', {
-    class: 'append-right-5',
+    class: 'gl-mr-2',
     href: mergeRequest.path,
     text: `!${mergeRequest.iid}`,
   });

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -163,16 +163,11 @@ export default {
         :name="collapseIcon"
         :size="16"
         aria-hidden="true"
-        class="diff-toggle-caret append-right-5"
+        class="diff-toggle-caret gl-mr-2"
         @click.stop="handleToggleFile"
       />
       <a v-once ref="titleWrapper" class="gl-mr-2" :href="titleLink" @click="handleFileNameClick">
-        <file-icon
-          :file-name="filePath"
-          :size="18"
-          aria-hidden="true"
-          css-classes="append-right-5"
-        />
+        <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
         <span v-if="isFileRenamed">
           <strong
             v-gl-tooltip
@@ -208,7 +203,7 @@ export default {
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span v-if="isUsingLfs" class="label label-lfs append-right-5"> {{ __('LFS') }} </span>
+      <span v-if="isUsingLfs" class="label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
     </div>
 
     <div

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

@@ -80,14 +80,9 @@ export default {
     <div ref="header" class="file-title file-title-flex-parent">
       <div class="file-header-content d-flex align-content-center">
         <div v-if="hasCode" class="d-inline-block cursor-pointer" @click="toggle()">
-          <icon :name="collapseIcon" :size="16" aria-hidden="true" class="append-right-5" />
+          <icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" />
         </div>
-        <file-icon
-          :file-name="filePath"
-          :size="18"
-          aria-hidden="true"
-          css-classes="append-right-5"
-        />
+        <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
         <strong
           v-gl-tooltip
           :title="filePath"

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

@@ -38,11 +38,7 @@ export default {
 <template>
   <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
     <div ref="accessibility-issue-description" class="report-block-list-issue-description-text">
-      <div
-        v-if="isNew"
-        ref="accessibility-issue-is-new-badge"
-        class="badge badge-danger append-right-5"
-      >
+      <div v-if="isNew" ref="accessibility-issue-is-new-badge" class="badge badge-danger gl-mr-2">
         {{ s__('AccessibilityReport|New') }}
       </div>
       <div>

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

@@ -32,7 +32,7 @@ export default {
         class="btn-link btn-blank text-left break-link vulnerability-name-button"
         @click="openModal({ issue })"
       >
-        <div v-if="isNew" class="badge badge-danger append-right-5">{{ s__('New') }}</div>
+        <div v-if="isNew" class="badge badge-danger gl-mr-2">{{ s__('New') }}</div>
         {{ issue.name }}
       </button>
     </div>

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -166,7 +166,7 @@ export default {
   <div class="detail-page-header">
     <div class="detail-page-header-body">
       <div
-        class="snippet-box has-tooltip d-flex align-items-center append-right-5 mb-1"
+        class="snippet-box has-tooltip d-flex align-items-center gl-mr-2 mb-1"
         data-qa-selector="snippet_container"
         :title="snippetVisibilityLevelDescription"
         data-container="body"

app/assets/javascripts/vue_shared/components/loading_button.vue

@@ -47,7 +47,7 @@ export default {
         v-if="loading"
         :inline="true"
         :class="{
-          'append-right-5': label,
+          'gl-mr-2': label,
         }"
         class="js-loading-button-icon"
       />

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -122,7 +122,7 @@ export default {
         ></div>
         <div v-if="hasMoreCommits" class="flex-list">
           <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded">
-            <icon :name="toggleIcon" :size="8" class="append-right-5" />
+            <icon :name="toggleIcon" :size="8" class="gl-mr-2" />
             <span>{{ __('Toggle commit list') }}</span>
           </div>
         </div>

app/assets/stylesheets/framework/common.scss

@@ -405,7 +405,6 @@ img.emoji {
 .prepend-left-15 { margin-left: 15px; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-64 { margin-left: 64px; }
-.append-right-5 { margin-right: 5px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
 .append-right-20 { margin-right: 20px; }

app/helpers/commits_helper.rb

@@ -79,7 +79,7 @@ module CommitsHelper
   # Returns a link formatted as a commit tag link
   def commit_tag_link(url, text)
     link_to(url, class: 'badge badge-gray ref-name') do
-      sprite_icon('tag', size: 12, css_class: 'append-right-5 vertical-align-middle') + "#{text}"
+      sprite_icon('tag', size: 12, css_class: 'gl-mr-2 vertical-align-middle') + "#{text}"
     end
   end
 

app/views/doorkeeper/applications/index.html.haml

@@ -41,7 +41,7 @@
                         %div= uri
                     %td= application.access_tokens.count
                     %td
-                      = link_to edit_oauth_application_path(application), class: "btn btn-transparent append-right-5" do
+                      = link_to edit_oauth_application_path(application), class: "btn btn-transparent gl-mr-2" do
                         %span.sr-only
                           = _('Edit')
                         = icon('pencil')

app/views/profiles/_event_table.html.haml

@@ -5,7 +5,7 @@
   - events.each do |event|
     %li
       %span.description
-        = audit_icon(event.details[:with], class: "append-right-5")
+        = audit_icon(event.details[:with], class: "gl-mr-2")
         = _('Signed in with %{authentication} authentication') % { authentication: event.details[:with]}
       %span.float-right= time_ago_with_tooltip(event.created_at)
 

app/views/profiles/notifications/_group_settings.html.haml

@@ -2,7 +2,7 @@
 
 .gl-responsive-table-row.notification-list-item
   .table-section.section-40
-    %span.notification.fa.fa-holder.append-right-5
+    %span.notification.fa.fa-holder.gl-mr-2
       = notification_icon(notification_icon_level(setting, emails_disabled))
 
     %span.str-truncated

app/views/profiles/notifications/_project_settings.html.haml

 - emails_disabled = project.emails_disabled?
 
 %li.notification-list-item
-  %span.notification.fa.fa-holder.append-right-5
+  %span.notification.fa.fa-holder.gl-mr-2
     = notification_icon(notification_icon_level(setting, emails_disabled))
 
   %span.str-truncated

app/views/projects/_home_panel.html.haml

@@ -27,7 +27,7 @@
               = sprite_icon('tag', size: 16, css_class: 'icon gl-mr-2')
 
               - @project.topics_to_show.each do |topic|
-                - project_topics_classes = "badge badge-pill badge-secondary append-right-5"
+                - project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
                 - explore_project_topic_path = explore_projects_path(tag: topic)
                 - if topic.length > max_project_topic_length
                   %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path }

app/views/projects/blob/_header_content.html.haml

@@ -10,4 +10,4 @@
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs
-    %span.badge.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.gl-mr-2 LFS

app/views/projects/diffs/_file_header.html.haml

@@ -37,4 +37,4 @@
       #{diff_file.a_mode} → #{diff_file.b_mode}
 
   - if diff_file.stored_externally? && diff_file.external_storage == :lfs
-    %span.badge.label-lfs.append-right-5 LFS
+    %span.badge.label-lfs.gl-mr-2 LFS

app/views/shared/snippets/_header.html.haml

 .detail-page-header
   .detail-page-header-body
-    .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+    .snippet-box.has-tooltip.inline.gl-mr-2{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
       %span.sr-only
         = visibility_level_label(@snippet.visibility_level)
       = visibility_level_icon(@snippet.visibility_level, fw: false)

app/views/shared/wikis/_sidebar.html.haml

@@ -6,7 +6,7 @@
 
       - git_access_url = wiki_path(@wiki, action: :git_access)
       = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '', data: { qa_selector: 'clone_repository_link' } do
-        = sprite_icon('download', size: 16, css_class: 'append-right-5')
+        = sprite_icon('download', size: 16, css_class: 'gl-mr-2')
         %span= _("Clone repository")
 
     .blocks-container

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

@@ -134,7 +134,7 @@ export default {
       </span>
     </div>
 
-    <div class="center prepend-top-20 append-bottom-10 append-right-5 prepend-left-5">
+    <div class="center prepend-top-20 append-bottom-10 gl-mr-2 prepend-left-5">
       <img v-once :src="gitlabForSlackGifPath" class="gitlab-slack-gif" />
     </div>
 
@@ -146,7 +146,7 @@ export default {
           >/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code
         >
         <span>
-          <div class="gitlab-slack-right-arrow inline append-right-5" v-html="arrowRightSvg"></div>
+          <div class="gitlab-slack-right-arrow inline gl-mr-2" v-html="arrowRightSvg"></div>
           Shows the issue with id <strong>&lt;id&gt;</strong>
         </span>
 

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -200,12 +200,7 @@ export default {
       {{ label }}
       <gl-loading-icon v-if="dateSaveInProgress" :inline="true" />
       <div class="float-right d-flex">
-        <icon
-          v-popover="popoverOptions"
-          name="question-o"
-          class="help-icon append-right-5"
-          tabindex="0"
-        />
+        <icon v-popover="popoverOptions" name="question-o" class="help-icon gl-mr-2" tabindex="0" />
         <gl-deprecated-button
           v-show="canUpdate && !editing"
           ref="editButton"
@@ -249,7 +244,7 @@ export default {
               v-if="isDateInvalid && selectedDateIsFixed"
               v-popover="dateInvalidPopoverOptions"
               name="warning"
-              class="date-warning-icon append-right-5 prepend-left-5"
+              class="date-warning-icon gl-mr-2 prepend-left-5"
               tabindex="0"
             />
             <span v-if="selectedAndEditable" class="no-value d-flex">

ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue

@@ -115,7 +115,7 @@ export default {
           <span class="js-security-dashboard-right pull-right">
             <icon name="branch" />
             <gl-link :href="branch.path" class="monospace">{{ branch.id }}</gl-link>
-            <span class="text-muted prepend-left-5 append-right-5">&middot;</span>
+            <span class="text-muted prepend-left-5 gl-mr-2">&middot;</span>
             <icon name="commit" />
             <gl-link :href="commit.path" class="monospace">{{ commit.id }}</gl-link>
           </span>

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

@@ -20,7 +20,7 @@ export default {
 <template>
   <div class="report-block-info license-item">
     <button
-      class="btn-blank btn-link append-right-5"
+      class="btn-blank btn-link gl-mr-2"
       type="button"
       data-toggle="modal"
       data-target="#modal-set-license-approval"

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

@@ -50,7 +50,7 @@ export default {
     <gl-dropdown-item v-for="button in buttons" :key="button.action" @click="setButton(button)">
       <div class="media">
         <div>
-          <icon v-if="selectedButton === button" class="append-right-5" name="mobile-issue-close" />
+          <icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" />
         </div>
         <div class="media-body" :class="{ 'prepend-left-20': selectedButton !== button }">
           <strong>{{ button.name }}</strong>

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

@@ -246,7 +246,7 @@ export default {
       <div class="info-well">
         <ul class="report-block-list">
           <li v-for="(instance, i) in instances" :key="i" class="report-block-list-issue">
-            <div class="report-block-list-icon append-right-5 failed">
+            <div class="report-block-list-icon gl-mr-2 failed">
               <icon :size="32" name="status_failed_borderless" />
             </div>
             <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">

ee/app/views/shared/billings/_billing_plan.html.haml

@@ -11,7 +11,7 @@
 
     .card-body
       .price-per-month
-        .append-right-5
+        .gl-mr-2
           = number_to_plan_currency(plan.price_per_month)
 
         %ul.conditions.p-0.my-auto

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -24,7 +24,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
       class="float-right d-flex"
     >
       <icon-stub
-        class="help-icon append-right-5"
+        class="help-icon gl-mr-2"
         name="question-o"
         size="16"
         tabindex="0"

ee/spec/frontend/security_dashboard/components/__snapshots__/project_security_dashboard_spec.js.snap

@@ -34,7 +34,7 @@ exports[`Project Security Dashboard component Headline renders renders branch an
   </a>
    
   <span
-    class="text-muted prepend-left-5 append-right-5"
+    class="text-muted prepend-left-5 gl-mr-2"
   >
     ·
   </span>

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

@@ -202,7 +202,7 @@ key2: value2"
           class="report-block-list-issue"
         >
           <div
-            class="report-block-list-icon append-right-5 failed"
+            class="report-block-list-icon gl-mr-2 failed"
           >
             <icon-stub
               name="status_failed_borderless"