Merge branch '224534-replace-fa-times-with-gitlab-svg-close-icon-for-promotions' into 'master'

Replace fa-times with GitLab SVG close icon - Promotions

See merge request gitlab-org/gitlab!40586

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

@@ -2,6 +2,7 @@
 /* eslint-disable vue/no-v-html */
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import { GlIcon } from '@gitlab/ui';
 import Translate from '../../../../../vue_shared/translate';
 // Full path is needed for Jest to be able to correctly mock this file
 import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
@@ -13,6 +14,9 @@ const cookieKey = 'pipeline_schedules_callout_dismissed';
 
 export default {
   name: 'PipelineSchedulesCallout',
+  components: {
+    GlIcon,
+  },
   data() {
     return {
       docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
@@ -34,7 +38,7 @@ export default {
   <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
     <div class="bordered-box landing content-block">
       <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout">
-        <i aria-hidden="true" class="fa fa-times"> </i>
+        <gl-icon name="close" aria-hidden="true" />
       </button>
       <div class="svg-container" v-html="illustrationSvg"></div>
       <div class="user-callout-copy">

app/views/admin/dev_ops_report/_callout.html.haml

@@ -3,7 +3,7 @@
   .bordered-box.landing.content-block
     %button.btn.btn-default.close.js-close-callout{ type: 'button',
       'aria-label' => _('Dismiss DevOps Report introduction') }
-      = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+      = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
     .user-callout-copy
       %h4
         = _('Introducing Your DevOps Report')

app/views/shared/_auto_devops_callout.html.haml

@@ -12,4 +12,4 @@
 
   %button.gl-banner-close.close.js-close-callout{ type: 'button',
   'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box') }
-    = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+    = sprite_icon('close', size: 16, css_class: 'dismiss-icon')

app/views/shared/_broadcast_message.html.haml

@@ -2,11 +2,11 @@
 
 %div{ class: "broadcast-message #{'alert-warning' if is_banner} broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'} js-broadcast-notification-#{message.id} gl-display-flex",
   style: broadcast_message_style(message), dir: 'auto' }
-  .flex-grow-1.text-right.pr-2
+  .gl-flex-grow-1.gl-text-right.gl-pr-3
     = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
   %div{ class: !fluid_layout && 'container-limited' }
     = render_broadcast_message(message)
-  .flex-grow-1.text-right{ style: 'flex-basis: 0' }
+  .gl-flex-grow-1.gl-flex-basis-0.gl-text-right
     - if (message.notification? || message.dismissable?) && opts[:preview].blank?
-      %button.broadcast-message-dismiss.js-dismiss-current-broadcast-notification.btn.btn-link.pl-2.pr-2{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
-        %i.fa.fa-times
+      %button.broadcast-message-dismiss.js-dismiss-current-broadcast-notification.btn.btn-link.gl-button{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
+        = sprite_icon('close', size: 16, css_class: 'gl-icon gl-text-white gl-mx-3!')

app/views/shared/promotions/_promote_servicedesk.html.haml

 .user-callout.promotion-callout.js-service-desk-callout#promote_service_desk{ data: { uid: 'promote_service_desk_dismissed' } }
   .bordered-box.content-block
     %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
-      = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+      = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
     .svg-container
       = custom_icon('icon_service_desk')
     .user-callout-copy

changelogs/unreleased/224534-replace-fa-times-with-gitlab-svg-close-icon-for-promotions.yml

+---
+title: Replace fa-times with GitLab SVG close icon in promotions
+merge_request: 40586
+author:
+type: performance

ee/app/views/shared/milestones/_burndown.html.haml

@@ -14,7 +14,7 @@
 
 - elsif show_burndown_placeholder?(milestone, warning)
   .burndown-hint.content-block.container-fluid
-    = icon("times", class: "dismiss-icon")
+    = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
     .row
       .col-sm-4.col-12.svg-container
         = custom_icon('icon_burndown_chart_splash')

ee/app/views/shared/promotions/_promote_advanced_search.html.haml

@@ -2,7 +2,7 @@
   .user-callout.promotion-callout.promotion-advanced-search.js-mr-approval-callout#promote_advanced_search{ data: { uid: 'promote_advanced_search_dismissed' } }
     .bordered-box.content-block
       %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss Merge Request promotion') }
-        = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
       .svg-container
         = custom_icon('icon_search_avatar')
       .user-callout-copy

ee/app/views/shared/promotions/_promote_burndown_charts.html.haml

@@ -4,7 +4,7 @@
   .user-callout.promotion-callout#promote_burndown_charts{ data: { uid: callout_id } }
     .bordered-box.content-block.promotion-burndown-charts-content
       %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => s_('Promotions|Dismiss burndown charts promotion') }
-        = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
       .svg-container
         = custom_icon('icon_burndown_charts')
       .user-callout-copy

ee/app/views/shared/promotions/_promote_epics.html.haml

@@ -20,9 +20,9 @@
           %p
             = s_('Promotions|Epics let you manage your portfolio of projects more efficiently and with less effort by tracking groups of issues that share a theme, across projects and milestones.')
             = link_to s_('Read more'), 'https://docs.gitlab.com/ee/user/group/epics/', class: 'btn-link', target: '_blank'
-          %div
+          .gl-display-flex.gl-flex-wrap
             = render 'shared/promotions/promotion_link_project', short_form: true
-            = link_to s_("Promotions|Don't show me this again"), '#', class: ['btn', 'js-close', 'js-close-callout']
+            = link_to s_("Promotions|Don't show me this again"), '#', class: 'btn js-close js-close-callout gl-mt-2'
 
     .hide-collapsed
       = s_('Promotions|This feature is locked.')

ee/app/views/shared/promotions/_promote_mr_features.html.haml

@@ -2,7 +2,7 @@
   .user-callout.promotion-callout.append-bottom-20.js-mr-approval-callout#promote_mr_features{ data: { uid: 'promote_mr_features_dismissed' } }
     .bordered-box.content-block
       %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => _('Dismiss Merge Request promotion') }
-        = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
       .user-callout-copy
         %h4
           - if Gitlab::CurrentSettings.should_check_namespace_plan?

ee/app/views/shared/promotions/_promote_repository_features.html.haml

@@ -2,7 +2,7 @@
   .user-callout.promotion-callout{ id: 'promote_repository_features', data: { uid: 'promote_repository_features_dismissed' } }
     .bordered-box.content-block
       %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss repository features promotion' }
-        = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+        = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
       .svg-container
         = custom_icon('icon_push_rules')
       .user-callout-copy