Introduce specific slots for sort and group quick filters to ensure the order is enforced

Author: HDinger

.changeset/empty-poets-occur.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Introduce specific slots for sort and group quick filters

app/components/primer/open_project/sub_header.html.erb

@@ -7,6 +7,8 @@
 
     <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
+    <%= sort_quick_filter %>
+    <%= group_quick_filter %>
     <% quick_filters.each do |quick_filter| %>
       <%= quick_filter %>
     <% end %>

app/components/primer/open_project/sub_header.rb

@@ -170,9 +170,27 @@ class SubHeader < Primer::Component
         }
       }
 
-      # Quick filters shown in the left pane next to the search bar (0–5 items).
-      # Hidden on smaller screens. Requires all_filters_button to be set when used.
+      # Quick filters shown in the left pane next to the search bar (0–5 items total across all types).
+      # Hidden on smaller screens when more than one `quick_filter` is provided. Requires `filter_button` when using more than one `quick_filter`.
       # Supports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.
+      #
+      # Use `with_sort_quick_filter` for sort controls (renders first),
+      # `with_group_quick_filter` for group controls (renders second),
+      # and `with_quick_filter` for all others (renders last).
+      renders_one :sort_quick_filter, lambda { |**kwargs|
+        deny_tag_argument(**kwargs)
+        kwargs[:tag] = :div
+        kwargs[:mr] ||= 2
+        QuickFilter.new(**kwargs)
+      }
+
+      renders_one :group_quick_filter, lambda { |**kwargs|
+        deny_tag_argument(**kwargs)
+        kwargs[:tag] = :div
+        kwargs[:mr] ||= 2
+        QuickFilter.new(**kwargs)
+      }
+
       renders_many :quick_filters, lambda { |**kwargs|
         deny_tag_argument(**kwargs)
         kwargs[:tag] = :div
@@ -238,12 +256,14 @@ def initialize(collapsed_search: false, **system_arguments)
       end
 
       def before_render
+        all_qf = [sort_quick_filter, group_quick_filter].compact + quick_filters
+
         if quick_filters.size > 1 && filter_button.nil?
           raise ArgumentError, "You must provide a filter_button when using quick_filters."
         end
 
-        if quick_filters.size > 5
-          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
+        if all_qf.size > 5
+          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{all_qf.size}."
         end
 
         if quick_filters.size > 1
@@ -254,7 +274,7 @@ def before_render
 
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && all_qf.empty?
         )
       end
 

previews/primer/open_project/sub_header_preview/quick_filters.html.erb

@@ -5,6 +5,14 @@
     "All filters"
   end
 
+  component.with_sort_quick_filter do
+    render(Primer::Beta::IconButton.new(icon: :"sort-desc", "aria-label": "Sort"))
+  end
+
+  component.with_group_quick_filter do
+    render(Primer::Beta::IconButton.new(icon: :rows, "aria-label": "Group"))
+  end
+
   component.with_quick_filter do
     render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
       component.with_item(label: "Monthly", selected: true)

test/components/primer/open_project/sub_header_test.rb

@@ -304,7 +304,6 @@ def test_quick_filters_require_filter_button_when_multiple_quick_filters
     assert_equal "You must provide a filter_button when using quick_filters.", err.message
   end
 
-
   def test_quick_filters_require_no_filter_button_for_single_quick_filter
     render_inline(Primer::OpenProject::SubHeader.new) do |component|
       component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
@@ -323,4 +322,66 @@ def test_quick_filters_maximum_is_five
 
     assert_equal "SubHeader supports a maximum of 5 quick_filters, got 6.", err.message
   end
+
+  def test_renders_sort_quick_filter
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_sort_quick_filter { "<span class='SortFilter'>Sort</span>".html_safe }
+    end
+
+    assert_selector(".SubHeader-leftPane .SortFilter")
+  end
+
+  def test_renders_group_quick_filter
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_group_quick_filter { "<span class='GroupFilter'>Group</span>".html_safe }
+    end
+
+    assert_selector(".SubHeader-leftPane .GroupFilter")
+  end
+
+  def test_sort_and_group_quick_filters_render_before_other_quick_filters
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_filter_button { "Filter" }
+      component.with_quick_filter(classes: "OtherFilter") { "Other" }
+      component.with_group_quick_filter(classes: "GroupFilter") { "Group" }
+      component.with_sort_quick_filter(classes: "SortFilter") { "Sort" }
+    end
+
+    assert_selector(".SortFilter ~ .GroupFilter")
+    assert_selector(".GroupFilter ~ .OtherFilter")
+  end
+
+  def test_sort_and_group_do_not_count_toward_filter_button_requirement
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_sort_quick_filter { "Sort" }
+      component.with_quick_filter { "Status" }
+    end
+
+    assert_text "Sort"
+    assert_text "Status"
+  end
+
+  def test_sort_and_group_count_toward_maximum
+    err = assert_raises ArgumentError do
+      render_inline(Primer::OpenProject::SubHeader.new) do |component|
+        component.with_filter_button { "Filter" }
+        component.with_sort_quick_filter { "Sort" }
+        component.with_group_quick_filter { "Group" }
+        4.times { |i| component.with_quick_filter { "Filter #{i}" } }
+      end
+    end
+
+    assert_equal "SubHeader supports a maximum of 5 quick_filters, got 6.", err.message
+  end
+
+  def test_sort_and_group_are_not_hidden_on_mobile_when_multiple_quick_filters
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_filter_button { "Filter" }
+      component.with_sort_quick_filter { "<span class='SortFilter'>Sort</span>".html_safe }
+      component.with_group_quick_filter { "<span class='GroupFilter'>Group</span>".html_safe }
+    end
+
+    assert_no_selector(".d-none.d-md-flex .SortFilter")
+    assert_no_selector(".d-none.d-md-flex .GroupFilter")
+  end
 end