diff --git a/.changeset/calm-maps-wave.md b/.changeset/calm-maps-wave.md new file mode 100644 index 0000000000..b2649a058a --- /dev/null +++ b/.changeset/calm-maps-wave.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': minor +--- + +Add defaults to SelectPanel::ItemLists; fix issue showing no results label for local fetch strategy diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png index 76dd0af3a4..f8a5129eab 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png index 76dd0af3a4..f8a5129eab 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png index 5f7dc701b8..7a2783b0cd 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png index 6cd4994bc2..79d1443a7b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/dark_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png index e731cfcecc..3415608d6d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png index e731cfcecc..3415608d6d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png index dd5ba80710..9edf501412 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch_no_results/light_high_contrast.png differ diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb index 19a56df22a..a125c983e5 100644 --- a/app/components/primer/alpha/select_panel.rb +++ b/app/components/primer/alpha/select_panel.rb @@ -250,10 +250,22 @@ module Alpha # ) # ``` class SelectPanel < Primer::Component - status :alpha - # The component that should be used to render the list of items in the body of a SelectPanel. - ItemList = Primer::Alpha::ActionList + class ItemList < Primer::Alpha::ActionList + # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>. + def initialize(**system_arguments) + select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT + + super( + p: 2, + role: "listbox", + aria_selection_variant: select_variant == :single ? :selected : :checked, + **system_arguments + ) + end + end + + status :alpha DEFAULT_PRELOAD = false @@ -328,6 +340,7 @@ class SelectPanel < Primer::Component # @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 system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( src: nil, title: "Menu", diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts index 6987d7b59f..9a1cfef1e3 100644 --- a/app/components/primer/alpha/select_panel_element.ts +++ b/app/components/primer/alpha/select_panel_element.ts @@ -216,6 +216,10 @@ export class SelectPanelElement extends HTMLElement { const elem = entry.target if (entry.isIntersecting && elem === this.dialog) { this.updateAnchorPosition() + + if (this.#fetchStrategy === FetchStrategy.LOCAL) { + this.#updateItemVisibility() + } } } }) diff --git a/demo/app/views/select_panel_items/index.html.erb b/demo/app/views/select_panel_items/index.html.erb index 47a3d0c3fc..7db71086d3 100644 --- a/demo/app/views/select_panel_items/index.html.erb +++ b/demo/app/views/select_panel_items/index.html.erb @@ -1,8 +1,6 @@ <% unless results.empty? %> <%= render(Primer::Alpha::SelectPanel::ItemList.new( - select_variant: :multiple, - p: 2, - role: "listbox", + select_variant: (params[:select_variant] || :multiple).to_sym, aria: { label: "options", }, diff --git a/previews/primer/alpha/select_panel_preview/playground.html.erb b/previews/primer/alpha/select_panel_preview/playground.html.erb index 3d7b6e373f..f48ef4ff81 100644 --- a/previews/primer/alpha/select_panel_preview/playground.html.erb +++ b/previews/primer/alpha/select_panel_preview/playground.html.erb @@ -5,7 +5,11 @@ <%= render(Primer::Alpha::SelectPanel.new( data: { interaction_subject: subject_id }, - src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure), + src: select_panel_items_path( + select_variant: :single, + show_results: !simulate_no_results, + fail: simulate_failure + ), select_variant: :single, fetch_strategy: :remote, **system_arguments diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb index 06022c1ca0..4fa1a6bc5a 100644 --- a/test/system/alpha/select_panel_test.rb +++ b/test/system/alpha/select_panel_test.rb @@ -195,6 +195,18 @@ def test_single_select_item_checked # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden + end + + def test_single_select_remote_fetch_item_checked + visit_preview(:playground) + + click_on_invoker_button + click_on_first_item + + # clicking item closes panel, so checked item is hidden + assert_selector "[aria-selected=true]", text: "Photon torpedo", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_checked_via_keyboard_enter @@ -212,6 +224,7 @@ def test_single_select_item_checked_via_keyboard_enter keyboard.type(:enter, :tab, :down, :enter) assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_checked_via_keyboard_space @@ -229,6 +242,7 @@ def test_single_select_item_checked_via_keyboard_space keyboard.type(:enter, :tab, :down, :space) assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_item_unchecks_previously_checked_item @@ -239,12 +253,14 @@ def test_single_select_item_unchecks_previously_checked_item # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 3", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden click_on_invoker_button click_on_second_item # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_selected_item_cannot_be_unchecked @@ -258,6 +274,7 @@ def test_single_selected_item_cannot_be_unchecked # clicking item closes panel, so checked item is hidden assert_selector "[aria-selected=true]", text: "Item 2", visible: :hidden + refute_selector "[aria-checked]", visible: :hidden end def test_single_select_disabled_item_cannot_be_checked @@ -282,6 +299,7 @@ def test_multi_select_items_checked # clicking item closes panel, so checked item is hidden assert_selector "[aria-checked=true]", text: "Item 2" assert_selector "[aria-checked=true]", text: "Item 3" + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_checked_via_keyboard_enter @@ -301,6 +319,8 @@ def test_multi_select_items_checked_via_keyboard_enter assert_selector "[aria-checked=true]", count: 2 assert_selector "[aria-checked=true]", text: "Item 1" assert_selector "[aria-checked=true]", text: "Item 2" + + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_checked_via_keyboard_space @@ -320,6 +340,8 @@ def test_multi_select_items_checked_via_keyboard_space assert_selector "[aria-checked=true]", count: 2 assert_selector "[aria-checked=true]", text: "Item 1" assert_selector "[aria-checked=true]", text: "Item 2" + + refute_selector "[aria-selected]", visible: :hidden end def test_multi_select_items_can_be_unchecked @@ -482,6 +504,17 @@ def test_closed_event assert page.evaluate_script("window.panelClosed") end + ########### LOCAL FETCH TESTS ############ + + def test_local_fetch_no_results + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + + refute_selector "select-panel ul li" + assert_selector "select-panel", text: "No results" + end + ########## EVENTUALLY LOCAL TESTS ############ def test_ev_loc_items_load