Replace fa-angle-double icons with GitLab SVG

- This MR replaces the fa-angle-double-left and
fa-angle-double-right icons with GitLab SVGs

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -285,10 +285,9 @@ export default {
           variant="default"
           class="d-sm-none gl-absolute toggle-sidebar-mobile-button"
           type="button"
+          icon="chevron-double-lg-left"
           @click="toggleSidebar"
-        >
-          <i class="fa fa-angle-double-left"></i>
-        </gl-button>
+        />
       </div>
       <div
         v-if="alert"

app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js

@@ -32,11 +32,12 @@ export default () => {
 
         // Sidebar has an icon which corresponds to collapsing the sidebar
         // only then trigger the click.
-        if (sidebarGutterVueToggleEl) {
-          const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right');
-
-          if (collapseIcon) {
-            collapseIcon.click();
+        if (
+          sidebarGutterVueToggleEl &&
+          !sidebarGutterVueToggleEl.classList.contains('js-sidebar-collapsed')
+        ) {
+          if (sidebarGutterVueToggleEl) {
+            sidebarGutterVueToggleEl.click();
           }
         }
       }

app/assets/javascripts/merge_request_tabs.js

@@ -478,13 +478,14 @@ export default class MergeRequestTabs {
   }
 
   shrinkView() {
-    const $gutterIcon = $('.js-sidebar-toggle i:visible');
+    const $gutterBtn = $('.js-sidebar-toggle:visible');
+    const $expandSvg = $gutterBtn.find('.js-sidebar-expand');
 
     // Wait until listeners are set
     setTimeout(() => {
       // Only when sidebar is expanded
-      if ($gutterIcon.is('.fa-angle-double-right')) {
-        $gutterIcon.closest('a').trigger('click', [true]);
+      if ($expandSvg.length && $expandSvg.hasClass('hidden')) {
+        $gutterBtn.trigger('click', [true]);
       }
     }, 0);
   }
@@ -494,13 +495,14 @@ export default class MergeRequestTabs {
     if (parseBoolean(Cookies.get('collapsed_gutter'))) {
       return;
     }
-    const $gutterIcon = $('.js-sidebar-toggle i:visible');
+    const $gutterBtn = $('.js-sidebar-toggle');
+    const $collapseSvg = $gutterBtn.find('.js-sidebar-collapse');
 
     // Wait until listeners are set
     setTimeout(() => {
       // Only when sidebar is collapsed
-      if ($gutterIcon.is('.fa-angle-double-left')) {
-        $gutterIcon.closest('a').trigger('click', [true]);
+      if ($collapseSvg.length && !$collapseSvg.hasClass('hidden')) {
+        $gutterBtn.trigger('click', [true]);
       }
     }, 0);
   }

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { n__, __ } from '~/locale';
 
 export default {
   name: 'AssigneeTitle',
   components: {
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     loading: {
@@ -64,7 +65,7 @@ export default {
       href="#"
       role="button"
     >
-      <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
+      <gl-icon aria-hidden="true" data-hidden="true" name="chevron-double-lg-right" :size="12" />
     </a>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue

 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 
 export default {
   name: 'ReviewerTitle',
   components: {
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     loading: {
@@ -58,7 +59,7 @@ export default {
       href="#"
       role="button"
     >
-      <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
+      <gl-icon aria-hidden="true" data-hidden="true" name="chevron-double-lg-right" :size="12" />
     </a>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

 <script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   name: 'ToggleSidebar',
+  components: {
+    GlButton,
+  },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     collapsed: {
@@ -22,6 +25,12 @@ export default {
     tooltipLabel() {
       return this.collapsed ? __('Expand sidebar') : __('Collapse sidebar');
     },
+    buttonIcon() {
+      return this.collapsed ? 'chevron-double-lg-left' : 'chevron-double-lg-right';
+    },
+    allCssClasses() {
+      return [this.cssClasses, { 'js-sidebar-collapsed': this.collapsed }];
+    },
   },
   methods: {
     toggle() {
@@ -32,25 +41,15 @@ export default {
 </script>
 
 <template>
-  <button
-    v-tooltip
+  <gl-button
+    v-gl-tooltip:body.viewport.left
     :title="tooltipLabel"
-    :class="cssClasses"
-    type="button"
-    class="btn btn-blank gutter-toggle btn-sidebar-action js-sidebar-vue-toggle"
-    data-container="body"
-    data-placement="left"
-    data-boundary="viewport"
+    :class="allCssClasses"
+    class="gutter-toggle btn-sidebar-action js-sidebar-vue-toggle"
+    :icon="buttonIcon"
+    category="tertiary"
+    size="small"
+    :aria-label="__('toggle collapse')"
     @click="toggle"
-  >
-    <i
-      :class="{
-        'fa-angle-double-right': !collapsed,
-        'fa-angle-double-left': collapsed,
-      }"
-      :aria-label="__('toggle collapse')"
-      class="fa"
-    >
-    </i>
-  </button>
+  />
 </template>

app/assets/stylesheets/fontawesome_custom.scss

@@ -109,14 +109,6 @@
   content: '\f110';
 }
 
-.fa-angle-double-right::before {
-  content: '\f101';
-}
-
-.fa-angle-double-left::before {
-  content: '\f100';
-}
-
 .fa-trash-o::before {
   content: '\f014';
 }

changelogs/unreleased/267973-replace-fa-angle-double-left-with-gitlab-svg-chevron-double-lg-lef.yml

+---
+title: Replace fa-angle-double-left and fa-angle-double-right icons with GitLab SVG
+merge_request: 45251
+author:
+type: changed

ee/app/assets/javascripts/epic/components/epic_header.vue

@@ -114,10 +114,9 @@ export default {
       type="button"
       class="float-right gl-display-block d-sm-none gl-align-self-center gutter-toggle issuable-gutter-toggle"
       data-testid="sidebar-toggle"
+      icon="chevron-double-lg-left"
       @click="toggleSidebar({ sidebarCollapsed })"
-    >
-      <i class="fa fa-angle-double-left"></i>
-    </gl-button>
+    />
     <div
       class="detail-page-header-actions gl-display-flex gl-flex-wrap gl-align-items-center gl-w-full gl-sm-w-auto!"
       data-testid="action-buttons"

spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js

@@ -11,15 +11,14 @@ describe('toggleSidebar', () => {
     });
   });
 
-  it('should render << when collapsed', () => {
-    expect(vm.$el.querySelector('.fa').classList.contains('fa-angle-double-left')).toEqual(true);
+  it('should render the "chevron-double-lg-left" icon when collapsed', () => {
+    expect(vm.$el.querySelector('[data-testid="chevron-double-lg-left-icon"]')).not.toBeNull();
   });
 
-  it('should render >> when collapsed', () => {
+  it('should render the "chevron-double-lg-right" icon when expanded', async () => {
     vm.collapsed = false;
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.fa').classList.contains('fa-angle-double-right')).toEqual(true);
-    });
+    await Vue.nextTick();
+    expect(vm.$el.querySelector('[data-testid="chevron-double-lg-right-icon"]')).not.toBeNull();
   });
 
   it('should emit toggle event when button clicked', () => {