Show search trigger button already on medium screen sizes as the search is already hidden on medium as well

Author: HDinger

.changeset/dull-bars-love.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Show collapsed search icon button on medium screen sizes in Primer::OpenProject::SubHeader

app/components/primer/open_project/sub_header.rb

@@ -101,7 +101,7 @@ class SubHeader < Primer::Component
           system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
         end
 
-        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :none]
+        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :inline_flex, :none]
 
         @collapsed_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
                                                                  display: trigger_display,
@@ -171,12 +171,16 @@ class SubHeader < Primer::Component
       }
 
       # Quick filters shown in the left pane next to the search bar (0–5 items).
-      # Hidden on mobile. Requires all_filters_button to be set when used.
+      # Hidden on smaller screens. Requires all_filters_button to be set when used.
       # Supports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.
       renders_many :quick_filters, lambda { |**kwargs|
         deny_tag_argument(**kwargs)
         kwargs[:tag] = :div
         kwargs[:mr] ||= 2
+        kwargs[:classes] = class_names(
+          "SubHeader-hiddenOnExpand",
+          kwargs[:classes]
+        )
 
         QuickFilter.new(**kwargs)
       }

app/components/primer/open_project/sub_header_element.ts

@@ -29,9 +29,10 @@ class SubHeaderElement extends HTMLElement {
 
   expandFilterInput() {
     for (const item of this.shownItemsOnExpandedFilter) {
-      item.classList.remove('d-none')
+      item.classList.remove('d-none', 'd-sm-none')
     }
     for (const item of this.filterExpandButton) {
+      item.classList.remove('d-inline-flex', 'd-sm-inline-flex')
       item.classList.add('d-none')
     }
     this.classList.add('SubHeader--expandedSearch')
@@ -43,7 +44,7 @@ class SubHeaderElement extends HTMLElement {
       item.classList.remove('d-none')
     }
     for (const item of this.shownItemsOnExpandedFilter) {
-      item.classList.add('d-none')
+      item.classList.add('d-none', 'd-sm-none')
     }
     this.classList.remove('SubHeader--expandedSearch')
   }

test/components/primer/open_project/sub_header_test.rb

@@ -247,18 +247,18 @@ def test_collapsed_search_trigger_visible_on_all_screen_sizes
       component.with_filter_input(name: "filter", label: "Filter")
     end
 
-    # Without collapsed_search, the trigger has d-sm-none (hidden on desktop).
-    # With collapsed_search, it must not have d-sm-none.
-    assert_no_selector("[data-action='click:sub-header#expandFilterInput'].d-sm-none")
+    # Without collapsed_search, the trigger has d-md-none (hidden on desktop).
+    # With collapsed_search, it must not have d-md-none.
+    assert_no_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
   end
 
   def test_default_search_trigger_hidden_on_desktop
     render_inline(Primer::OpenProject::SubHeader.new) do |component|
       component.with_filter_input(name: "filter", label: "Filter")
     end
 
-    # Without collapsed_search the trigger is mobile-only (d-sm-none)
-    assert_selector("[data-action='click:sub-header#expandFilterInput'].d-sm-none")
+    # Without collapsed_search the trigger is mobile-only (d-md-none)
+    assert_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
   end
 
   def test_renders_quick_filters