Merge branch '223733-follow-up-from-replace-attach-icon-and-address-space' into 'master'

Deprecate .toolbar-button-icon in favor of .gl-spinner

Closes #223733

See merge request gitlab-org/gitlab!35341

app/assets/stylesheets/pages/note_form.scss

@@ -360,14 +360,6 @@ table {
   }
 }
 
-.toolbar-button-icon {
-  position: relative;
-  top: 1px;
-  margin-right: $gl-padding-4;
-  color: inherit;
-  font-size: 16px;
-}
-
 .toolbar-text {
   font-size: 14px;
   line-height: 16px;

app/helpers/icons_helper.rb

@@ -53,6 +53,15 @@ module IconsHelper
     content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{sprite_icon_path}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes.join(' '))
   end
 
+  def loading_icon(container: false, color: 'orange', size: 'sm', css_class: nil)
+    css_classes = ['gl-spinner', "gl-spinner-#{color}", "gl-spinner-#{size}"]
+    css_classes << "#{css_class}" unless css_class.blank?
+
+    spinner = content_tag(:span, "", { class: css_classes.join(' '), aria: { label: _('Loading') } })
+
+    container == true ? content_tag(:div, spinner, { class: 'gl-spinner-container' }) : spinner
+  end
+
   def external_snippet_icon(name)
     content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
   end

app/views/shared/notes/_hints.html.haml

@@ -16,8 +16,7 @@
       %span.attaching-file-message
         -# Populated by app/assets/javascripts/dropzone_input.js
       %span.uploading-progress 0%
-      %span.uploading-spinner
-        .toolbar-button-icon.spinner.align-text-top
+      = loading_icon(css_class: 'align-text-bottom gl-mr-2')
 
     %span.uploading-error-container.hide
       %span.uploading-error-icon

spec/helpers/icons_helper_spec.rb

@@ -235,4 +235,25 @@ RSpec.describe IconsHelper do
         .to eq("<span class=\"gl-snippet-icon gl-snippet-icon-download\"></span>")
     end
   end
+
+  describe 'loading_icon' do
+    it 'returns span with gl-spinner class and default configuration' do
+      expect(loading_icon.to_s)
+        .to eq '<span class="gl-spinner gl-spinner-orange gl-spinner-sm" aria-label="Loading"></span>'
+    end
+
+    context 'when css_class is provided' do
+      it 'appends css_class to gl-spinner element' do
+        expect(loading_icon(css_class: 'gl-mr-2').to_s)
+          .to eq '<span class="gl-spinner gl-spinner-orange gl-spinner-sm gl-mr-2" aria-label="Loading"></span>'
+      end
+    end
+
+    context 'when container is true' do
+      it 'creates a container that has the gl-spinner-container class selector' do
+        expect(loading_icon(container: true).to_s)
+        .to eq '<div class="gl-spinner-container"><span class="gl-spinner gl-spinner-orange gl-spinner-sm" aria-label="Loading"></span></div>'
+      end
+    end
+  end
 end