Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42

8 files changed, 33 insertions, 19 deletions

diff --git a/spec/components/pajamas/spinner_component_spec.rb b/spec/components/pajamas/spinner_component_spec.rb
index 9aac9a0085c..f03d8c9561b 100644
--- a/spec/components/pajamas/spinner_component_spec.rb
+++ b/spec/components/pajamas/spinner_component_spec.rb
@@ -35,7 +35,7 @@ RSpec.describe Pajamas::SpinnerComponent, type: :component do
   describe 'inline' do
     context 'by default' do
       it 'renders a div' do
-        expect(page).to have_css 'div.gl-spinner'
+        expect(page).to have_css 'div.gl-spinner-container'
       end
     end
 
@@ -43,7 +43,7 @@ RSpec.describe Pajamas::SpinnerComponent, type: :component do
       let(:options) { { inline: true } }
 
       it 'renders a span' do
-        expect(page).to have_css 'span.gl-spinner'
+        expect(page).to have_css 'span.gl-spinner-container'
       end
     end
   end
diff --git a/spec/components/previews/pajamas/alert_component_preview.rb b/spec/components/previews/pajamas/alert_component_preview.rb
index e1889032c8b..4768ef47975 100644
--- a/spec/components/previews/pajamas/alert_component_preview.rb
+++ b/spec/components/previews/pajamas/alert_component_preview.rb
@@ -4,7 +4,7 @@ module Pajamas
     # @param title text
     # @param body text
     # @param dismissible toggle
-    # @param variant select [info, warning, success, danger, tip]
+    # @param variant select {{ Pajamas::AlertComponent::VARIANT_ICONS.keys }}
     def default(title: "Alert title (optional)", body: "Alert message goes here.", dismissible: true, variant: :info)
       render(Pajamas::AlertComponent.new(
                title: title,
diff --git a/spec/components/previews/pajamas/avatar_component_preview.rb b/spec/components/previews/pajamas/avatar_component_preview.rb
index e5cdde1ccef..147d89169b0 100644
--- a/spec/components/previews/pajamas/avatar_component_preview.rb
+++ b/spec/components/previews/pajamas/avatar_component_preview.rb
@@ -9,17 +9,17 @@ module Pajamas
     end
 
     # We show user avatars in a circle.
-    # @param size select [16, 24, 32, 48, 64, 96]
+    # @param size select {{ Pajamas::AvatarComponent::SIZE_OPTIONS }}
     def user(size: 64)
       render(Pajamas::AvatarComponent.new(User.first, size: size))
     end
 
-    # @param size select [16, 24, 32, 48, 64, 96]
+    # @param size select {{ Pajamas::AvatarComponent::SIZE_OPTIONS }}
     def project(size: 64)
       render(Pajamas::AvatarComponent.new(Project.first, size: size))
     end
 
-    # @param size select [16, 24, 32, 48, 64, 96]
+    # @param size select {{ Pajamas::AvatarComponent::SIZE_OPTIONS }}
     def group(size: 64)
       render(Pajamas::AvatarComponent.new(Group.first, size: size))
     end
diff --git a/spec/components/previews/pajamas/badge_component_preview.rb b/spec/components/previews/pajamas/badge_component_preview.rb
index e740a4a38aa..e833c4e458d 100644
--- a/spec/components/previews/pajamas/badge_component_preview.rb
+++ b/spec/components/previews/pajamas/badge_component_preview.rb
@@ -10,9 +10,9 @@ module Pajamas
     # @param icon select [~, star-o, issue-closed, tanuki]
     # @param icon_only toggle
     # @param href url
-    # @param size select [sm, md, lg]
+    # @param size select {{ Pajamas::BadgeComponent::SIZE_OPTIONS }}
     # @param text text
-    # @param variant select [muted, neutral, info, success, warning, danger]
+    # @param variant select {{ Pajamas::BadgeComponent::VARIANT_OPTIONS }}
     def default(icon: :tanuki, icon_only: false, href: nil, size: :md, text: "Tanuki", variant: :muted)
       render Pajamas::BadgeComponent.new(
         text,
diff --git a/spec/components/previews/pajamas/banner_component_preview.rb b/spec/components/previews/pajamas/banner_component_preview.rb
index 861e3ff95dc..19f4f5243c0 100644
--- a/spec/components/previews/pajamas/banner_component_preview.rb
+++ b/spec/components/previews/pajamas/banner_component_preview.rb
@@ -9,7 +9,7 @@ module Pajamas
     # @param button_link text
     # @param content textarea
     # @param embedded toggle
-    # @param variant select [introduction, promotion]
+    # @param variant select {{ Pajamas::BannerComponent::VARIANT_OPTIONS }}
     def default(
       button_text: "Learn more",
       button_link: "https://about.gitlab.com/",
diff --git a/spec/components/previews/pajamas/button_component_preview.rb b/spec/components/previews/pajamas/button_component_preview.rb
index 1f61d9cf2bc..c07d898d9cd 100644
--- a/spec/components/previews/pajamas/button_component_preview.rb
+++ b/spec/components/previews/pajamas/button_component_preview.rb
@@ -5,10 +5,10 @@ module Pajamas
     # ----
     # See its design reference [here](https://design.gitlab.com/components/banner).
     #
-    # @param category select [primary, secondary, tertiary]
-    # @param variant select [default, confirm, danger, dashed, link, reset]
-    # @param size select [small, medium]
-    # @param type select [button, reset, submit]
+    # @param category select {{ Pajamas::ButtonComponent::CATEGORY_OPTIONS }}
+    # @param variant select {{ Pajamas::ButtonComponent::VARIANT_OPTIONS }}
+    # @param size select {{ Pajamas::ButtonComponent::SIZE_OPTIONS }}
+    # @param type select {{ Pajamas::ButtonComponent::TYPE_OPTIONS }}
     # @param disabled toggle
     # @param loading toggle
     # @param block toggle
diff --git a/spec/components/previews/pajamas/progress_component_preview.rb b/spec/components/previews/pajamas/progress_component_preview.rb
index 4de07872a80..1562ffddf7e 100644
--- a/spec/components/previews/pajamas/progress_component_preview.rb
+++ b/spec/components/previews/pajamas/progress_component_preview.rb
@@ -7,8 +7,8 @@ module Pajamas
     #
     # See its design reference [here](https://design.gitlab.com/components/progress-bar).
     #
-    # @param value number
-    # @param variant select [primary, success]
+    # @param value range { min: 0, max: 100, step: 1 }
+    # @param variant select {{ Pajamas::ProgressComponent::VARIANT_OPTIONS }}
     def default(value: 50, variant: :primary)
       render Pajamas::ProgressComponent.new(value: value, variant: variant)
     end
diff --git a/spec/components/previews/pajamas/spinner_component_preview.rb b/spec/components/previews/pajamas/spinner_component_preview.rb
index 149bfddcfc2..34cc386763f 100644
--- a/spec/components/previews/pajamas/spinner_component_preview.rb
+++ b/spec/components/previews/pajamas/spinner_component_preview.rb
@@ -7,16 +7,30 @@ module Pajamas
     #
     # @param inline toggle
     # @param label text
-    # @param size select [[small, sm], [medium, md], [large, lg], [extra large, xl]]
+    # @param size select {{ Pajamas::SpinnerComponent::SIZE_OPTIONS }}
     def default(inline: false, label: "Loading", size: :md)
-      render(Pajamas::SpinnerComponent.new(inline: inline, label: label, size: size))
+      render Pajamas::SpinnerComponent.new(
+        inline: inline,
+        label: label,
+        size: size
+      )
     end
 
-    # Use a light spinner on dark backgrounds
+    # Use a light spinner on dark backgrounds.
     #
-    # @display bg_color "#222"
+    # @display bg_dark true
     def light
       render(Pajamas::SpinnerComponent.new(color: :light))
     end
+
+    # Any extra HTML attributes like `class`, `data` or `id` get automatically applied to the spinner container element.
+    #
+    def extra_attributes
+      render Pajamas::SpinnerComponent.new(
+        class: "js-do-something",
+        data: { foo: "bar" },
+        id: "my-special-spinner"
+      )
+    end
   end
 end