Remove SelectPanel's backdrop (#3027)

Co-authored-by: camertron <camertron@users.noreply.github.com>
primer · Aug 23, 2024 · 5a205cd · 5a205cd
1 parent 8a16336
commit 5a205cd
Show file tree

Hide file tree

Showing 94 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/chatty-pots-deliver.md b/.changeset/chatty-pots-deliver.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Remove SelectPanel's backdrop
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/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_dimmed.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_dimmed.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/...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/...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/...-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/...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/...hots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_dimmed.png b/...hots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_dimmed.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/...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/...shots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_dimmed.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/list_of_links/dark_dimmed.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/...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/...apshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_dimmed.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_dimmed.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.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/...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/...apshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_dimmed.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_dimmed.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/...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.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_dimmed.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_dimmed.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/...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/...snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_dimmed.png b/...snapshots.test.ts-snapshots/primer/alpha/select_panel/no_values/dark_dimmed.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/...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/...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_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/...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/...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/...shots.test.ts-snapshots/primer/alpha/select_panel/single_select/dark_dimmed.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/single_select/dark_dimmed.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/...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/....test.ts-snapshots/primer/alpha/select_panel/single_select_form/dark_dimmed.png b/....test.ts-snapshots/primer/alpha/select_panel/single_select_form/dark_dimmed.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/...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/...s.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_dimmed.png b/...s.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_dimmed.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_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/....test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_dimmed.png b/....test.ts-snapshots/primer/alpha/select_panel/with_dynamic_label/dark_dimmed.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/...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/...ts/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_dimmed.png b/...ts/primer/alpha/select_panel/with_dynamic_label_and_aria_prefix/dark_dimmed.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/...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/....test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark_dimmed.png b/....test.ts-snapshots/primer/alpha/select_panel/with_leading_icons/dark_dimmed.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/...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/...shots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_dimmed.png b/...shots.test.ts-snapshots/primer/alpha/select_panel/with_subtitle/dark_dimmed.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/...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/...test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_dimmed.png b/...test.ts-snapshots/primer/alpha/select_panel/with_trailing_icons/dark_dimmed.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/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss
@@ -19,6 +19,10 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
 
+select-panel dialog::backdrop {
+  background: none;
+}
+
 @media (forced-colors: active) {
   .Overlay {
     outline: solid 1px transparent;