[SelectPanel] Filter input border and loading/error panel min-height

.changeset/light-foxes-scream.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+SelectPanel - design bug fixes. Adds a divider below the filter, adjusts min height for loading and error states, moves banner error above input filter."

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

@@ -2,14 +2,23 @@
   <dialog-helper>
     <%= show_button %>
     <%= render(@dialog) do %>
-      <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title) do |header| %>
+      <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title, show_divider: show_filter?) do |header| %>
         <% if subtitle? %>
           <% header.with_subtitle do %>
             <%= subtitle %>
           <% end %>
         <% end %>
         <% if show_filter? %>
           <% header.with_filter do %>
+            <div data-target="select-panel.bannerErrorElement" hidden>
+              <%= render Primer::Alpha::Banner.new(scheme: :danger, mb: 2) do %>
+                <% if error_content? %>
+                  <%= error_content %>
+                <% else %>
+                  <h2 class="f6 text-normal">Sorry, something went wrong.</h2>
+                <% end %>
+              <% end %>
+            </div>
             <%= render(Primer::BaseComponent.new(
               tag: :"remote-input",
               aria: { owns: @body_id },
@@ -36,16 +45,7 @@
           <% end %>
         <% end %>
       <% end %>
-      <div data-target="select-panel.bannerErrorElement" hidden>
-        <%= render Primer::Alpha::Banner.new(scheme: :danger, full: true, mt: 2) do %>
-          <% if error_content? %>
-            <%= error_content %>
-          <% else %>
-            <h2 class="f5">Sorry, something went wrong.</h2>
-          <% end %>
-        <% end %>
-      </div>
-      <%= render Primer::Alpha::Dialog::Body.new(mt: 2, p: 0) do %>
+      <%= render Primer::Alpha::Dialog::Body.new(mt: show_filter? ? 0 : 2, p: 0) do %>
         <focus-group direction="vertical" mnemonics retain>
           <div class="sr-only" aria-live="polite" aria-atomic="true" data-target="select-panel.ariaLiveContainer"></div>
           <%= render(Primer::BaseComponent.new(
@@ -67,7 +67,8 @@
                     display: :flex,
                     align_items: :center,
                     justify_content: :center,
-                    text_align: :center
+                    text_align: :center,
+                    classes: "SelectPanel-loadingPanel"
                   )) do %>
                     <div data-hide-on-error>
                       <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
@@ -78,7 +79,7 @@
                       <% else %>
                         <div class="pt-2 pb-2">
                           <%= render Primer::Beta::Octicon.new(icon: :alert, color: :danger) %>
-                          <h2 class="f5">Sorry, something went wrong.</h2>
+                          <h2 class="f5 mt-2">Sorry, something went wrong.</h2>
                         </div>
                       <% end %>
                     </div>
@@ -88,7 +89,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="color-border-muted text-center" hidden>
+            <div data-target="select-panel.noResults" class="color-border-muted text-center d-flex flex-items-center flex-justify-center SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>

app/components/primer/alpha/select_panel.pcss

@@ -0,0 +1,7 @@
+.SelectPanel-loadingPanel {
+  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+}
+
+.SelectPanel-emptyPanel {
+  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+}

app/components/primer/primer.pcss

@@ -12,6 +12,7 @@
 @import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
+@import "./alpha/select_panel.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./alpha/menu.pcss";