Update label to change colours and include counter conditionally

app/components/op_primer/quick_filter/select_panel_component.html.erb

@@ -36,14 +36,13 @@ See COPYRIGHT and LICENSE files for more details.
           select_variant: @select_variant,
           fetch_strategy: fetch_strategy,
           src: panel_src,
-          title: @name,
-          dynamic_label: true,
-          dynamic_label_prefix: current_values.any? ? @name : nil
+          title: @name
         )
       ) do |panel| %>
     <% panel.with_show_button(scheme: :secondary, data: { test_selector: "quick-filter-select-panel-button" }) do |button|
-         button.with_trailing_visual_icon(icon: :"triangle-down")
-         current_label
+         button.with_trailing_visual_counter(count: current_values.size) if current_values.any?
+         button.with_trailing_action_icon(icon: :"triangle-down", color: current_values.empty? ? :muted : :default)
+         button_label
        end %>
     <% if local? %>
       <% items.each do |item| %>
@@ -58,12 +57,12 @@ See COPYRIGHT and LICENSE files for more details.
     <% if @select_variant == :multiple || current_values.any? %>
       <% panel.with_footer(show_divider: true) do %>
         <% if current_values.any? %>
-          <%= render(Primer::Beta::Button.new(scheme: :secondary, data: { action: "click->quick-filter--select-panel#clear" })) do %>
+          <%= render(Primer::Beta::Button.new(scheme: :secondary, data: { action: "click->quick-filter--select-panel#clear", test_selector: "quick-filter-clear-button" })) do %>
             <%= t(:button_clear) %>
           <% end %>
         <% end %>
         <% if @select_variant == :multiple %>
-          <%= render(Primer::Beta::Button.new(scheme: :primary, data: { action: "click->quick-filter--select-panel#apply" })) do %>
+          <%= render(Primer::Beta::Button.new(scheme: :primary, data: { action: "click->quick-filter--select-panel#apply", test_selector: "quick-filter-apply-button" })) do %>
             <%= t(:button_apply) %>
           <% end %>
         <% end %>

app/components/op_primer/quick_filter/select_panel_component.rb

@@ -88,19 +88,10 @@ module OpPrimer
         active_filter&.values&.map(&:to_s) || []
       end
 
-      def current_label
-        return @name if current_values.empty?
-        return I18n.t(:label_x_items_selected, count: current_values.size) if current_values.size > 1
+      def button_label
+        return render(Primer::Beta::Text.new(color: :muted)) { @name } if current_values.empty?
 
-        single_label || @name
-      end
-
-      def single_label
-        if async?
-          active_filter.value_objects.first.send(@label_method)
-        elsif local?
-          items.find { |item| current_values.include?(item.value.to_s) }.label
-        end
+        @name
       end
 
       def panel_src

spec/components/op_primer/quick_filter/select_panel_component_spec.rb

@@ -106,16 +106,21 @@ RSpec.describe OpPrimer::QuickFilter::SelectPanelComponent, type: :component do
     end
   end
 
-  context "with the show button label" do
+  context "with the show button" do
     context "when no filter is active" do
       before { render_with_items }
 
-      it "shows the component name" do
+      it "shows the component name in muted text" do
         expect(page).to have_button("Project")
+        expect(page).to have_css("button .color-fg-muted", text: "Project")
       end
 
-      it "does not render a dynamic label prefix" do
-        expect(page).to have_no_css("[data-dynamic-label-prefix]")
+      it "does not show a counter" do
+        expect(page).to have_no_css("button .Counter")
+      end
+
+      it "renders the trailing icon in muted color" do
+        expect(page).to have_css("button .octicon-triangle-down.color-fg-muted")
       end
     end
 
@@ -124,12 +129,20 @@ RSpec.describe OpPrimer::QuickFilter::SelectPanelComponent, type: :component do
 
       before { render_with_items }
 
-      it "shows the selected item name" do
-        expect(page).to have_button("Project 1")
+      it "shows the component name as the label" do
+        expect(page).to have_button("Project")
       end
 
-      it "renders the dynamic label prefix" do
-        expect(page).to have_css("[data-dynamic-label-prefix='Project']")
+      it "does not render muted text" do
+        expect(page).to have_no_css("button .color-fg-muted", text: "Project")
+      end
+
+      it "shows a counter with the selected count" do
+        expect(page).to have_css("button .Counter", text: "1")
+      end
+
+      it "renders the trailing icon in default color" do
+        expect(page).to have_css("button .octicon-triangle-down.color-fg-default")
       end
     end
 
@@ -138,12 +151,40 @@ RSpec.describe OpPrimer::QuickFilter::SelectPanelComponent, type: :component do
 
       before { render_with_items }
 
-      it "shows the item count" do
-        expect(page).to have_button(I18n.t(:label_x_items_selected, count: 2))
+      it "shows the component name as the label" do
+        expect(page).to have_button("Project")
       end
 
-      it "renders the dynamic label prefix" do
-        expect(page).to have_css("[data-dynamic-label-prefix='Project']")
+      it "shows a counter with the selected count" do
+        expect(page).to have_css("button .Counter", text: "2")
+      end
+    end
+  end
+
+  context "with the footer" do
+    context "when no filter is active" do
+      before { render_with_items }
+
+      it "renders an apply button" do
+        expect(page).to have_test_selector("quick-filter-apply-button")
+      end
+
+      it "does not render a clear button" do
+        expect(page).to have_no_test_selector("quick-filter-clear-button")
+      end
+    end
+
+    context "when a filter is active" do
+      let(:query) { build_meeting_query.where("project_id", "=", ["1"]) }
+
+      before { render_with_items }
+
+      it "renders a clear button" do
+        expect(page).to have_test_selector("quick-filter-clear-button")
+      end
+
+      it "renders an apply button" do
+        expect(page).to have_test_selector("quick-filter-apply-button")
       end
     end
   end