Change dynamic label implementation for selectpanel to use a counter

Author: HDinger

app/components/primer/alpha/select_panel.rb

@@ -291,6 +291,9 @@ def with_avatar_item(**system_arguments)
         :none,
       ].freeze
 
+      DEFAULT_DYNAMIC_LABEL_TYPE = :count
+      DYNAMIC_LABEL_TYPE_OPTIONS = [:label, :count].freeze
+
       DEFAULT_BANNER_SCHEME = :danger
       BANNER_SCHEME_OPTIONS = [
         DEFAULT_BANNER_SCHEME,
@@ -351,6 +354,7 @@ def with_avatar_item(**system_arguments)
       # @param preload [Boolean] Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.
       # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
       # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
+      # @param dynamic_label_type [Symbol] Controls what is shown as the dynamic label. `:label` shows the selected item's text; `:count` shows the number of selected items. Only applies when `select_variant: :multiple`. <%= one_of(Primer::Alpha::SelectPanel::DYNAMIC_LABEL_TYPE_OPTIONS) %>
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
@@ -374,6 +378,7 @@ def initialize(
         preload: DEFAULT_PRELOAD,
         dynamic_label: false,
         dynamic_label_prefix: nil,
+        dynamic_label_type: DEFAULT_DYNAMIC_LABEL_TYPE,
         dynamic_aria_label_prefix: nil,
         body_id: nil,
         list_arguments: {},
@@ -405,6 +410,7 @@ def initialize(
         @show_filter = show_filter
         @dynamic_label = dynamic_label
         @dynamic_label_prefix = dynamic_label_prefix
+        @dynamic_label_type = fetch_or_fallback(DYNAMIC_LABEL_TYPE_OPTIONS, dynamic_label_type, DEFAULT_DYNAMIC_LABEL_TYPE)
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
         @loading_label = loading_label
         @loading_description_id = nil
@@ -435,6 +441,7 @@ def initialize(
             data: { select_variant: @select_variant, fetch_strategy: @fetch_strategy, open_on_load: open_on_load }.tap do |data|
               data[:dynamic_label] = dynamic_label if dynamic_label
               data[:dynamic_label_prefix] = dynamic_label_prefix if dynamic_label_prefix.present?
+              data[:dynamic_label_type] = @dynamic_label_type if dynamic_label
               data[:dynamic_aria_label_prefix] = dynamic_aria_label_prefix if dynamic_aria_label_prefix.present?
             end
           }
@@ -517,6 +524,8 @@ def initialize(
 
         if icon.present?
           Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        elsif @dynamic_label && @dynamic_label_type == :count && @select_variant == :multiple
+          ShowButton.new(dynamic_label_prefix: @dynamic_label_prefix, **system_arguments)
         else
           Primer::Beta::Button.new(**system_arguments)
         end

app/components/primer/alpha/select_panel/show_button.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class SelectPanel
+      # This component is part of <%= link_to_component(Primer::Alpha::SelectPanel) %> and should not be
+      # used as a standalone component.
+      class ShowButton < Primer::Component
+        def initialize(dynamic_label_prefix: nil, **button_args)
+          @dynamic_label_prefix = dynamic_label_prefix
+          @button_args = button_args
+        end
+
+        def call
+          leading_visual = @button_args.delete(:leading_visual)
+          trailing_visual = @button_args.delete(:trailing_visual)
+          button = Primer::Beta::Button.new(**@button_args)
+          button.with_leading_visual_icon(**leading_visual) if leading_visual&.key?(:icon)
+          button.with_trailing_visual_icon(**trailing_visual) if trailing_visual&.key?(:icon)
+
+          prefix_span = @dynamic_label_prefix.present? ? content_tag(:span, "#{@dynamic_label_prefix} ", class: "color-fg-muted", data: { target: "select-panel.labelPrefix" }) : nil
+          counter = render(Primer::Beta::Counter.new(
+            count: 0,
+            hidden: true,
+            data: { target: "select-panel.counterLabel" }
+          ))
+          render(button) do
+            safe_join([prefix_span, counter].compact)
+          end
+        end
+      end
+    end
+  end
+end

app/components/primer/alpha/select_panel_element.ts

@@ -76,6 +76,8 @@ export class SelectPanelElement extends HTMLElement {
   @target bannerErrorElement: HTMLElement
   @target bodySpinner: HTMLElement
   @target liveRegion: LiveRegionElement
+  @target counterLabel: HTMLElement
+  @target labelPrefix: HTMLElement
 
   filterFn?: FilterFn
 
@@ -111,7 +113,7 @@ export class SelectPanelElement extends HTMLElement {
   get dynamicLabelPrefix(): string {
     const prefix = this.getAttribute('data-dynamic-label-prefix')
     if (!prefix) return ''
-    return `${prefix}:`
+    return this.dynamicLabelType === 'count' ? prefix : `${prefix}:`
   }
 
   get dynamicAriaLabelPrefix(): string {
@@ -132,6 +134,10 @@ export class SelectPanelElement extends HTMLElement {
     this.toggleAttribute('data-dynamic-label', value)
   }
 
+  get dynamicLabelType(): string {
+    return this.getAttribute('data-dynamic-label-type') || 'count'
+  }
+
   get invokerElement(): HTMLButtonElement | null {
     const id = this.querySelector('dialog')?.id
     if (!id) return null
@@ -955,13 +961,20 @@ export class SelectPanelElement extends HTMLElement {
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
     let itemLabel: string | undefined
+
     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(', ')
+    } else {
+      if (this.dynamicLabelType === 'count') {
+        this.#setDynamicCountLabel()
+        return
+      } else {
+        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')
@@ -979,6 +992,28 @@ export class SelectPanelElement extends HTMLElement {
     }
   }
 
+  #setDynamicCountLabel() {
+    if (!this.counterLabel) return
+    const count = this.querySelectorAll(`[${this.ariaSelectionType}=true]`).length
+
+    if (count === 0) {
+      this.counterLabel.hidden = true
+      this.invokerElement?.classList.add('color-fg-muted')
+      this.labelPrefix?.classList.add('color-fg-muted')
+    } else {
+      this.counterLabel.textContent = String(count)
+      this.counterLabel.setAttribute('title', String(count))
+      this.counterLabel.hidden = false
+      this.invokerElement?.classList.remove('color-fg-muted')
+      this.labelPrefix?.classList.remove('color-fg-muted')
+    }
+
+    if (this.dynamicAriaLabelPrefix) {
+      const ariaLabel = count === 0 ? this.dynamicAriaLabelPrefix : `${this.dynamicAriaLabelPrefix} ${count}`
+      this.invokerElement?.setAttribute('aria-label', ariaLabel)
+    }
+  }
+
   #updateInput() {
     if (this.selectVariant === 'single') {
       const input =