Replace fa icons in single file diff

app/assets/javascripts/single_file_diff.js

@@ -23,7 +23,8 @@ export default class SingleFileDiff {
     this.file = file;
     this.toggleDiff = this.toggleDiff.bind(this);
     this.content = $('.diff-content', this.file);
-    this.$toggleIcon = $('.diff-toggle-caret', this.file);
+    this.$chevronRightIcon = $('.diff-toggle-caret .chevron-right', this.file);
+    this.$chevronDownIcon = $('.diff-toggle-caret .chevron-down', this.file);
     this.diffForPath = this.content.find('[data-diff-for-path]').data('diffForPath');
     this.isOpen = !this.diffForPath;
     if (this.diffForPath) {
@@ -34,13 +35,13 @@ export default class SingleFileDiff {
         .hide();
       this.content = null;
       this.collapsedContent.after(this.loadingContent);
-      this.$toggleIcon.addClass('fa-caret-right');
+      this.$chevronRightIcon.removeClass('gl-display-none');
     } else {
       this.collapsedContent = $(WRAPPER)
         .html(COLLAPSED_HTML)
         .hide();
       this.content.after(this.collapsedContent);
-      this.$toggleIcon.addClass('fa-caret-down');
+      this.$chevronDownIcon.removeClass('gl-display-none');
     }
 
     $('.js-file-title, .click-to-expand', this.file).on('click', e => {
@@ -52,20 +53,23 @@ export default class SingleFileDiff {
     if (
       !$target.hasClass('js-file-title') &&
       !$target.hasClass('click-to-expand') &&
-      !$target.hasClass('diff-toggle-caret')
+      !$target.closest('.diff-toggle-caret').length > 0
     )
       return;
     this.isOpen = !this.isOpen;
     if (!this.isOpen && !this.hasError) {
       this.content.hide();
-      this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
+      this.$chevronRightIcon.removeClass('gl-display-none');
+      this.$chevronDownIcon.addClass('gl-display-none');
       this.collapsedContent.show();
     } else if (this.content) {
       this.collapsedContent.hide();
       this.content.show();
-      this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
+      this.$chevronDownIcon.removeClass('gl-display-none');
+      this.$chevronRightIcon.addClass('gl-display-none');
     } else {
-      this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
+      this.$chevronDownIcon.removeClass('gl-display-none');
+      this.$chevronRightIcon.addClass('gl-display-none');
       return this.getContentHTML(cb);
     }
   }

app/views/projects/diffs/_file_header.html.haml

 - if local_assigns.fetch(:show_toggle, true)
-  %i.fa.diff-toggle-caret.fa-fw
+  %span.diff-toggle-caret
+    = sprite_icon('chevron-right', css_class: 'chevron-right gl-display-none')
+    = sprite_icon('chevron-down', css_class: 'chevron-down gl-display-none')
 
 - if diff_file.submodule?
   %span

changelogs/unreleased/mw-replace-fa-chevron-in-file-header-diff.yml

+---
+title: Replace fa icons in single file diff
+merge_request: 48136
+author:
+type: changed