[SelectPanel] Add banner variant arg to component (#3083)

Author: jamieshark

.changeset/three-readers-switch.md

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

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

@@ -11,7 +11,7 @@
         <% 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_scheme, mb: 2) do %>
                 <% if error_content? %>
                   <%= error_content %>
                 <% else %>

app/components/primer/alpha/select_panel.rb

@@ -312,6 +312,12 @@ def with_avatar_item(**system_arguments)
         :none,
       ].freeze
 
+      DEFAULT_BANNER_SCHEME = :danger
+      BANNER_SCHEME_OPTIONS = [
+        DEFAULT_BANNER_SCHEME,
+        :warning
+      ].freeze
+
       # The URL to fetch search results from.
       #
       # @return [String]
@@ -332,6 +338,11 @@ def with_avatar_item(**system_arguments)
       # @return [Symbol]
       attr_reader :select_variant
 
+      # <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
+      #
+      # @return [Symbol]
+      attr_reader :banner_scheme
+
       # <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %>
       #
       # @return [Symbol]
@@ -369,6 +380,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_scheme [Symbol] The scheme for the error banner <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         src: nil,
@@ -389,6 +401,7 @@ def initialize(
         open_on_load: false,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        banner_scheme: DEFAULT_BANNER_SCHEME,
         **system_arguments
       )
         raise_if_role_given!(**system_arguments)
@@ -410,6 +423,7 @@ def initialize(
         @dynamic_label = dynamic_label
         @dynamic_label_prefix = dynamic_label_prefix
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
+        @banner_scheme = fetch_or_fallback(BANNER_SCHEME_OPTIONS, banner_scheme, DEFAULT_BANNER_SCHEME)
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:id] = @panel_id

previews/primer/alpha/select_panel_preview.rb

@@ -208,8 +208,18 @@ 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_scheme [Symbol] select [danger, warning]
+      def remote_fetch_filter_failure(
+        open_on_load: false,
+        banner_scheme: :danger
+      )
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+          system_arguments: {
+            # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
+            banner_scheme: banner_scheme.to_sym
+          }
+        })
       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,22 @@ def test_multi_select_allows_server_to_check_multiple_items
       assert_selector "[aria-checked=true]", text: "Photon torpedo"
     end
 
+    def test_banner_scheme_is_passed_to_banner_component
+      visit_preview(:remote_fetch_filter_failure, banner_scheme: :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"
+    end
+
     ########## JAVASCRIPT API TESTS ############
 
     def test_disable_item_via_js_api