Rename slots for sorting and grouping

Author: HDinger

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

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

app/components/primer/open_project/sub_header.rb

@@ -170,37 +170,27 @@ class SubHeader < Primer::Component
         }
       }
 
-      # 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|
+      # A slot for a generic sorting component. Will be rendered next to the search input
+      renders_one :quick_sort, lambda { |**kwargs|
         deny_tag_argument(**kwargs)
-        kwargs[:tag] = :div
-        kwargs[:mr] ||= 2
-        QuickFilter.new(**kwargs)
+
+        QuickActionComponent.new(**kwargs)
       }
 
-      renders_one :group_quick_filter, lambda { |**kwargs|
+      # A slot for a generic sorting component. Will be rendered next to the sorting button
+      renders_one :quick_group, lambda { |**kwargs|
         deny_tag_argument(**kwargs)
-        kwargs[:tag] = :div
-        kwargs[:mr] ||= 2
-        QuickFilter.new(**kwargs)
+
+        QuickActionComponent.new(**kwargs)
       }
 
+      # 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.
       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)
+        QuickActionComponent.new(**kwargs)
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
@@ -256,14 +246,14 @@ def initialize(collapsed_search: false, **system_arguments)
       end
 
       def before_render
-        all_qf = [sort_quick_filter, group_quick_filter].compact + quick_filters
+        all_quick_actions = [quick_sort, quick_group].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 all_qf.size > 5
-          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{all_qf.size}."
+        if quick_filters.size > 5
+          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{all_quick_actions.size}."
         end
 
         if quick_filters.size > 1
@@ -274,7 +264,7 @@ def before_render
 
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && all_qf.empty?
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && all_quick_actions.empty?
         )
       end
 

…/open_project/sub_header/quick_filter.rb …ect/sub_header/quick_action_component.rbapp/components/primer/open_project/sub_header/quick_filter.rb renamed to app/components/primer/open_project/sub_header/quick_action_component.rb app/components/primer/open_project/sub_header/quick_filter.rb renamed to app/components/primer/open_project/sub_header/quick_action_component.rb

@@ -5,11 +5,17 @@ module OpenProject
     # Thin wrapper for quick filter slots that defers BaseComponent construction to render time,
     # allowing system arguments (e.g. display) to be mutated in before_render.
     # Do not use standalone
-    class SubHeader::QuickFilter < Primer::Component
+    class SubHeader::QuickActionComponent < Primer::Component
       status :open_project
 
       def initialize(**system_arguments)
         @system_arguments = system_arguments
+        system_arguments[:tag] = :div
+        system_arguments[:mr] ||= 2
+        system_arguments[:classes] = class_names(
+          "SubHeader-hiddenOnExpand",
+          system_arguments[:classes]
+        )
       end
 
       def merge_system_arguments!(**other_arguments)

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

@@ -5,11 +5,11 @@
     "All filters"
   end
 
-  component.with_sort_quick_filter do
+  component.with_quick_sort do
     render(Primer::Beta::IconButton.new(icon: :"sort-desc", "aria-label": "Sort"))
   end
 
-  component.with_group_quick_filter do
+  component.with_quick_group do
     render(Primer::Beta::IconButton.new(icon: :rows, "aria-label": "Group"))
   end
 

static/statuses.json

@@ -173,7 +173,7 @@
   "Primer::OpenProject::SubHeader::Button": "open_project",
   "Primer::OpenProject::SubHeader::ButtonGroup": "open_project",
   "Primer::OpenProject::SubHeader::Menu": "open_project",
-  "Primer::OpenProject::SubHeader::QuickFilter": "open_project",
+  "Primer::OpenProject::SubHeader::QuickActionComponent": "open_project",
   "Primer::OpenProject::SubHeader::SegmentedControl": "open_project",
   "Primer::OpenProject::ZenModeButton": "open_project",
   "Primer::Tooltip": "deprecated",

test/components/component_test.rb

@@ -252,7 +252,7 @@ def test_registered_components
       "Primer::OpenProject::SubHeader::Button",
       "Primer::OpenProject::SubHeader::ButtonGroup",
       "Primer::OpenProject::SubHeader::Menu",
-      "Primer::OpenProject::SubHeader::QuickFilter",
+      "Primer::OpenProject::SubHeader::QuickActionComponent",
       "Primer::OpenProject::SubHeader::SegmentedControl",
       "Primer::OpenProject::SidePanel::Section",
       "Primer::OpenProject::DangerDialog::FormWrapper",

test/components/primer/open_project/sub_header_test.rb

@@ -325,15 +325,15 @@ def test_quick_filters_maximum_is_five
 
   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 }
+      component.with_quick_sort { "<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 }
+      component.with_quick_group { "<span class='GroupFilter'>Group</span>".html_safe }
     end
 
     assert_selector(".SubHeader-leftPane .GroupFilter")
@@ -343,8 +343,8 @@ 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" }
+      component.with_quick_group(classes: "GroupFilter") { "Group" }
+      component.with_quick_sort(classes: "SortFilter") { "Sort" }
     end
 
     assert_selector(".SortFilter ~ .GroupFilter")
@@ -353,32 +353,35 @@ def test_sort_and_group_quick_filters_render_before_other_quick_filters
 
   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_sort { "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
+  def test_sort_and_group_do_not_count_toward_maximum
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_filter_button { "Filter" }
+      component.with_quick_sort { "Sort" }
+      component.with_quick_group { "Group" }
+      4.times { |i| component.with_quick_filter { "Filter #{i}" } }
     end
 
-    assert_equal "SubHeader supports a maximum of 5 quick_filters, got 6.", err.message
+    assert_text "Sort"
+    assert_text "Group"
+    assert_text "Filter 0"
+    assert_text "Filter 1"
+    assert_text "Filter 2"
+    assert_text "Filter 3"
   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 }
+      component.with_quick_sort { "<span class='SortFilter'>Sort</span>".html_safe }
+      component.with_quick_group { "<span class='GroupFilter'>Group</span>".html_safe }
     end
 
     assert_no_selector(".d-none.d-md-flex .SortFilter")