Select panel item list defaults (#2963)

Co-authored-by: camertron <camertron@users.noreply.github.com>

.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

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",

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()
+          }
         }
       }
     })

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",
     },

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

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