Merge branch '225932-replace-fa-arrow-icons-with-gitlab-svg-arrow-icons' into 'master'

Replace fa-arrow-* with GitLab SVG icons

Closes #225932

See merge request gitlab-org/gitlab!41158

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
+  components: {
+    GlButton,
+  },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
@@ -26,13 +29,12 @@ export default {
 <template>
   <div class="dropdown-page-two dropdown-new-label">
     <div class="dropdown-title">
-      <button
+      <gl-button
         :aria-label="__('Go back')"
-        type="button"
+        category="tertiary"
         class="dropdown-title-button dropdown-menu-back"
-      >
-        <i aria-hidden="true" class="fa fa-arrow-left" data-hidden="true"> </i>
-      </button>
+        icon="arrow-left"
+      />
       {{ headerTitle }}
       <button
         :aria-label="__('Close')"

app/assets/stylesheets/fontawesome_custom.scss

@@ -134,10 +134,6 @@
   content: '\f100';
 }
 
-.fa-arrow-left::before {
-  content: '\f060';
-}
-
 .fa-trash-o::before {
   content: '\f014';
 }
@@ -166,10 +162,6 @@
   content: '\f0c6';
 }
 
-.fa-arrow-up::before {
-  content: '\f062';
-}
-
 .fa-bug::before {
   content: '\f188';
 }
@@ -186,10 +178,6 @@
   content: '\f0f3';
 }
 
-.fa-arrow-down::before {
-  content: '\f063';
-}
-
 .fa-bitbucket-square::before {
   content: '\f172';
 }
@@ -242,10 +230,6 @@
   content: '\f04b';
 }
 
-.fa-arrow-right::before {
-  content: '\f061';
-}
-
 .fa-search-plus::before {
   content: '\f00e';
 }

app/assets/stylesheets/framework/dropdowns.scss

@@ -600,7 +600,6 @@
   top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
-  font-size: 14px;
   border: 0;
   background: none;
   outline: 0;
@@ -611,7 +610,7 @@
 }
 
 .dropdown-menu-close {
-  top: $gl-padding-4;
+  top: $gl-padding-6;
   right: $gl-padding-8;
   width: 20px;
   height: 20px;
@@ -622,8 +621,8 @@
 }
 
 .dropdown-menu-back {
-  left: 7px;
-  top: 2px;
+  left: 10px;
+  top: $gl-padding-8;
 }
 
 .dropdown-input {

app/helpers/dropdowns_helper.rb

@@ -67,7 +67,7 @@ module DropdownsHelper
 
       if options.fetch(:back, false)
         title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-back", aria: { label: "Go back" }, type: "button") do
-          icon('arrow-left')
+          sprite_icon('arrow-left')
         end
       end
 
@@ -75,7 +75,7 @@ module DropdownsHelper
 
       if options.fetch(:close, true)
         title_output << content_tag(:button, class: "dropdown-title-button dropdown-menu-close", aria: { label: "Close" }, type: "button") do
-          icon('times', class: 'dropdown-menu-close-icon')
+          sprite_icon('close', css_class: 'dropdown-menu-close-icon')
         end
       end
 

app/views/help/_shortcuts.html.haml

@@ -74,7 +74,7 @@
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-up
+                      = sprite_icon('arrow-up', size: 12)
                   %td= _('Edit your most recent comment in a thread (from an empty textarea)')
               %tbody
                 %tr
@@ -91,28 +91,28 @@
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-left
+                      = sprite_icon('arrow-left', size: 12)
                     \/
                     %kbd h
                   %td= _('Scroll left')
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-right
+                      = sprite_icon('arrow-right', size: 12)
                     \/
                     %kbd l
                   %td= _('Scroll right')
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-up
+                      = sprite_icon('arrow-up', size: 12)
                     \/
                     %kbd k
                   %td= _('Scroll up')
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-down
+                      = sprite_icon('arrow-down', size: 12)
                     \/
                     %kbd j
                   %td= _('Scroll down')
@@ -120,14 +120,14 @@
                   %td.shortcut
                     %kbd
                       shift
-                      %i.fa.fa-arrow-up
+                      = sprite_icon('arrow-up', size: 12)
                       \/ k
                   %td= _('Scroll to top')
                 %tr
                   %td.shortcut
                     %kbd
                       shift
-                      %i.fa.fa-arrow-down
+                      = sprite_icon('arrow-down', size: 12)
                       \/ j
                   %td= _('Scroll to bottom')
           .col-lg-4
@@ -231,12 +231,12 @@
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-up
+                      = sprite_icon('arrow-up', size: 12)
                   %td= _('Move selection up')
                 %tr
                   %td.shortcut
                     %kbd
-                      %i.fa.fa-arrow-down
+                      = sprite_icon('arrow-down', size: 12)
                   %td= _('Move selection down')
                 %tr
                   %td.shortcut

app/views/sherlock/file_samples/show.html.haml

@@ -6,7 +6,7 @@
 .row-content-block
   .float-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
-      %i.fa.fa-arrow-left
+      = sprite_icon('arrow-left')
       = t('sherlock.transaction')
   .oneline
     = t('sherlock.file_sample')

app/views/sherlock/queries/show.html.haml

@@ -12,7 +12,7 @@
 .row-content-block
   .float-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
-      %i.fa.fa-arrow-left
+      = sprite_icon('arrow-left')
       = t('sherlock.transaction')
   .oneline
     = t('sherlock.query')

app/views/sherlock/transactions/show.html.haml

@@ -19,7 +19,7 @@
 .row-content-block
   .float-right
     = link_to(sherlock_transactions_path, class: 'btn') do
-      %i.fa.fa-arrow-left
+      = sprite_icon('arrow-left')
       = t('sherlock.all_transactions')
   .oneline
     = t('sherlock.transaction')

changelogs/unreleased/225932-replace-fa-arrow-icons-with-gitlab-svg-arrow-icons.yml

+---
+title: Replace fa-arrow-* with GitLab SVG icons
+merge_request: 41158
+author:
+type: changed

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -43,7 +43,7 @@ describe('DropdownCreateLabelComponent', () => {
       );
 
       expect(backButtonEl).not.toBe(null);
-      expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null);
+      expect(backButtonEl.querySelector('[data-testid="arrow-left-icon"]')).not.toBe(null);
     });
 
     it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => {