From 6f207589ef17b72b700c3756022689f61264ade2 Mon Sep 17 00:00:00 2001 From: Mir Bhatia Date: Tue, 9 Jun 2026 08:40:27 +0200 Subject: [PATCH] Update label to change colours and include counter conditionally --- .../select_panel_component.html.erb | 13 ++-- .../quick_filter/select_panel_component.rb | 15 +---- .../select_panel_component_spec.rb | 65 +++++++++++++++---- 3 files changed, 62 insertions(+), 31 deletions(-) diff --git a/app/components/op_primer/quick_filter/select_panel_component.html.erb b/app/components/op_primer/quick_filter/select_panel_component.html.erb index 4404b27bd74..e0f15707a1a 100644 --- a/app/components/op_primer/quick_filter/select_panel_component.html.erb +++ b/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 %> diff --git a/app/components/op_primer/quick_filter/select_panel_component.rb b/app/components/op_primer/quick_filter/select_panel_component.rb index 280817e9739..4c5762261ac 100644 --- a/app/components/op_primer/quick_filter/select_panel_component.rb +++ b/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 diff --git a/spec/components/op_primer/quick_filter/select_panel_component_spec.rb b/spec/components/op_primer/quick_filter/select_panel_component_spec.rb index 677a7dba4f0..c9549ece0b4 100644 --- a/spec/components/op_primer/quick_filter/select_panel_component_spec.rb +++ b/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