Merge branch '225946-replace-fa-close-with-gitlab-svg' into 'master'

Replace fa-close with GitLab close icon

Closes #225946

See merge request gitlab-org/gitlab!39267

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

 import VisualTokenValue from './visual_token_value';
-import { objectToQueryString } from '~/lib/utils/common_utils';
+import { objectToQueryString, spriteIcon } from '~/lib/utils/common_utils';
 import FilteredSearchContainer from './container';
 
 export default class FilteredSearchVisualTokens {
@@ -84,7 +84,7 @@ export default class FilteredSearchVisualTokens {
         <div class="value-container">
           <div class="${capitalizeTokenValue ? 'text-capitalize' : ''} value"></div>
           <div class="remove-token" role="button">
-            <i class="fa fa-close"></i>
+            ${spriteIcon('close', 's16 close-icon')}
           </div>
         </div>
       </div>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
@@ -11,6 +12,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'IssuableTimeTracker',
   components: {
+    GlIcon,
     TimeTrackingCollapsedState,
     TimeTrackingEstimateOnlyPane,
     TimeTrackingSpentOnlyPane,
@@ -111,7 +113,7 @@ export default {
         class="close-help-button float-right"
         @click="toggleHelpState(false)"
       >
-        <i class="fa fa-close" aria-hidden="true"> </i>
+        <gl-icon name="close" />
       </div>
     </div>
     <div class="time-tracking-content hide-collapsed">

app/assets/stylesheets/fontawesome_custom.scss

@@ -93,7 +93,6 @@
 }
 
 .fa-remove::before,
-.fa-close::before,
 .fa-times::before {
   content: '\f00d';
 }

app/assets/stylesheets/framework/filters.scss

@@ -134,20 +134,20 @@
     padding-left: 8px;
     padding-right: 0;
 
-    .fa-close {
+    .close-icon {
       color: $gl-text-color-secondary;
     }
 
-    &:hover .fa-close {
+    &:hover .close-icon {
       color: $gl-text-color;
     }
 
     &.inverted {
-      .fa-close {
+      .close-icon {
         color: $gl-text-color-secondary-inverted;
       }
 
-      &:hover .fa-close {
+      &:hover .close-icon {
         color: $gl-text-color-inverted;
       }
     }

changelogs/unreleased/225946-replace-fa-close-with-gitlab-svg.yml

+---
+title: Replace fa-close icons with GitLab SVG close icon
+merge_request: 39267
+author:
+type: changed

spec/features/issues/filtered_search/visual_tokens_spec.rb

@@ -53,7 +53,7 @@ RSpec.describe 'Visual tokens', :js do
     end
 
     it 'ends editing mode when document is clicked' do
-      find('#content-body').click
+      find('.js-navbar').click
 
       expect_filtered_search_input_empty
       expect(page).to have_css('#js-dropdown-author', visible: false)
@@ -142,7 +142,7 @@ RSpec.describe 'Visual tokens', :js do
     it 'does not tokenize incomplete token' do
       filtered_search.send_keys('author:=')
 
-      find('body').click
+      find('.js-navbar').click
       token = page.all('.tokens-container .js-visual-token')[1]
 
       expect_filtered_search_input_empty

spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js

@@ -280,8 +280,8 @@ describe('Filtered Search Visual Tokens', () => {
         );
       });
 
-      it('contains fa-close icon', () => {
-        expect(tokenElement.querySelector('.remove-token .fa-close')).toEqual(expect.anything());
+      it('contains close icon', () => {
+        expect(tokenElement.querySelector('.remove-token .close-icon')).toEqual(expect.anything());
       });
     });
   });

spec/frontend/helpers/filtered_search_spec_helper.js

@@ -15,7 +15,7 @@ export default class FilteredSearchSpecHelper {
         <div class="value-container">
           <div class="value">${value}</div>
           <div class="remove-token" role="button">
-            <i class="fa fa-close"></i>
+            <svg class="s16 close-icon"></svg>
           </div>
         </div>
       </div>