Support dynamic labels for multiple SelectPanel

Closes primer#3824

Author: myabc

app/components/primer/alpha/select_panel_element.ts

@@ -913,6 +913,8 @@ export class SelectPanelElement extends HTMLElement {
       } else {
         this.#removeSelectedItem(item)
       }
+
+      this.#setDynamicLabel()
     }
 
     this.#updateInput()
@@ -949,8 +951,14 @@ export class SelectPanelElement extends HTMLElement {
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
-    const itemLabel =
-      this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || this.#originalLabel
+    let itemLabel: string;
+    if (this.selectVariant === 'single') {
+      itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent ?? ''
+    } else if (this.selectVariant === 'multiple') {
+      itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+        .map(label => label.textContent.trim()).join(', ')
+    }
+    itemLabel ||= this.#originalLabel
     if (itemLabel) {
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')

previews/primer/alpha/select_panel_preview.rb

@@ -156,16 +156,26 @@ def multiselect(open_on_load: false)
       #
       # @snapshot interactive
       # @param open_on_load toggle
-      def with_dynamic_label(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param select_variant [Symbol] select [single, multiple]
+      def with_dynamic_label(open_on_load: false, select_variant: :single)
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+            # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
+          select_variant: select_variant.to_sym
+        })
       end
 
       # @label With dynamic label and aria prefix
       #
       # @snapshot interactive
       # @param open_on_load toggle
-      def with_dynamic_label_and_aria_prefix(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param select_variant [Symbol] select [single, multiple]
+      def with_dynamic_label_and_aria_prefix(open_on_load: false, select_variant: :single)
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+            # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
+          select_variant: select_variant.to_sym
+        })
       end
 
       # @!endgroup

previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb

@@ -4,7 +4,7 @@
   data: { interaction_subject: subject_id },
   id: "with_avatar_items",
   title: "Select users",
-  select_variant: :single,
+  select_variant: select_variant,
   fetch_strategy: :local,
   dynamic_label: true,
   dynamic_label_prefix: "Item",

previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb

@@ -4,7 +4,7 @@
   data: { interaction_subject: subject_id },
   id: "with_avatar_items",
   title: "Select users",
-  select_variant: :single,
+  select_variant: select_variant,
   fetch_strategy: :local,
   dynamic_label: true,
   dynamic_label_prefix: "Item",

test/system/alpha/select_panel_test.rb

@@ -752,6 +752,56 @@ def test_banner_scheme_is_passed_to_banner_component
       assert_selector "[data-target='select-panel.bannerErrorElement'] .Banner--warning", text: "Sorry, something went wrong"
     end
 
+    def test_dynamic_label_for_single_select_variant
+      visit_preview(:with_dynamic_label, select_variant: :single)
+
+      click_on_invoker_button
+
+      assert_selector "select-panel button[aria-controls]", exact_text: "Item: Choose item"
+
+      click_on_second_item
+
+      assert_selector "select-panel button[aria-controls]", exact_text: "Item: Item 2"
+    end
+
+    def test_dynamic_label_for_multiple_select_variant
+      visit_preview(:with_dynamic_label, select_variant: :multiple)
+
+      click_on_invoker_button
+
+      assert_selector "select-panel button[aria-controls]", exact_text: "Item: Choose item"
+
+      click_on_second_item
+      click_on_third_item
+
+      assert_selector "select-panel button[aria-controls]", exact_text: "Item: Item 2, Item 3"
+    end
+
+    def test_dynamic_label_and_aria_prefix_for_single_select_variant
+      visit_preview(:with_dynamic_label_and_aria_prefix, select_variant: :single)
+
+      click_on_invoker_button
+
+      assert_selector "select-panel button[aria-controls][aria-label='Your item: Choose item']"
+
+      click_on_second_item
+
+      assert_selector "select-panel button[aria-controls][aria-label='Your item: Item 2']"
+    end
+
+    def test_dynamic_label_and_aria_prefix_for_multiple_select_variant
+      visit_preview(:with_dynamic_label_and_aria_prefix, select_variant: :multiple)
+
+      click_on_invoker_button
+
+      assert_selector "select-panel button[aria-controls][aria-label='Your item: Choose item']"
+
+      click_on_second_item
+      click_on_third_item
+
+      assert_selector "select-panel button[aria-controls][aria-label='Your item: Item 2, Item 3']"
+    end
+
     ########## JAVASCRIPT API TESTS ############
 
     def test_disable_item_via_js_api
@@ -1370,7 +1420,7 @@ def test_prevents_events_from_bubbling
       visit_preview(:default)
 
       click_on_invoker_button
-      
+
       keyboard.type(:tab)
 
       evaluate_multiline_script(<<~JS)
@@ -1389,9 +1439,9 @@ def test_prevents_events_from_bubbling
 
       refute_selector "select-panel dialog[open]"
 
-      keyboard.type("a")  
+      keyboard.type("a")
 
       assert page.evaluate_script("window.bodyKeydownFired")
     end
   end
-end
+end