Replace fa-check with check SVG

- This MR replaces the fa-check
fontawesome icon with the
GitLab check SVG.

app/assets/javascripts/notes/components/comment_form.vue

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { isEmpty } from 'lodash';
 import Autosize from 'autosize';
-import { GlAlert, GlIntersperse, GlLink, GlSprintf, GlButton } from '@gitlab/ui';
+import { GlAlert, GlIntersperse, GlLink, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import { deprecatedCreateFlash as Flash } from '../../flash';
@@ -38,6 +38,7 @@ export default {
     GlIntersperse,
     GlLink,
     GlSprintf,
+    GlIcon,
   },
   mixins: [issuableStateMixin],
   props: {
@@ -457,7 +458,7 @@ export default {
                       class="btn btn-transparent"
                       @click.prevent="setNoteType('comment')"
                     >
-                      <i aria-hidden="true" class="fa fa-check icon"></i>
+                      <gl-icon name="check" class="icon" />
                       <div class="description">
                         <strong>{{ __('Comment') }}</strong>
                         <p>
@@ -476,7 +477,7 @@ export default {
                       data-qa-selector="discussion_menu_item"
                       @click.prevent="setNoteType('discussion')"
                     >
-                      <i aria-hidden="true" class="fa fa-check icon"></i>
+                      <gl-icon name="check" class="icon" />
                       <div class="description">
                         <strong>{{ __('Start thread') }}</strong>
                         <p>{{ startDiscussionDescription }}</p>

app/assets/stylesheets/framework/dropdowns.scss

@@ -407,7 +407,8 @@
         }
       }
 
-      &.droplab-item-selected i {
+      &.droplab-item-selected i,
+      &.droplab-item-selected svg {
         visibility: visible;
       }
 

app/assets/stylesheets/framework/modal.scss

@@ -160,8 +160,4 @@ body.modal-open {
       min-height: $modal-body-height;
     }
   }
-
-  .checkmark {
-    color: $green-400;
-  }
 }

app/views/groups/_home_panel.html.haml

@@ -35,7 +35,7 @@
                 %li.droplab-item-selected.qa-new-project-option{ role: "button", data: { value: "new-project", text: new_project_label } }
                   .menu-item
                     .icon-container
-                      = icon("check", class: "list-item-checkmark")
+                      = sprite_icon("check", css_class: "list-item-checkmark")
                     .description
                       %strong= new_project_label
                       %span= s_("GroupsTree|Create a project in this group.")
@@ -43,7 +43,7 @@
                   %li.qa-new-subgroup-option{ role: "button", data: { value: "new-subgroup", text: new_subgroup_label } }
                     .menu-item
                       .icon-container
-                        = icon("check", class: "list-item-checkmark")
+                        = sprite_icon("check", css_class: "list-item-checkmark")
                       .description
                         %strong= new_subgroup_label
                         %span= s_("GroupsTree|Create a subgroup in this group.")

app/views/import/google_code/status.html.haml

@@ -43,7 +43,7 @@
             - case project.import_status
             - when 'finished'
               %span
-                %i.fa.fa-check
+                = sprite_icon('check')
                 = _("done")
             - when 'started'
               = loading_icon

app/views/projects/blob/viewers/_gitlab_ci_yml.html.haml

 - if viewer.valid?(project: @project, sha: @commit.sha, user: @current_user)
-  = icon('check fw')
+  = sprite_icon('check')
   This GitLab CI configuration is valid.
 - else
-  = icon('warning fw')
+  = sprite_icon('warning-solid')
   This GitLab CI configuration is invalid:
   = viewer.validation_message(project: @project, sha: @commit.sha, user: @current_user)
 

app/views/projects/blob/viewers/_metrics_dashboard_yml.html.haml

 - if viewer.valid?
-  = icon('check fw')
+  = sprite_icon('check')
   = _('Metrics Dashboard YAML definition is valid.')
 - else
-  = icon('warning fw')
+  = sprite_icon('warning-solid')
   = _('Metrics Dashboard YAML definition is invalid:')
   %ul
     - viewer.errors.each do |error|

app/views/projects/blob/viewers/_route_map.html.haml

 - if viewer.valid?
-  = icon('check fw')
+  = sprite_icon('check')
   This Route Map is valid.
 - else
-  = icon('warning fw')
+  = sprite_icon('warning-solid')
   This Route Map is invalid:
   = viewer.validation_message
 

app/views/projects/issues/_new_branch.html.haml

@@ -29,7 +29,7 @@
           - if can_create_merge_request
             %li.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: create_mr_text } }
               .menu-item.text-nowrap
-                = icon('check', class: 'icon')
+                = sprite_icon('check', css_class: 'icon')
                 - if can_create_confidential_merge_request?
                   = _('Create confidential merge request and branch')
                 - else
@@ -37,7 +37,7 @@
 
           %li{ class: [!can_create_merge_request && 'droplab-item-selected'], role: 'button', data: { value: 'create-branch', text: _('Create branch') } }
             .menu-item
-              = icon('check', class: 'icon')
+              = sprite_icon('check', css_class: 'icon')
               = _('Create branch')
           %li.divider.droplab-item-ignore
 

app/views/projects/issues/export_csv/_modal.html.haml

@@ -13,7 +13,7 @@
           - issues_count = issuables_count_for_state(:issues, params[:state])
           - unless issues_count == -1 # The count timed out
             .modal-subheader
-              = icon('check', { class: 'checkmark' })
+              = sprite_icon('check', css_class: 'gl-text-green-400')
               %strong.gl-ml-3
                 = n_('%d issue selected', '%d issues selected', issues_count) % issues_count
           .modal-text

app/views/projects/mirrors/_ssh_host_keys.html.haml

@@ -14,7 +14,7 @@
         %code= fp.fingerprint
     - if verified_at
       .form-text.text-muted.js-fingerprint-verification
-        %i.fa.fa-check.fingerprint-verified
+        = sprite_icon('check', css_class: 'gl-text-green-500')
         Verified by
         - if verified_by
           = link_to verified_by.name, user_path(verified_by)

app/views/shared/issuable/_close_reopen_report_toggle.html.haml

@@ -21,7 +21,7 @@
                     data: { text: _("Close %{display_issuable_type}") % { display_issuable_type: display_issuable_type }, url: close_issuable_path(issuable),
                     button_class: "#{button_class} btn-close", toggle_class: "#{toggle_class} btn-close-color" } }
       %button.btn.btn-transparent
-        = icon('check', class: 'icon')
+        = sprite_icon('check', css_class: 'icon')
         .description
           %strong.title
             = _('Close')
@@ -31,7 +31,7 @@
                      data: { text: _("Reopen %{display_issuable_type}") % { display_issuable_type: display_issuable_type }, url: reopen_issuable_path(issuable),
                      button_class: "#{button_class} btn-reopen", toggle_class: "#{toggle_class} btn-reopen-color" } }
       %button.btn.btn-transparent
-        = icon('check', class: 'icon')
+        = sprite_icon('check', css_class: 'icon')
         .description
           %strong.title
             = _('Reopen')

app/views/shared/members/_member.html.haml

@@ -105,12 +105,12 @@
         - if member.can_approve?
           = link_to polymorphic_path([:approve_access_request, member]),
                     method: :post,
-                    class: "btn btn-success align-self-center m-0 mb-2 #{'mb-sm-0 ml-sm-2' unless force_mobile_view}",
+                    class: "btn btn-success btn-icon gl-button align-self-center m-0 mb-2 #{'mb-sm-0 ml-sm-2' unless force_mobile_view}",
                     title: _('Grant access') do
             %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
               = _('Grant access')
             - unless force_mobile_view
-              = icon('check inverse', class: 'd-none d-sm-block')
+              = sprite_icon('check', css_class: 'd-none d-sm-block')
 
         - if member.can_remove?
           - if current_user == user

app/views/shared/notes/_comment_button.html.haml

@@ -10,7 +10,7 @@
     %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => _('Comment'), 'close-text' => _("Comment & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Comment & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
         %button.btn.btn-transparent
-          = icon('check', class: 'icon')
+          = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Comment")
             %p
@@ -20,7 +20,7 @@
 
       %li#discussion{ data: { value: 'DiscussionNote', 'submit-text' => _('Start thread'), 'close-text' => _("Start thread & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Start thread & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
         %button.btn.btn-transparent
-          = icon('check', class: 'icon')
+          = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Start thread")
             %p

changelogs/unreleased/225956-replace-fa-check-icons-with-gitlab-svg-check-icon.yml

+---
+title: Replace fa-check icons with GitLab SVG check icon
+merge_request: 43353
+author:
+type: changed

ee/app/assets/stylesheets/pages/projects.scss

@@ -6,10 +6,6 @@
 }
 
 .project-mirror-settings {
-  .fingerprint-verified {
-    color: $green-500;
-  }
-
   .ssh-public-key,
   .btn-copy-ssh-public-key {
     float: left;

spec/features/issues/user_creates_branch_and_merge_request_spec.rb

@@ -250,7 +250,7 @@ RSpec.describe 'User creates branch and merge request on issue page', :js do
 
   def test_selection_mark(li_create_branch, li_create_merge_request, button_create_target, button_create_merge_request)
     page.within(li_create_merge_request) do
-      expect(page).to have_css('i.fa.fa-check')
+      expect(page).to have_selector('[data-testid="check-icon"]')
       expect(button_create_target).to have_text('Create merge request')
       expect(button_create_merge_request).to have_text('Create merge request')
     end
@@ -258,7 +258,7 @@ RSpec.describe 'User creates branch and merge request on issue page', :js do
     li_create_branch.click
 
     page.within(li_create_branch) do
-      expect(page).to have_css('i.fa.fa-check')
+      expect(page).to have_selector('[data-testid="check-icon"]')
       expect(button_create_target).to have_text('Create branch')
       expect(button_create_merge_request).to have_text('Create branch')
     end

spec/support/shared_examples/features/discussion_comments_shared_example.rb

@@ -56,12 +56,12 @@ RSpec.shared_examples 'thread comments' do |resource_name|
 
       expect(items.first).to have_content 'Comment'
       expect(items.first).to have_content "Add a general comment to this #{resource_name}."
-      expect(items.first).to have_selector '.fa-check'
+      expect(items.first).to have_selector '[data-testid="check-icon"]'
       expect(items.first['class']).to match 'droplab-item-selected'
 
       expect(items.last).to have_content 'Start thread'
       expect(items.last).to have_content "Discuss a specific suggestion or question#{' that needs to be resolved' if resource_name == 'merge request'}."
-      expect(items.last).not_to have_selector '.fa-check'
+      expect(items.last).not_to have_selector '[data-testid="check-icon"]'
       expect(items.last['class']).not_to match 'droplab-item-selected'
     end
 
@@ -228,11 +228,11 @@ RSpec.shared_examples 'thread comments' do |resource_name|
           items = all("#{menu_selector} li")
 
           expect(items.first).to have_content 'Comment'
-          expect(items.first).not_to have_selector '.fa-check'
+          expect(items.first).not_to have_selector '[data-testid="check-icon"]'
           expect(items.first['class']).not_to match 'droplab-item-selected'
 
           expect(items.last).to have_content 'Start thread'
-          expect(items.last).to have_selector '.fa-check'
+          expect(items.last).to have_selector '[data-testid="check-icon"]'
           expect(items.last['class']).to match 'droplab-item-selected'
         end
 
@@ -274,11 +274,11 @@ RSpec.shared_examples 'thread comments' do |resource_name|
 
             aggregate_failures do
               expect(items.first).to have_content 'Comment'
-              expect(items.first).to have_selector '.fa-check'
+              expect(items.first).to have_selector '[data-testid="check-icon"]'
               expect(items.first['class']).to match 'droplab-item-selected'
 
               expect(items.last).to have_content 'Start thread'
-              expect(items.last).not_to have_selector '.fa-check'
+              expect(items.last).not_to have_selector '[data-testid="check-icon"]'
               expect(items.last['class']).not_to match 'droplab-item-selected'
             end
           end