diff options
Diffstat (limited to 'app/helpers/icons_helper.rb')
-rw-r--r-- | app/helpers/icons_helper.rb | 40 |
1 files changed, 33 insertions, 7 deletions
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index 32d808c960c..6f7ac069fe4 100644 --- a/app/helpers/icons_helper.rb +++ b/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) |