Merge branch '224510-replace-fa-chevron-up-with-gitlab-svg-chevron-up-icon' into 'master'

Replace fa-chevron-up with GitLab SVG icon

See merge request gitlab-org/gitlab!46118

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -12,11 +12,19 @@ import { getLocationHash } from '../lib/utils/url_utility';
 $(() => {
   function toggleContainer(container, toggleState) {
     const $container = $(container);
-
-    $container
-      .find('.js-toggle-button .fa-chevron-up, .js-toggle-button .fa-chevron-down')
-      .toggleClass('fa-chevron-up', toggleState)
-      .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+    const isExpanded = $container.data('is-expanded');
+    const $collapseIcon = $container.find('.js-sidebar-collapse');
+    const $expandIcon = $container.find('.js-sidebar-expand');
+
+    if (isExpanded && !toggleState) {
+      $container.data('is-expanded', false);
+      $collapseIcon.addClass('hidden');
+      $expandIcon.removeClass('hidden');
+    } else {
+      $container.data('is-expanded', true);
+      $expandIcon.addClass('hidden');
+      $collapseIcon.removeClass('hidden');
+    }
 
     $container.find('.js-toggle-content').toggle(toggleState);
   }

app/assets/javascripts/notes/components/note_header.vue

@@ -65,8 +65,8 @@ export default {
     };
   },
   computed: {
-    toggleChevronClass() {
-      return this.expanded ? 'fa-chevron-up' : 'fa-chevron-down';
+    toggleChevronIconName() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
     },
     noteTimestampLink() {
       return this.noteId ? `#note_${this.noteId}` : undefined;
@@ -133,7 +133,7 @@ export default {
         type="button"
         @click="handleToggle"
       >
-        <i ref="chevronIcon" :class="toggleChevronClass" class="fa" aria-hidden="true"></i>
+        <gl-icon ref="chevronIcon" :name="toggleChevronIconName" aria-hidden="true" />
         {{ __('Toggle thread') }}
       </button>
     </div>

app/assets/stylesheets/fontawesome_custom.scss

@@ -109,10 +109,6 @@
   content: '\f0da';
 }
 
-.fa-chevron-up::before {
-  content: '\f077';
-}
-
 .fa-exclamation-circle::before {
   content: '\f06a';
 }

app/views/discussions/_discussion.html.haml

@@ -2,17 +2,15 @@
 %li.note.note-discussion.timeline-entry.unstyled-comments
   .timeline-entry-inner
     .timeline-content
-      .discussion.js-toggle-container{ data: { discussion_id: discussion.id } }
+      .discussion.js-toggle-container{ data: { discussion_id: discussion.id, is_expanded: expanded.to_s } }
         .discussion-header
           .timeline-icon
             = link_to user_path(discussion.author) do
               = image_tag avatar_icon_for_user(discussion.author), class: "avatar s40"
           .discussion-actions
             %button.note-action-button.discussion-toggle-button.js-toggle-button{ type: "button", class: ("js-toggle-lazy-diff" unless expanded) }
-              - if expanded
-                = icon("chevron-up")
-              - else
-                = icon("chevron-down")
+              = sprite_icon('chevron-up', css_class: "js-sidebar-collapse #{'hidden' unless expanded}")
+              = sprite_icon('chevron-down', css_class: "js-sidebar-expand #{'hidden' if expanded}")
               = _('Toggle thread')
           = link_to_member(@project, discussion.author, avatar: false)
 

changelogs/unreleased/224510-replace-fa-chevron-up-with-gitlab-svg-chevron-up-icon.yml

+---
+title: Replace fa-chevron-up with GitLab SVG icon
+merge_request: 46118
+author:
+type: changed

ee/app/views/admin/licenses/_upload_trial_license.html.haml

@@ -17,10 +17,10 @@
             = f.hidden_field :data, value: license_key
             %a#hide-license.hide-license{ href: '#hide-license' }
               Show license key
-              = icon('chevron-down')
+              = sprite_icon('chevron-down')
             %a#show-license.show-license{ href: '#show-license' }
               Hide license key
-              = icon('chevron-up')
+              = sprite_icon('chevron-up')
             .card.trial-license-preview.gl-mt-5
               = license_key
             .modal-footer.form-actions

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

@@ -15,7 +15,8 @@
       = s_('Promotions|This feature is locked.')
       %a.btn-link.js-toggle-button.js-weight-sidebar-callout{ href: '#', data: { track_event: 'click_callout' }.merge(tracking_options) }
         = s_('Promotions|Learn more')
-        = icon('chevron-down')
+        = sprite_icon('chevron-up', css_class: 'js-sidebar-collapse hidden')
+        = sprite_icon('chevron-down', css_class: 'js-sidebar-expand')
       .js-toggle-content{ style:'display: none' }
         %div
           %h4

spec/frontend/notes/components/note_header_spec.js

@@ -78,7 +78,7 @@ describe('NoteHeader component', () => {
         expanded: true,
       });
 
-      expect(findChevronIcon().classes()).toContain('fa-chevron-up');
+      expect(findChevronIcon().props('name')).toBe('chevron-up');
     });
 
     it('has chevron-down icon if expanded prop is false', () => {
@@ -87,7 +87,7 @@ describe('NoteHeader component', () => {
         expanded: false,
       });
 
-      expect(findChevronIcon().classes()).toContain('fa-chevron-down');
+      expect(findChevronIcon().props('name')).toBe('chevron-down');
     });
   });