Remove append-right-4 CSS class

This removes the append-right-4 CSS
class and replaces it for the gl-mr-2
utility class from GitLab-UI

app/assets/javascripts/batch_comments/components/draft_note.vue

@@ -81,7 +81,7 @@ export default {
         @handleUpdateNote="update"
         @toggleResolveStatus="toggleResolveDiscussion(draft.id)"
       >
-        <strong slot="note-header-info" class="badge draft-pending-label append-right-4">
+        <strong slot="note-header-info" class="badge draft-pending-label gl-mr-2">
           {{ __('Pending') }}
         </strong>
       </noteable-note>

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

@@ -153,7 +153,7 @@ export default {
           v-gl-tooltip
           name="issue-block"
           :title="__('Blocked issue')"
-          class="issue-blocked-icon append-right-4"
+          class="issue-blocked-icon gl-mr-2"
           :aria-label="__('Blocked issue')"
         />
         <icon
@@ -161,7 +161,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon append-right-4"
+          class="confidential-icon gl-mr-2"
           :aria-label="__('Confidential')"
         />
         <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{

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

@@ -166,13 +166,7 @@ export default {
         class="diff-toggle-caret append-right-5"
         @click.stop="handleToggleFile"
       />
-      <a
-        v-once
-        ref="titleWrapper"
-        class="append-right-4"
-        :href="titleLink"
-        @click="handleFileNameClick"
-      >
+      <a v-once ref="titleWrapper" class="gl-mr-2" :href="titleLink" @click="handleFileNameClick">
         <file-icon
           :file-name="filePath"
           :size="18"

app/assets/javascripts/groups/components/group_item.vue

@@ -104,7 +104,7 @@ export default {
       :class="{ 'project-row-contents': !isGroup }"
       class="group-row-contents d-flex align-items-center py-2 pr-3"
     >
-      <div class="folder-toggle-wrap append-right-4 d-flex align-items-center">
+      <div class="folder-toggle-wrap gl-mr-2 d-flex align-items-center">
         <item-caret :is-group-open="group.isOpen" />
         <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" />
       </div>
@@ -140,7 +140,7 @@ export default {
             <item-stats-value
               :icon-name="visibilityIcon"
               :title="visibilityTooltip"
-              css-class="item-visibility d-inline-flex align-items-center gl-mt-3 append-right-4 text-secondary"
+              css-class="item-visibility d-inline-flex align-items-center gl-mt-3 gl-mr-2 text-secondary"
             />
             <span v-if="group.permission" class="user-access-role gl-mt-3">
               {{ group.permission }}

app/assets/javascripts/groups/components/item_caret.vue

@@ -21,5 +21,5 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret append-right-4"> <icon :size="10" :name="iconClass" /> </span>
+  <span class="folder-caret gl-mr-2"> <icon :size="10" :name="iconClass" /> </span>
 </template>

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

@@ -31,7 +31,7 @@ export default {
         s__(`This job is stuck because you don't have
   any active runners online or available with any of these tags assigned to them:`)
       }}
-      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4">
+      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2">
         {{ tag }}
       </span>
     </p>

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -172,7 +172,7 @@ export default {
             :class="{
               'has-upstream prepend-left-64': hasUpstream(index),
               'has-only-one-job': hasOnlyOneJob(stage),
-              'append-right-46': shouldAddRightMargin(index),
+              'gl-mr-26': shouldAddRightMargin(index),
             }"
             :title="capitalizeStageName(stage.name)"
             :groups="stage.groups"

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

@@ -157,7 +157,7 @@ export default {
       <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list">
         <li v-for="link in assets.links" :key="link.name" class="gl-mb-3">
           <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl">
-            <icon name="package" class="align-middle append-right-4 align-text-bottom" />
+            <icon name="package" class="align-middle gl-mr-2 align-text-bottom" />
             {{ link.name }}
             <span v-if="link.external" data-testid="external-link-indicator">{{
               __('(external source)')
@@ -174,7 +174,7 @@ export default {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <icon name="doc-code" class="align-top append-right-4" />
+          <icon name="doc-code" class="align-top gl-mr-2" />
           {{ __('Source code') }}
           <icon name="chevron-down" />
         </button>

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

@@ -75,7 +75,7 @@ export default {
 
     <release-block-milestones v-if="shouldRenderMilestones" :milestones="release.milestones" />
 
-    <div class="append-right-4">
+    <div class="gl-mr-2">
       &bull;
       <span
         v-gl-tooltip.bottom

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

@@ -126,12 +126,12 @@ export default {
             v-gl-tooltip
             :title="milestone.description"
             :href="milestone.webUrl"
-            class="append-right-4"
+            class="gl-mr-2"
           >
             {{ milestone.title }}
           </gl-link>
           <template v-if="shouldRenderBullet(index)">
-            <span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
+            <span :key="'bullet-' + milestone.id" class="gl-mr-2">&bull;</span>
           </template>
           <template v-if="shouldRenderShowMoreLink(index)">
             <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -82,7 +82,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
+          class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
         />
         <a :href="computedPath" class="sortable-link gl-font-weight-normal">{{ title }}</a>

app/assets/stylesheets/framework/common.scss

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

app/helpers/events_helper.rb

@@ -209,19 +209,19 @@ module EventsHelper
 
   def event_wiki_title_html(event)
     capture do
-      concat content_tag(:span, _('wiki page'), class: "event-target-type append-right-4")
+      concat content_tag(:span, _('wiki page'), class: "event-target-type gl-mr-2")
       concat link_to(event.target_title, event_wiki_page_target_url(event),
                      title: event.target_title,
-                     class: 'has-tooltip event-target-link append-right-4')
+                     class: 'has-tooltip event-target-link gl-mr-2')
     end
   end
 
   def event_design_title_html(event)
     capture do
-      concat content_tag(:span, _('design'), class: "event-target-type append-right-4")
+      concat content_tag(:span, _('design'), class: "event-target-type gl-mr-2")
       concat link_to(event.design.reference_link_text, design_url(event.design),
                      title: event.target_title,
-                     class: 'has-tooltip event-design event-target-link append-right-4')
+                     class: 'has-tooltip event-design event-target-link gl-mr-2')
     end
   end
 
@@ -232,8 +232,8 @@ module EventsHelper
   def event_note_title_html(event)
     if event.note_target
       capture do
-        concat content_tag(:span, event.note_target_type, class: "event-target-type append-right-4")
-        concat link_to(event.note_target_reference, event_note_target_url(event), title: event.target_title, class: 'has-tooltip event-target-link append-right-4')
+        concat content_tag(:span, event.note_target_type, class: "event-target-type gl-mr-2")
+        concat link_to(event.note_target_reference, event_note_target_url(event), title: event.target_title, class: 'has-tooltip event-target-link gl-mr-2')
       end
     else
       content_tag(:strong, '(deleted)')
@@ -278,7 +278,7 @@ module EventsHelper
 
   def inline_event_icon(event)
     unless current_path?('users#show')
-      content_tag :span, class: "system-note-image-inline d-none d-sm-flex append-right-4 #{event.action_name.parameterize}-icon align-self-center" do
+      content_tag :span, class: "system-note-image-inline d-none d-sm-flex gl-mr-2 #{event.action_name.parameterize}-icon align-self-center" do
         next design_event_icon(event.action, size: 14) if event.design?
 
         icon_for_event(event.action_name, size: 14)

app/presenters/project_presenter.rb

@@ -16,7 +16,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
   MAX_TOPICS_TO_SHOW = 3
 
   def statistic_icon(icon_name = 'plus-square-o')
-    sprite_icon(icon_name, size: 16, css_class: 'icon append-right-4')
+    sprite_icon(icon_name, size: 16, css_class: 'icon gl-mr-2')
   end
 
   def statistics_anchors(show_auto_devops_callout:)

app/views/events/event/_common.html.haml

@@ -5,16 +5,16 @@
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
   - if event.target
-    %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+    %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
       = event.action_name
-    %span.event-target-type.append-right-4= event.target_type.titleize.downcase
-    = link_to event.target_link_options, class: 'has-tooltip event-target-link append-right-4', title: event.target_title do
+    %span.event-target-type.gl-mr-2= event.target_type.titleize.downcase
+    = link_to event.target_link_options, class: 'has-tooltip event-target-link gl-mr-2', title: event.target_title do
       = event.target.reference_link_text
     - unless event.milestone?
-      %span.event-target-title.append-right-4{ dir: "auto" }
+      %span.event-target-title.gl-mr-2{ dir: "auto" }
         = """.html_safe + event.target.title + "&quot".html_safe
   - else
-    %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+    %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
       = event_action_name(event)
 
   = render "events/event_scope", event: event if event.resource_parent.present?

app/views/events/event/_created_project.html.haml

@@ -4,7 +4,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
     = event_action_name(event)
 
   - if event.project

app/views/events/event/_design.html.haml

@@ -4,7 +4,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
     = event.action_name
   = event_design_title_html(event)
   = render "events/event_scope", event: event

app/views/events/event/_note.html.haml

@@ -4,12 +4,12 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
     = event.action_name
   = event_note_title_html(event)
   - title = note_target_title(event.target)
   - if title.present?
-    %span.event-target-title.append-right-4{ dir: "auto" }
+    %span.event-target-title.gl-mr-2{ dir: "auto" }
       = """.html_safe + title + "&quot".html_safe
 
   = render "events/event_scope", event: event

app/views/events/event/_push.html.haml

@@ -7,9 +7,9 @@
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
   - many_refs = event.ref_count.to_i > 1
-  %span.event-type.d-inline-block.append-right-4.pushed= many_refs ? "#{event.action_name} #{event.ref_count} #{event.ref_type.pluralize}" : "#{event.action_name} #{event.ref_type}"
+  %span.event-type.d-inline-block.gl-mr-2.pushed= many_refs ? "#{event.action_name} #{event.ref_count} #{event.ref_type.pluralize}" : "#{event.action_name} #{event.ref_type}"
   - unless many_refs
-    %span.append-right-4
+    %span.gl-mr-2
       - commits_link = project_commits_path(project, event.ref_name)
       - should_link = event.tag? ? project.repository.tag_exists?(event.ref_name) : project.repository.branch_exists?(event.ref_name)
       = link_to_if should_link, event.ref_name, commits_link, class: 'ref-name'

app/views/events/event/_wiki.html.haml

@@ -4,7 +4,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
     = event.action_name
   = event_wiki_title_html(event)
   = render "events/event_scope", event: event

app/views/projects/_home_panel.html.haml

@@ -24,7 +24,7 @@
               = render 'shared/members/access_request_links', source: @project
           - if @project.tag_list.present?
             %span.home-panel-topic-list.mt-2.w-100.d-inline-flex
-              = sprite_icon('tag', size: 16, css_class: 'icon append-right-4')
+              = 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"

app/views/projects/buttons/_clone.html.haml

@@ -3,7 +3,7 @@
 
 .git-clone-holder.js-git-clone-holder
   %a#clone-dropdown.btn.btn-primary.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
-    %span.append-right-4.js-clone-dropdown-label
+    %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
   %ul.p-3.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }

app/views/shared/projects/_project.html.haml

@@ -45,7 +45,7 @@
 
           - if explore_projects_tab? && license_name
             %span.metadata-info.d-inline-flex.align-items-center.append-right-10.gl-mt-3
-              = sprite_icon('scale', size: 14, css_class: 'append-right-4')
+              = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
               = license_name
 
           - if !explore_projects_tab? && access&.nonzero?
@@ -77,25 +77,25 @@
             = link_to project_starrers_path(project),
                 class: "d-flex align-items-center icon-wrapper stars has-tooltip",
                 title: _('Stars'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('star', size: 14, css_class: 'append-right-4')
+              = sprite_icon('star', size: 14, css_class: 'gl-mr-2')
               = number_with_delimiter(project.star_count)
           - if forks
             = link_to project_forks_path(project),
                 class: "align-items-center icon-wrapper forks has-tooltip",
                 title: _('Forks'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('fork', size: 14, css_class: 'append-right-4')
+              = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
               = number_with_delimiter(project.forks_count)
           - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
             = link_to project_merge_requests_path(project),
                 class: "d-none d-xl-flex align-items-center icon-wrapper merge-requests has-tooltip",
                 title: _('Merge Requests'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('git-merge', size: 14, css_class: 'append-right-4')
+              = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
               = number_with_delimiter(project.open_merge_requests_count)
           - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
             = link_to project_issues_path(project),
                 class: "d-none d-xl-flex align-items-center icon-wrapper issues has-tooltip",
                 title: _('Issues'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('issues', size: 14, css_class: 'append-right-4')
+              = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
               = number_with_delimiter(project.open_issues_count)
         .updated-note
           %span

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -312,7 +312,7 @@ export default {
                   >
                     <span class="d-flex">
                       <icon
-                        class="flex-shrink-0 append-right-4"
+                        class="flex-shrink-0 gl-mr-2"
                         :class="{
                           invisible: !isSelectedSortField(metric.key),
                         }"

ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue

@@ -89,7 +89,7 @@ export default {
             <span class="d-flex">
               <icon
                 :title="s__('MetricChart|Selected')"
-                class="flex-shrink-0 append-right-4"
+                class="flex-shrink-0 gl-mr-2"
                 :class="{
                   invisible: !isSelectedMetric(metric.key),
                 }"

ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue

@@ -80,7 +80,7 @@ export default {
                 >
                   <span class="d-flex">
                     <icon
-                      class="flex-shrink-0 append-right-4"
+                      class="flex-shrink-0 gl-mr-2"
                       :class="{
                         invisible: !isSelectedMetric(option.key),
                       }"

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

@@ -76,7 +76,7 @@ export default {
         <gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)">
           <span class="d-flex">
             <gl-icon
-              class="flex-shrink-0 append-right-4"
+              class="flex-shrink-0 gl-mr-2"
               :class="{ invisible: !isCurrentSortField(id) }"
               name="mobile-issue-close"
             />

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -175,7 +175,7 @@ export default {
               :title="__('Confidential')"
               :aria-label="__('Confidential')"
               name="eye-slash"
-              class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
+              class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0"
             />
             <gl-link
               v-gl-tooltip.hover

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -33,7 +33,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       >
         <icon-stub
           aria-label="Selected"
-          class="flex-shrink-0 append-right-4 invisible"
+          class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"
           size="16"
           title="Selected"
@@ -52,7 +52,7 @@ exports[`MetricChart component template when isLoading is false and chartData is
       >
         <icon-stub
           aria-label="Selected"
-          class="flex-shrink-0 append-right-4 invisible"
+          class="flex-shrink-0 gl-mr-2 invisible"
           name="mobile-issue-close"
           size="16"
           title="Selected"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -50,7 +50,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   class="d-flex"
                 >
                   <icon-stub
-                    class="flex-shrink-0 append-right-4 invisible"
+                    class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"
                   />
@@ -67,7 +67,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   class="d-flex"
                 >
                   <icon-stub
-                    class="flex-shrink-0 append-right-4"
+                    class="flex-shrink-0 gl-mr-2"
                     name="mobile-issue-close"
                     size="16"
                   />
@@ -84,7 +84,7 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   class="d-flex"
                 >
                   <icon-stub
-                    class="flex-shrink-0 append-right-4 invisible"
+                    class="flex-shrink-0 gl-mr-2 invisible"
                     name="mobile-issue-close"
                     size="16"
                   />

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -17,7 +17,7 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           class="d-flex"
         >
           <gl-icon-stub
-            class="flex-shrink-0 append-right-4 invisible"
+            class="flex-shrink-0 gl-mr-2 invisible"
             name="mobile-issue-close"
             size="16"
           />
@@ -31,7 +31,7 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           class="d-flex"
         >
           <gl-icon-stub
-            class="flex-shrink-0 append-right-4 invisible"
+            class="flex-shrink-0 gl-mr-2 invisible"
             name="mobile-issue-close"
             size="16"
           />
@@ -45,7 +45,7 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           class="d-flex"
         >
           <gl-icon-stub
-            class="flex-shrink-0 append-right-4"
+            class="flex-shrink-0 gl-mr-2"
             name="mobile-issue-close"
             size="16"
           />

spec/helpers/events_helper_spec.rb

@@ -174,8 +174,8 @@ RSpec.describe EventsHelper do
       url = helper.event_wiki_page_target_url(event)
       title = event.target_title
       html = [
-        "<span class=\"event-target-type append-right-4\">wiki page</span>",
-        "<a title=\"#{title}\" class=\"has-tooltip event-target-link append-right-4\" href=\"#{url}\">",
+        "<span class=\"event-target-type gl-mr-2\">wiki page</span>",
+        "<a title=\"#{title}\" class=\"has-tooltip event-target-link gl-mr-2\" href=\"#{url}\">",
         title,
         "</a>"
       ].join