Merge branch '352510-update-loading-icon-helper' into 'master'

Make loading_icon helper conform to GlLoadingIcon

See merge request gitlab-org/gitlab!81899

app/helpers/dropdowns_helper.rb

@@ -129,7 +129,7 @@ module DropdownsHelper
   end
 
   def dropdown_loading
-    spinner = loading_icon(container: true, size: "md", css_class: "gl-mt-7")
+    spinner = gl_loading_icon(size: "md", css_class: "gl-mt-7")
     content_tag(:div, spinner, class: "dropdown-loading")
   end
 end

app/helpers/icons_helper.rb

@@ -49,13 +49,39 @@ module IconsHelper
     end
   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
+  # Creates a GitLab UI loading icon/spinner.
+  #
+  # Examples:
+  #   # Default
+  #   gl_loading_icon
+  #
+  #   # Sizes
+  #   gl_loading_icon(size: 'md')
+  #   gl_loading_icon(size: 'lg')
+  #   gl_loading_icon(size: 'xl')
+  #
+  #   # Colors
+  #   gl_loading_icon(color: 'light')
+  #
+  #   # Block/Inline
+  #   gl_loading_icon(inline: true)
+  #
+  #   # Custom classes
+  #   gl_loading_icon(css_class: "foo-bar")
+  #
+  # See also https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-loading-icon--default
+  def gl_loading_icon(inline: false, color: 'dark', size: 'sm', css_class: nil)
+    spinner = content_tag(:span, "", {
+      class: %[gl-spinner gl-spinner-#{color} gl-spinner-#{size} gl-vertical-align-text-bottom!],
+      aria: { label: _('Loading') }
+    })
+
+    container_classes = ['gl-spinner-container']
+    container_classes << css_class unless css_class.blank?
+    content_tag(inline ? :span : :div, spinner, {
+      class: container_classes,
+      role: 'status'
+    })
   end
 
   def external_snippet_icon(name)

app/views/projects/_files.html.haml

@@ -12,8 +12,7 @@
 
   .info-well.gl-display-none.gl-sm-display-flex.project-last-commit.gl-flex-direction-column
     #js-last-commit.gl-m-auto
-      .gl-spinner-container.m-auto
-        = loading_icon(size: 'md', color: 'dark', css_class: 'align-text-bottom')
+      = gl_loading_icon(size: 'md')
     #js-code-owners
 
   - if is_project_overview

app/views/projects/blob/_blob.html.haml

@@ -21,8 +21,7 @@
                               project_path: @project.full_path,
                               target_branch: project.empty_repo? ? ref : @ref,
                               original_branch: @ref } }
-      .gl-spinner-container
-        = loading_icon(size: 'md')
+      = gl_loading_icon(size: 'md')
   - else
     %article.file-holder
       = render 'projects/blob/header', blob: blob

app/views/projects/blob/viewers/_gitlab_ci_yml_loading.html.haml

-= loading_icon(css_class: "gl-vertical-align-text-bottom mr-1")
+= gl_loading_icon(inline: true, css_class: "gl-mr-2!")
 = s_('Pipelines|Validating GitLab CI configuration…')
 
 = link_to _('Learn more'), help_page_path('ci/yaml/index')

app/views/projects/blob/viewers/_loading.html.haml

-.text-center.gl-mt-4.gl-mb-3
-  = loading_icon(size: "md", css_class: "qa-spinner")
+= gl_loading_icon(size: "md", css_class: "qa-spinner gl-my-4")

app/views/projects/blob/viewers/_loading_auxiliary.html.haml

-= loading_icon(css_class: "gl-vertical-align-text-bottom")
+= gl_loading_icon(inline: true)
 = _("Analyzing file…")

app/views/projects/blob/viewers/_metrics_dashboard_yml_loading.html.haml

-= loading_icon(css_class: "gl-vertical-align-text-bottom mr-1")
+= gl_loading_icon(inline: true, css_class: "mr-1")
 = _('Metrics Dashboard YAML definition') + '…'
 
 = link_to _('Learn more'), help_page_path('operations/metrics/dashboards/yaml.md')

app/views/projects/blob/viewers/_route_map_loading.html.haml

-= loading_icon(css_class: "gl-vertical-align-text-bottom gl-mr-1")
+= gl_loading_icon(inline: true, css_class: "gl-mr-1")
 Validating Route Map…
 
 = link_to 'Learn more', help_page_path('ci/environments/index.md', anchor: 'go-from-source-files-to-public-pages')

app/views/projects/blob/viewers/_sketch.html.haml

 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
-  .text-center.gl-mt-4.gl-mb-3.js-loading-icon
-    = loading_icon(size: "md")
+  = gl_loading_icon(size: "md", css_class: "gl-my-4 js-loading-icon")

app/views/projects/blob/viewers/_stl.html.haml

 .file-content.is-stl-loading
   .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
-    = loading_icon(size: "md", css_class: "gl-mt-4 gl-mb-3")
+    = gl_loading_icon(size: "md", css_class: "gl-my-4")
   .text-center.gl-mt-3.gl-mb-3.stl-controls
     .btn-group
       %button.gl-button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }

app/views/projects/commits/show.html.haml

@@ -34,5 +34,4 @@
   %div{ id: dom_id(@project) }
     %ol#commits-list.list-unstyled.content_list
       = render 'commits', project: @project, ref: @ref
-  .loading.hide
-    = loading_icon(size: "lg")
+  = gl_loading_icon(size: 'lg', css_class: 'loading hide')

app/views/projects/find_file/show.html.haml

@@ -23,5 +23,4 @@
               = _('There are no matching files')
             %p.text-secondary
               = _('Try using a different search term to find the file you are looking for.')
-      .text-center.gl-mt-3.loading
-        = loading_icon(size: 'md')
+      = gl_loading_icon(size: 'md', css_class: 'gl-mt-3 loading')

app/views/projects/imports/show.html.haml

@@ -4,7 +4,7 @@
 .save-project-loader
   .center
     %h2
-      = loading_icon
+      = gl_loading_icon(inline: true)
       = import_in_progress_title
     - if !has_ci_cd_only_params? && @project.external_import?
       %p.monospace git clone --bare #{@project.safe_import_url}

app/views/projects/services/prometheus/_custom_metrics.html.haml

@@ -18,7 +18,7 @@
           .flash-text
       .loading-metrics.js-loading-custom-metrics
         %p.m-3
-          = loading_icon(css_class: 'metrics-load-spinner')
+          = gl_loading_icon(inline: true, css_class: 'metrics-load-spinner')
           = s_('PrometheusService|Finding custom metrics...')
       .empty-metrics.hidden.js-empty-custom-metrics
         %p.text-tertiary.m-3.js-no-active-integration-text.hidden

app/views/projects/services/prometheus/_metrics.html.haml

@@ -16,7 +16,7 @@
     .card-body
       .loading-metrics.js-loading-metrics
         %p.m-3
-          = loading_icon(css_class: 'metrics-load-spinner')
+          = gl_loading_icon(inline: true, css_class: 'metrics-load-spinner')
           = s_('PrometheusService|Finding and configuring metrics...')
       .empty-metrics.hidden.js-empty-metrics
         %p.text-tertiary.m-3

app/views/shared/_new_project_item_select.html.haml

 - if any_projects?(@projects)
   .project-item-select-holder.btn-group.gl-ml-auto.gl-mr-auto.gl-relative.gl-overflow-hidden{ class: 'gl-display-flex!' }
     %a.btn.gl-button.btn-confirm.js-new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] }, class: "gl-m-0!" }
-      = loading_icon(color: 'light')
+      = gl_loading_icon(inline: true, color: 'light')
     = project_select_tag :project_path, class: "project-item-select gl-absolute! gl-visibility-hidden", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at', relative_path: local_assigns[:path], with_shared: local_assigns[:with_shared], include_projects_in_subgroups: local_assigns[:include_projects_in_subgroups] }, with_feature_enabled: local_assigns[:with_feature_enabled]
     %button.btn.dropdown-toggle.btn-confirm.btn-md.gl-button.gl-dropdown-toggle.dropdown-toggle-split.new-project-item-select-button.qa-new-project-item-select-button.gl-p-0.gl-w-100{ class: "gl-m-0!", 'aria-label': _('Toggle project select') }
       = sprite_icon('chevron-down')

app/views/shared/issuable/_sidebar.html.haml

@@ -50,7 +50,7 @@
           // Fallback while content is loading
           .title.hide-collapsed
             = _('Time tracking')
-            = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+            = gl_loading_icon(inline: true)
       - if issuable_sidebar.has_key?(:due_date)
         #js-due-date-entry-point
 
@@ -109,8 +109,8 @@
               = dropdown_loading
               = dropdown_footer add_content_class: true do
                 %button.gl-button.btn.btn-confirm.sidebar-move-issue-confirmation-button.js-move-issue-confirmation-button{ type: 'button', disabled: true }
+                  = gl_loading_icon(inline: true, css_class: 'sidebar-move-issue-confirmation-loading-icon gl-mr-2')
                   = _('Move')
-                  = loading_icon(css_class: 'gl-vertical-align-text-bottom sidebar-move-issue-confirmation-loading-icon')
 
     -# haml-lint:disable InlineJavaScript
     %script.js-sidebar-options{ type: "application/json" }= issuable_sidebar_options(issuable_sidebar).to_json.html_safe

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -7,7 +7,7 @@
   directly_invite_members: can_admin_project_member?(@project) } }
   .title.hide-collapsed
     = _('Assignee')
-    = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+    = gl_loading_icon(inline: true)
 
 .js-sidebar-assignee-data.selectbox.hide-collapsed
   - if assignees.none?

app/views/shared/issuable/_sidebar_reviewers.html.haml

@@ -3,7 +3,7 @@
 #js-vue-sidebar-reviewers{ data: { field: issuable_type, signed_in: signed_in } }
   .title.hide-collapsed
     = _('Reviewer')
-    = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+    = gl_loading_icon(inline: true)
 
 .selectbox.hide-collapsed
   - if reviewers.none?

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

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

doc/development/fe_guide/icons.md

@@ -88,50 +88,36 @@ Please use the following function inside JS to render an icon:
 
 ### Usage in HAML/Rails
 
-To insert a loading spinner in HAML or Rails use the `loading_icon` helper:
+To insert a loading spinner in HAML or Rails use the `gl_loading_icon` helper:
 
 ```haml
-= loading_icon
+= gl_loading_icon
 ```
 
-You can include one or more of the following properties with the `loading_icon` helper, as demonstrated
+You can include one or more of the following properties with the `gl_loading_icon` helper, as demonstrated
 by the examples that follow:
 
-- `container` (optional): wraps the loading icon in a container, which centers the loading icon using the `text-center` CSS property.
-- `color` (optional): either `orange` (default), `light`, or `dark`.
+- `inline` (optional): uses in an inline element if `true`, otherwise, a block element (default), with the spinner centered.
+- `color` (optional): either `dark` (default) or `light`.
 - `size` (optional): either `sm` (default), `md`, `lg`, or `xl`.
-- `css_class` (optional): defaults to an empty string, but can be used for utility classes to fine-tune alignment or spacing.
+- `css_class` (optional): defaults to nothing, but can be used for utility classes to fine-tune alignment or spacing.
 
 **Example 1:**
 
 The following HAML expression generates a loading icon's markup and
-centers the icon by wrapping it in a `gl-spinner-container` element.
+centers the icon.
 
 ```haml
-= loading_icon(container: true)
-```
-
-**Output from example 1:**
-
-```html
-<div class="gl-spinner-container">
-  <span class="gl-spinner gl-spinner-orange gl-spinner-sm" aria-label="Loading"></span>
-</div>
+= gl_loading_icon
 ```
 
 **Example 2:**
 
-The following HAML expression generates a loading icon's markup
+The following HAML expression generates an inline loading icon's markup
 with a custom size. It also appends a margin utility class.
 
 ```haml
-= loading_icon(size: 'lg', css_class: 'gl-mr-2')
-```
-
-**Output from example 2:**
-
-```html
-<span class="gl-spinner gl-spinner-orange gl-spinner-lg gl-mr-2" aria-label="Loading"></span>
+= gl_loading_icon(inline: true, size: 'lg', css_class: 'gl-mr-2')
 ```
 
 ### Usage in Vue

spec/helpers/icons_helper_spec.rb

@@ -231,23 +231,33 @@ RSpec.describe IconsHelper do
     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>'
+  describe 'gl_loading_icon' do
+    it 'returns the default spinner markup' do
+      expect(gl_loading_icon.to_s)
+        .to eq '<div class="gl-spinner-container" role="status"><span class="gl-spinner gl-spinner-dark gl-spinner-sm gl-vertical-align-text-bottom!" aria-label="Loading"></span></div>'
     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>'
+      it 'appends css_class to container element' do
+        expect(gl_loading_icon(css_class: 'gl-mr-2').to_s).to match 'gl-spinner-container gl-mr-2'
       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>'
+    context 'when size is provided' do
+      it 'sets the size class' do
+        expect(gl_loading_icon(size: 'xl').to_s).to match 'gl-spinner-xl'
+      end
+    end
+
+    context 'when color is provided' do
+      it 'sets the color class' do
+        expect(gl_loading_icon(color: 'light').to_s).to match 'gl-spinner-light'
+      end
+    end
+
+    context 'when inline is true' do
+      it 'creates an inline container' do
+        expect(gl_loading_icon(inline: true).to_s).to start_with '<span class="gl-spinner-container"'
       end
     end
   end