Replace admin and group runners clear button FA icon with GlIcon close

This covers both the admin runners search and the group runners search

app/assets/javascripts/related_issues/components/issue_token.vue

@@ -109,7 +109,7 @@ export default {
       class="js-issue-token-remove-button"
       @click="onRemoveRequest"
     >
-      <i class="fa fa-times" aria-hidden="true"></i>
+      <gl-icon name="close" aria-hidden="true" />
     </button>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -2,6 +2,7 @@
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import Mousetrap from 'mousetrap';
 import VirtualList from 'vue-virtual-scroll-list';
+import { GlIcon } from '@gitlab/ui';
 import Item from './item.vue';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
@@ -13,6 +14,7 @@ const originalStopCallback = Mousetrap.prototype.stopCallback;
 export default {
   components: {
+    GlIcon,
     Item,
     VirtualList,
   },
@@ -235,12 +237,13 @@ export default {
           aria-hidden="true"
           class="fa fa-search dropdown-input-search"
         ></i>
-        <i
-          :aria-label="__('Clear search input')"
+        <gl-icon
+          name="close"
+          class="dropdown-input-clear"
           role="button"
-          class="fa fa-times dropdown-input-clear"
+          :aria-label="__('Clear search input')"
           @click="clearSearchInput"
-        ></i>
+        />
       </div>
       <div>
         <virtual-list ref="virtualScrollList" :size="listHeight" :remain="listShowCount" wtag="ul">

app/assets/stylesheets/framework/filters.scss

@@ -243,7 +243,7 @@
     }
   }
-  .fa-times {
+  .clear-search-icon {
     right: 10px;
     color: $gray-darkest;
   }
@@ -255,7 +255,7 @@
     outline: none;
     z-index: 1;
-    &:hover .fa-times {
+    &:hover .clear-search-icon {
       color: $common-gray-dark;
     }
   }

app/assets/stylesheets/framework/variables.scss

@@ -618,7 +618,6 @@ $award-emoji-width-xs: 90%;
 $search-input-border-color: rgba($blue-400, 0.8);
 $search-input-width: 200px;
 $search-input-xl-width: 320px;
-$location-icon-color: #e7e9ed;
 /*
  *  Notes

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -84,7 +84,8 @@
     color: var(--ide-input-border, $gl-text-color-tertiary);
   }
-  .dropdown-input .fa {
+  .dropdown-input .fa,
+  .dropdown-input .dropdown-input-clear {
     color: var(--ide-input-border, $dropdown-input-fa-color);
   }

app/assets/stylesheets/pages/projects.scss

@@ -1268,18 +1268,10 @@ pre.light-well {
   position: relative;
   .clear-icon {
-    @extend .fa-times;
     display: none;
     position: absolute;
-    right: 7px;
-    top: 7px;
-    color: $location-icon-color;
-
-    &::before {
-      font-family: FontAwesome;
-      font-weight: $gl-font-weight-normal;
-      font-style: normal;
-    }
+    right: 9px;
+    top: 9px;
   }
   &.has-value {

app/views/admin/runners/index.html.haml

@@ -108,7 +108,7 @@
                     {{name}}
           = button_tag class: %w[clear-search hidden] do
-            = icon('times')
+            = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
         .filter-dropdown-container
           = render 'sort_dropdown'

app/views/admin/users/projects.html.haml

@@ -16,8 +16,8 @@
           .float-right
             %span.light.vertical-align-middle= group_member.human_access
             - unless group_member.owner?
-              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-sm btn btn-remove gl-ml-3", title: 'Remove user from group' do
-                %i.fa.fa-times.fa-inverse
+              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), testid: 'remove-user' }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
+                = sprite_icon('close', size: 16, css_class: 'gl-icon')
 .row
   .col-md-6
@@ -46,5 +46,5 @@
                   %span.light.vertical-align-middle= member.human_access
                   - if member.respond_to? :project
-                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-sm btn btn-remove gl-ml-3", title: 'Remove user from project' do
-                      %i.fa.fa-times
+                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: 'Remove user from project' do
+                      = sprite_icon('close', size: 16, css_class: 'gl-icon')

app/views/admin/users/show.html.haml

@@ -38,8 +38,8 @@
             %span.light Secondary email:
             %strong
               = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
-            = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-sm btn btn-remove float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
-              %i.fa.fa-times
+            = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
+              = sprite_icon('close', size: 16, css_class: 'gl-icon')
         %li
           %span.light ID:
           %strong

app/views/groups/runners/_index.html.haml

@@ -73,7 +73,7 @@
                     {{name}}
           = button_tag class: 'clear-search hidden' do
-            = icon('times')
+            = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
         .filter-dropdown-container
           = render 'admin/runners/sort_dropdown'

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

@@ -165,7 +165,7 @@
               = render_if_exists 'shared/issuable/filter_epic', type: type
             %button.clear-search.hidden{ type: 'button' }
-              = icon('times')
+              = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
     .filter-dropdown-container.d-flex.flex-column.flex-md-row
       - if type == :boards
         #js-board-labels-toggle

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

@@ -38,7 +38,7 @@
                     data: { id: role_id, el_id: dom_id }
       .clearable-input.member-form-control.d-sm-inline-block
         = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: _('Expiration date'), id: "member_expires_at_#{group.id}", disabled: !can_admin_member
-        %i.clear-icon.js-clear-input
+        = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
     - if can_admin_member
       = link_to group_link_path,
         method: :delete,

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

@@ -22,5 +22,5 @@
         = label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
         .clearable-input
           = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: _('Expiration date'), id: 'expires_at_groups'
-          %i.clear-icon.js-clear-input
+          = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
       = submit_tag _("Invite"), class: "btn btn-success", data: { qa_selector: 'invite_group_button' }

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

@@ -19,10 +19,10 @@
           - link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
           = _("%{link_start}Read more%{link_end} about role permissions").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
       .form-group
+        = label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
         .clearable-input
-          = label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
           = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
-          %i.clear-icon.js-clear-input
+          = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
       = submit_tag _("Invite"), class: "btn btn-success", data: { qa_selector: 'invite_member_button' }
       - if can_import_members
         = link_to _("Import"), import_path, class: "btn btn-default", title: _("Import members from another project")

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

@@ -97,7 +97,7 @@
                 placeholder: _('Expiration date'),
                 id: "member_expires_at_#{member.id}",
                 data: { el_id: dom_id(member) }
-              %i.clear-icon.js-clear-input
+              = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
         - else
           %span.member-access-text.user-access-role= member.human_access

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

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

ee/app/assets/javascripts/boards/components/boards_list_selector/list_filter.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlIcon,
+  },
   data() {
     return {
       query: '',
@@ -27,12 +32,11 @@ export default {
       @keyup="handleInputChange"
     />
     <i class="fa fa-search dropdown-input-search" aria-hidden="true" data-hidden="true"></i>
-    <i
-      role="button"
-      class="fa fa-times dropdown-input-clear"
+    <gl-icon
+      name="close"
+      class="dropdown-input-clear"
       aria-hidden="true"
-      data-hidden="true"
       @click="handleInputClear"
-    ></i>
+    />
   </div>
 </template>

ee/app/views/shared/epic/_search_bar.html.haml

@@ -81,7 +81,7 @@
                       {{ title }}
           %button.clear-search.hidden{ type: 'button' }
-            = icon('times')
+            = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
         - unless hide_sort_dropdown
           .filter-dropdown-container
             = render 'shared/epic/sort_dropdown', hide_extra_sort_options: hide_extra_sort_options

ee/app/views/shared/members/ee/_override_member_buttons.html.haml

@@ -24,7 +24,7 @@
           data: { el_id: dom_id(member), endpoint: override_group_group_member_path(group, member) } }
           .spinner.mr-1
           Change permissions
-        %button.btn.btn-default.js-ldap-permissions{ type: 'button',
+        %button.btn.btn-default.btn-icon.gl-button.js-ldap-permissions{ type: 'button',
           'aria-label' => 'Close permissions override',
           data: { el_id: dom_id(member) } }
-          = icon('times')
+          = sprite_icon('close', size: 16, css_class: 'gl-icon gl-text-black-normal!')

ee/spec/frontend/boards/components/board_list_selector/list_filter_spec.js

@@ -36,7 +36,7 @@ describe('ListFilter', () => {
     it('clears input field and emits `onSearchInput` event with empty value', () => {
       expect(input.element.value).toBe('foobar');
-      wrapper.find('.dropdown-input-clear').trigger('click');
+      wrapper.find('.dropdown-input-clear').vm.$emit('click');
       return Vue.nextTick().then(() => {
         expect(input.element.value).toBe('');
@@ -75,7 +75,7 @@ describe('ListFilter', () => {
     it('renders search input icons', () => {
       expect(wrapper.find('i.fa.fa-search.dropdown-input-search').exists()).toBe(true);
-      expect(wrapper.find('i.fa.fa-times.dropdown-input-clear').exists()).toBe(true);
+      expect(wrapper.find('.dropdown-input-clear').exists()).toBe(true);
     });
   });
 });