[SelectPanel] Add banner variant arg to component

.changeset/three-readers-switch.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+[SelectPanel] Adds banner variant as param.

app/components/primer/alpha/select_panel.html.erb

@@ -11,11 +11,11 @@
         <% if show_filter? %>
           <% header.with_filter do %>
             <div data-target="select-panel.bannerErrorElement" hidden>
-              <%= render Primer::Alpha::Banner.new(scheme: :danger, mb: 2) do %>
+              <%= render Primer::Alpha::Banner.new(scheme: @banner_variant, mb: 2) do %>
                 <% if error_content? %>
                   <%= error_content %>
                 <% else %>
-                  <h2 class="f6 text-normal">Sorry, something went wrong.</h2>
+                  <h2 class="f6 text-normal <%= @banner_variant == :warning ? "fgColor-attention" : "fgColor-danger" %>">Sorry, something went wrong.</h2>
                 <% end %>
               <% end %>
             </div>

app/components/primer/alpha/select_panel.rb

@@ -311,6 +311,12 @@ def with_avatar_item(**system_arguments)
         :none,
       ].freeze
 
+      DEFAULT_BANNER_VARIANT = :danger
+      BANNER_VARIANT_OPTIONS = [
+        DEFAULT_BANNER_VARIANT,
+        :warning
+      ].freeze
+
       # The URL to fetch search results from.
       #
       # @return [String]
@@ -331,6 +337,11 @@ def with_avatar_item(**system_arguments)
       # @return [Symbol]
       attr_reader :select_variant
 
+      # <%= one_of(Primer::Alpha::SelectPanel::BANNER_VARIANT_OPTIONS) %>
+      #
+      # @return [Symbol]
+      attr_reader :banner_variant
+
       # <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %>
       #
       # @return [Symbol]
@@ -368,6 +379,7 @@ def with_avatar_item(**system_arguments)
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
       # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param banner_variant [Symbol] The scheme for the error banner <%= one_of(Primer::Alpha::SelectPanel::BANNER_VARIANT_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         src: nil,
@@ -388,6 +400,7 @@ def initialize(
         open_on_load: false,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        banner_variant: DEFAULT_BANNER_VARIANT,
         **system_arguments
       )
         raise_if_role_given!(**system_arguments)
@@ -409,6 +422,7 @@ def initialize(
         @dynamic_label = dynamic_label
         @dynamic_label_prefix = dynamic_label_prefix
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
+        @banner_variant = fetch_or_fallback(BANNER_VARIANT_OPTIONS, banner_variant, DEFAULT_BANNER_VARIANT)
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:id] = @panel_id

previews/primer/alpha/select_panel_preview.rb

@@ -208,8 +208,17 @@ def remote_fetch_initial_failure(open_on_load: false)
       #
       # @snapshot interactive
       # @param open_on_load toggle
-      def remote_fetch_filter_failure(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param banner_variant [Symbol] select [danger, warning]
+      def remote_fetch_filter_failure(
+        open_on_load: false,
+        banner_variant: :danger
+      )
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+          system_arguments: {
+            banner_variant: banner_variant
+          }
+        })
       end
 
       # @label Eventually local fetch initial failure

previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb

@@ -5,7 +5,8 @@
   # passing a uuid here causes the request to succeed the first time and fail all subsequent times
   src: select_panel_items_path(fail: "true", uuid: SecureRandom.uuid),
   fetch_strategy: :remote,
-  open_on_load: open_on_load
+  open_on_load: open_on_load,
+  **system_arguments
 )) do |panel| %>
   <% panel.with_show_button { "Sci-fi equipment" } %>
 <% end %>

test/system/alpha/select_panel_test.rb

@@ -671,6 +671,23 @@ def test_multi_select_allows_server_to_check_multiple_items
       assert_selector "[aria-checked=true]", text: "Photon torpedo"
     end
 
+    def test_banner_variant_is_passed_to_banner_component
+      visit_preview(:remote_fetch_filter_failure, banner_variant: :warning)
+
+      wait_for_items_to_load do
+        click_on_invoker_button
+      end
+
+      assert_selector "select-panel ul li"
+
+      wait_for_items_to_load do
+        filter_results(query: "foobar")
+      end
+
+      assert_selector "[data-target='select-panel.bannerErrorElement'] .Banner--warning", text: "Sorry, something went wrong"
+      assert_selector ".Banner-message .fgColor-attention", text: "Sorry, something went wrong"
+    end
+
     ########## JAVASCRIPT API TESTS ############
 
     def test_disable_item_via_js_api