Merge branch '225945-replace-fa-clock-icons-with-gitlab-svg-clock-icon' into 'master'

Replace fa-clock icons with GitLab SVG clock icon

See merge request gitlab-org/gitlab!37123

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -319,7 +319,7 @@ export default {
             :href="milestoneLink"
             :title="milestoneTooltipText"
           >
-            <i class="fa fa-clock-o"></i>
+            <gl-icon name="clock" class="s16 gl-vertical-align-text-bottom" />
             {{ issuable.milestone.title }}
           </gl-link>
 

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

@@ -30,7 +30,7 @@
             %span.issuable-milestone.d-none.d-sm-inline-block
                
               = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(issue.milestone) } do
-                = icon('clock-o')
+                = sprite_icon('clock', size: 16, css_class: 'gl-vertical-align-text-bottom')
                 = issue.milestone.title
           - if issue.due_date
             %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }

app/views/projects/merge_requests/_merge_request.html.haml

@@ -25,7 +25,7 @@
           %span.issuable-milestone.d-none.d-sm-inline-block
              
             = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(merge_request.milestone) } do
-              = icon('clock-o')
+              = sprite_icon('clock', size: 16, css_class: 'gl-vertical-align-text-bottom')
               = merge_request.milestone.title
         - if merge_request.target_project.default_branch != merge_request.target_branch
           %span.project-ref-path.has-tooltip{ title: _('Target branch') }

app/views/projects/pipelines/_info.html.haml

@@ -7,8 +7,8 @@
 
 .info-well
   .well-segment.pipeline-info
-    .icon-container
-      = icon('clock-o')
+    .icon-container.gl-vertical-align-text-bottom
+      = sprite_icon('clock', size: 16)
     = pluralize @pipeline.total_size, "job"
     = @pipeline.ref_text
     - if @pipeline.duration

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

@@ -32,7 +32,7 @@
         - milestone = issuable_sidebar[:milestone] || {}
         .block.milestone{ data: { qa_selector: 'milestone_block' } }
           .sidebar-collapsed-icon.has-tooltip{ title: sidebar_milestone_tooltip_label(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
-            = icon('clock-o', 'aria-hidden': 'true')
+            = sprite_icon('clock', size: 16)
             %span.milestone-title.collapse-truncated-title
               - if milestone.present?
                 = milestone[:title]

app/views/users/calendar_activities.html.haml

@@ -6,7 +6,7 @@
     - @events.sort_by(&:created_at).each do |event|
       %li
         %span.light
-          %i.fa.fa-clock-o
+          = sprite_icon('clock', size: 16, css_class: 'gl-vertical-align-text-bottom')
           = event.created_at.to_time.in_time_zone.strftime('%-I:%M%P')
         - if event.visible_to_user?(current_user)
           - if event.push_action?

changelogs/unreleased/225945-replace-fa-clock-icons-with-gitlab-svg-clock-icon.yml

+---
+title: Replace FontAwesome fa-clock icon with SVG icon
+merge_request: 37123
+author:
+type: performance

spec/frontend/issuables_list/components/issuable_spec.js

@@ -76,8 +76,9 @@ describe('Issuable component', () => {
   });
 
   const checkExists = findFn => () => findFn().exists();
-  const hasConfidentialIcon = () =>
-    wrapper.findAll(GlIcon).wrappers.some(iconWrapper => iconWrapper.props('name') === 'eye-slash');
+  const hasIcon = (iconName, iconWrapper = wrapper) =>
+    iconWrapper.findAll(GlIcon).wrappers.some(icon => icon.props('name') === iconName);
+  const hasConfidentialIcon = () => hasIcon('eye-slash');
   const findTaskStatus = () => wrapper.find('.task-status');
   const findOpenedAgoContainer = () => wrapper.find('[data-testid="openedByMessage"]');
   const findAuthor = () => wrapper.find({ ref: 'openedAgoByContainer' });
@@ -288,11 +289,7 @@ describe('Issuable component', () => {
 
     it('renders milestone', () => {
       expect(findMilestone().exists()).toBe(true);
-      expect(
-        findMilestone()
-          .find('.fa-clock-o')
-          .exists(),
-      ).toBe(true);
+      expect(hasIcon('clock', findMilestone())).toBe(true);
       expect(findMilestone().text()).toEqual(TEST_MILESTONE.title);
     });