Add banner variant arg to SelectPanel.

primer · Sep 11, 2024 · 645aa25 · 645aa25
1 parent b45ef04
commit 645aa25
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/app/components/primer/alpha/select_panel.html.erb b/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>

diff --git a/app/components/primer/alpha/select_panel.rb b/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

diff --git a/previews/primer/alpha/select_panel_preview.rb b/previews/primer/alpha/select_panel_preview.rb
@@ -17,6 +17,7 @@ class SelectPanelPreview < ViewComponent::Preview
       # @param open_on_load toggle
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param banner_variant [Symbol] select [danger, warning]
       # @param selected_items text
       def playground(
         title: "Sci-fi equipment",
@@ -31,6 +32,7 @@ def playground(
         open_on_load: false,
         anchor_align: :start,
         anchor_side: :outside_bottom,
+        banner_variant: :danger,
         selected_items: "Phaser"
       )
         render_with_template(locals: {
@@ -47,7 +49,8 @@ def playground(
             dynamic_aria_label_prefix: dynamic_aria_label_prefix,
             open_on_load: open_on_load,
             anchor_align: anchor_align,
-            anchor_side: anchor_side
+            anchor_side: anchor_side,
+            banner_variant: banner_variant
           }
         })
       end