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

…3044) Co-authored-by: jamieshark <[email protected]>
primer · Sep 10, 2024 · b57b63a · b57b63a
1 parent 871c818
commit b57b63a
Show file tree

Hide file tree

Showing 150 changed files with 28 additions and 14 deletions.
diff --git a/.changeset/light-foxes-scream.md b/.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."
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark.png b/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_colorblind.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_colorblind.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/select_panel/default/dark_high_contrast.png b/...hots.test.ts-snapshots/primer/alpha/select_panel/default/dark_high_contrast.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/light.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/light.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/default/light_colorblind.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/default/light_colorblind.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/default/light_high_contrast.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/default/light_high_contrast.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark.png
diff --git a/...-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_colorblind.png b/...-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_colorblind.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_dimmed.png b/...t.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_dimmed.png
diff --git a/...apshots/primer/alpha/select_panel/eventually_local_fetch/dark_high_contrast.png b/...apshots/primer/alpha/select_panel/eventually_local_fetch/dark_high_contrast.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/light.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/light.png
diff --git a/...snapshots/primer/alpha/select_panel/eventually_local_fetch/light_colorblind.png b/...snapshots/primer/alpha/select_panel/eventually_local_fetch/light_colorblind.png
diff --git a/...pshots/primer/alpha/select_panel/eventually_local_fetch/light_high_contrast.png b/...pshots/primer/alpha/select_panel/eventually_local_fetch/light_high_contrast.png
diff --git a/...shots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png b/...shots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/dark.png
diff --git a/...r/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png b/...r/alpha/select_panel/eventually_local_fetch_initial_failure/dark_colorblind.png
diff --git a/...rimer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png b/...rimer/alpha/select_panel/eventually_local_fetch_initial_failure/dark_dimmed.png
diff --git a/...lpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png b/...lpha/select_panel/eventually_local_fetch_initial_failure/dark_high_contrast.png
diff --git a/...hots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png b/...hots/primer/alpha/select_panel/eventually_local_fetch_initial_failure/light.png
diff --git a/.../alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png b/.../alpha/select_panel/eventually_local_fetch_initial_failure/light_colorblind.png
diff --git a/...pha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png b/...pha/select_panel/eventually_local_fetch_initial_failure/light_high_contrast.png
diff --git a/...-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png b/...-snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark.png
diff --git a/...primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png b/...primer/alpha/select_panel/eventually_local_fetch_no_results/dark_colorblind.png
diff --git a/...ots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png b/...ots/primer/alpha/select_panel/eventually_local_fetch_no_results/dark_dimmed.png
diff --git a/...mer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png b/...mer/alpha/select_panel/eventually_local_fetch_no_results/dark_high_contrast.png
diff --git a/...snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png b/...snapshots/primer/alpha/select_panel/eventually_local_fetch_no_results/light.png
diff --git a/...rimer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png b/...rimer/alpha/select_panel/eventually_local_fetch_no_results/light_colorblind.png
diff --git a/...er/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png b/...er/alpha/select_panel/eventually_local_fetch_no_results/light_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_colorblind.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_high_contrast.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light.png b/.../snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_colorblind.png b/...test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_colorblind.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_high_contrast.png b/...t.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/light.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/light.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/list_of_links/light_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/list_of_links/light_colorblind.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/list_of_links/light_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/list_of_links/light_high_contrast.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_colorblind.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_colorblind.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_high_contrast.png b/....test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_colorblind.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_high_contrast.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png
diff --git a/...-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png b/...-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png b/...t.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png
diff --git a/...apshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png b/...apshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png
diff --git a/...snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png b/...snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png
diff --git a/...pshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png b/...pshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_colorblind.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_colorblind.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_high_contrast.png b/....test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/light.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/light.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect/light_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect/light_colorblind.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/multiselect/light_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/multiselect/light_high_contrast.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark.png b/...snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_colorblind.png b/...est.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_colorblind.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_high_contrast.png b/....ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_high_contrast.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/light.png b/...napshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/light.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/multiselect_form/light_colorblind.png b/...st.ts-snapshots/primer/alpha/select_panel/multiselect_form/light_colorblind.png
diff --git a/...ts-snapshots/primer/alpha/select_panel/multiselect_form/light_high_contrast.png b/...ts-snapshots/primer/alpha/select_panel/multiselect_form/light_high_contrast.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark.png b/...nshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark.png
diff --git a/...shots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_colorblind.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_colorblind.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_high_contrast.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_high_contrast.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/light.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/light.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/select_panel/no_values/light_colorblind.png b/...hots.test.ts-snapshots/primer/alpha/select_panel/no_values/light_colorblind.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/no_values/light_high_contrast.png b/...s.test.ts-snapshots/primer/alpha/select_panel/no_values/light_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_colorblind.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_dimmed.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_dimmed.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_high_contrast.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark.png b/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark.png
diff --git a/...shots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_colorblind.png b/...shots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_colorblind.png
diff --git a/...snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_dimmed.png b/...snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_dimmed.png
diff --git a/...ts/primer/alpha/select_panel/remote_fetch_filter_failure/dark_high_contrast.png b/...ts/primer/alpha/select_panel/remote_fetch_filter_failure/dark_high_contrast.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/light.png b/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/light.png
diff --git a/...hots/primer/alpha/select_panel/remote_fetch_filter_failure/light_colorblind.png b/...hots/primer/alpha/select_panel/remote_fetch_filter_failure/light_colorblind.png
diff --git a/...s/primer/alpha/select_panel/remote_fetch_filter_failure/light_high_contrast.png b/...s/primer/alpha/select_panel/remote_fetch_filter_failure/light_high_contrast.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png b/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark.png
diff --git a/...hots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png b/...hots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_colorblind.png
diff --git a/...napshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png b/...napshots/primer/alpha/select_panel/remote_fetch_initial_failure/dark_dimmed.png
diff --git a/...s/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png b/...s/primer/alpha/select_panel/remote_fetch_initial_failure/dark_high_contrast.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png b/...t.ts-snapshots/primer/alpha/select_panel/remote_fetch_initial_failure/light.png
diff --git a/...ots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png b/...ots/primer/alpha/select_panel/remote_fetch_initial_failure/light_colorblind.png
diff --git a/.../primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png b/.../primer/alpha/select_panel/remote_fetch_initial_failure/light_high_contrast.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark.png
diff --git a/...snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png b/...snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_colorblind.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png b/....ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/dark_dimmed.png
diff --git a/...pshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png b/...pshots/primer/alpha/select_panel/remote_fetch_no_results/dark_high_contrast.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png b/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch_no_results/light.png
diff --git a/...napshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png b/...napshots/primer/alpha/select_panel/remote_fetch_no_results/light_colorblind.png
diff --git a/...shots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png b/...shots/primer/alpha/select_panel/remote_fetch_no_results/light_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/single_select/dark.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/single_select/dark.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/single_select/dark_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/single_select/dark_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/single_select/dark_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/single_select/dark_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/single_select/light.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/single_select/light.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/single_select/light_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/single_select/light_colorblind.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/single_select/light_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/single_select/light_high_contrast.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/single_select_form/dark.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/single_select_form/dark.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/single_select_form/dark_colorblind.png b/...t.ts-snapshots/primer/alpha/select_panel/single_select_form/dark_colorblind.png
diff --git a/...s-snapshots/primer/alpha/select_panel/single_select_form/dark_high_contrast.png b/...s-snapshots/primer/alpha/select_panel/single_select_form/dark_high_contrast.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/single_select_form/light.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/single_select_form/light.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/single_select_form/light_colorblind.png b/....ts-snapshots/primer/alpha/select_panel/single_select_form/light_colorblind.png
diff --git a/...-snapshots/primer/alpha/select_panel/single_select_form/light_high_contrast.png b/...-snapshots/primer/alpha/select_panel/single_select_form/light_high_contrast.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark.png b/...napshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_colorblind.png b/...st.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_colorblind.png
diff --git a/...ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_high_contrast.png b/...ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_high_contrast.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light_colorblind.png b/...t.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light_colorblind.png
diff --git a/...s-snapshots/primer/alpha/select_panel/with_avatar_items/light_high_contrast.png b/...s-snapshots/primer/alpha/select_panel/with_avatar_items/light_high_contrast.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_colorblind.png b/...t.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_colorblind.png
diff --git a/...s-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_high_contrast.png b/...s-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_high_contrast.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/light.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/light.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/with_dynamic_label/light_colorblind.png b/....ts-snapshots/primer/alpha/select_panel/with_dynamic_label/light_colorblind.png
diff --git a/...-snapshots/primer/alpha/select_panel/with_dynamic_label/light_high_contrast.png b/...-snapshots/primer/alpha/select_panel/with_dynamic_label/light_high_contrast.png
diff --git a/...snapshots/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark.png b/...snapshots/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark.png
diff --git a/...rimer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_colorblind.png b/...rimer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_colorblind.png
diff --git a/...er/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_high_contrast.png b/...er/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_high_contrast.png
diff --git a/...napshots/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/light.png b/...napshots/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/light.png
diff --git a/...imer/alpha/select_panel/with_dynamic_label_and_aria_prefix/light_colorblind.png b/...imer/alpha/select_panel/with_dynamic_label_and_aria_prefix/light_colorblind.png
diff --git a/...r/alpha/select_panel/with_dynamic_label_and_aria_prefix/light_high_contrast.png b/...r/alpha/select_panel/with_dynamic_label_and_aria_prefix/light_high_contrast.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark_colorblind.png b/...t.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark_colorblind.png
diff --git a/...s-snapshots/primer/alpha/select_panel/with_leading_icons/dark_high_contrast.png b/...s-snapshots/primer/alpha/select_panel/with_leading_icons/dark_high_contrast.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/light.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/light.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/with_leading_icons/light_colorblind.png b/....ts-snapshots/primer/alpha/select_panel/with_leading_icons/light_colorblind.png
diff --git a/...-snapshots/primer/alpha/select_panel/with_leading_icons/light_high_contrast.png b/...-snapshots/primer/alpha/select_panel/with_leading_icons/light_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/light.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/light.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/with_subtitle/light_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/with_subtitle/light_colorblind.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/with_subtitle/light_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/with_subtitle/light_high_contrast.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_colorblind.png b/....ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_colorblind.png
diff --git a/...-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_high_contrast.png b/...-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_high_contrast.png
diff --git a/...shots.test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/light.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/light.png
diff --git a/...ts-snapshots/primer/alpha/select_panel/with_trailing_icons/light_colorblind.png b/...ts-snapshots/primer/alpha/select_panel/with_trailing_icons/light_colorblind.png
diff --git a/...snapshots/primer/alpha/select_panel/with_trailing_icons/light_high_contrast.png b/...snapshots/primer/alpha/select_panel/with_trailing_icons/light_high_contrast.png
diff --git a/app/components/primer/alpha/select_panel.html.erb b/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 %>

diff --git a/app/components/primer/alpha/select_panel.pcss b/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);
+}
diff --git a/app/components/primer/primer.pcss b/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";