Replace fa-chevron-down in template selectors

app/assets/javascripts/blob/file_template_selector.js

@@ -12,7 +12,10 @@ export default class FileTemplateSelector {
 
     this.$dropdown = $(cfg.dropdown);
     this.$wrapper = $(cfg.wrapper);
-    this.$loadingIcon = this.$wrapper.find('.fa-chevron-down');
+    this.$dropdownIcon = this.$wrapper.find('.dropdown-menu-toggle-icon');
+    this.$loadingIcon = $(
+      '<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>',
+    ).insertAfter(this.$dropdownIcon);
     this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text');
 
     this.initDropdown();
@@ -45,15 +48,13 @@ export default class FileTemplateSelector {
   }
 
   renderLoading() {
-    this.$loadingIcon
-      .addClass('gl-spinner gl-spinner-orange gl-spinner-sm')
-      .removeClass('fa-chevron-down');
+    this.$loadingIcon.removeClass('gl-display-none');
+    this.$dropdownIcon.addClass('gl-display-none');
   }
 
   renderLoaded() {
-    this.$loadingIcon
-      .addClass('fa-chevron-down')
-      .removeClass('gl-spinner gl-spinner-orange gl-spinner-sm');
+    this.$loadingIcon.addClass('gl-display-none');
+    this.$dropdownIcon.removeClass('gl-display-none');
   }
 
   reportSelection(options) {

app/assets/javascripts/blob/template_selector.js

@@ -10,7 +10,10 @@ export default class TemplateSelector {
     this.dropdown = dropdown;
     this.$dropdownContainer = wrapper;
     this.$filenameInput = $input || $('#file_name');
-    this.$dropdownIcon = $('.fa-chevron-down', dropdown);
+    this.$dropdownIcon = $('.dropdown-menu-toggle-icon', dropdown);
+    this.$loadingIcon = $(
+      '<div class="gl-spinner gl-spinner-orange gl-spinner-sm gl-absolute gl-top-3 gl-right-3 gl-display-none"></div>',
+    ).insertAfter(this.$dropdownIcon);
 
     this.initDropdown(dropdown, data);
     this.listenForFilenameInput();
@@ -92,10 +95,12 @@ export default class TemplateSelector {
   }
 
   startLoadingSpinner() {
-    this.$dropdownIcon.addClass('spinner').removeClass('fa-chevron-down');
+    this.$loadingIcon.removeClass('gl-display-none');
+    this.$dropdownIcon.addClass('gl-display-none');
   }
 
   stopLoadingSpinner() {
-    this.$dropdownIcon.addClass('fa-chevron-down').removeClass('spinner');
+    this.$loadingIcon.addClass('gl-display-none');
+    this.$dropdownIcon.removeClass('gl-display-none');
   }
 }

app/helpers/dropdowns_helper.rb

@@ -51,7 +51,7 @@ module DropdownsHelper
     default_label = data_attr[:default_label]
     content_tag(:button, disabled: options[:disabled], class: "dropdown-menu-toggle #{options[:toggle_class] if options.key?(:toggle_class)}", id: (options[:id] if options.key?(:id)), type: "button", data: data_attr) do
       output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
-      output << icon('chevron-down')
+      output << sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
       output.html_safe
     end
   end

changelogs/unreleased/mw-replace-fa-chevron-down-in-template-selectors.yml

+---
+title: Replace fa-chevron-down in template selector dropdown
+merge_request: 48015
+author:
+type: changed