Merge pull request #469 from opf/feature/op-19305-enforce-order-of-subheader-slots-quickfilters

[OP-19305] Enforce order of subheader slots/quickfilters

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

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/size_small/focused.png

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

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

@@ -170,19 +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.
+      # 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)
+
+        QuickActionComponent.new(**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)
+
+        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|
@@ -238,12 +246,14 @@ def initialize(collapsed_search: false, **system_arguments)
       end
 
       def before_render
+        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 quick_filters.size > 5
-          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
+          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{all_quick_actions.size}."
         end
 
         if quick_filters.size > 1
@@ -254,7 +264,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_quick_actions.empty?
         )
       end
 

app/components/primer/open_project/sub_header.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)

…/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,6 +5,14 @@
     "All filters"
   end
 
+  component.with_quick_sort do
+    render(Primer::Beta::IconButton.new(icon: :"sort-desc", "aria-label": "Sort"))
+  end
+
+  component.with_quick_group 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)

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

@@ -6600,10 +6600,10 @@
     ]
   },
   {
-    "component": "OpenProject::SubHeader::QuickFilter",
+    "component": "OpenProject::SubHeader::QuickActionComponent",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickFilter",
+    "short_name": "OpenProjectSubHeaderQuickActionComponent",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
     "parameters": []

static/arguments.json

@@ -173,7 +173,7 @@
   "Primer::OpenProject::SubHeader::Button": "",
   "Primer::OpenProject::SubHeader::ButtonGroup": "",
   "Primer::OpenProject::SubHeader::Menu": "",
-  "Primer::OpenProject::SubHeader::QuickFilter": "",
+  "Primer::OpenProject::SubHeader::QuickActionComponent": "",
   "Primer::OpenProject::SubHeader::SegmentedControl": "2023-02-01",
   "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",

static/audited_at.json

@@ -1996,7 +1996,7 @@
       "none"
     ],
     "Menu": "Primer::OpenProject::SubHeader::Menu",
-    "QuickFilter": "Primer::OpenProject::SubHeader::QuickFilter",
+    "QuickActionComponent": "Primer::OpenProject::SubHeader::QuickActionComponent",
     "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter",
     "SegmentedControl": "Primer::OpenProject::SubHeader::SegmentedControl"
   },
@@ -2009,8 +2009,8 @@
   "Primer::OpenProject::SubHeader::Menu": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::Menu::GeneratedSlotMethods"
   },
-  "Primer::OpenProject::SubHeader::QuickFilter": {
-    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickFilter::GeneratedSlotMethods"
+  "Primer::OpenProject::SubHeader::QuickActionComponent": {
+    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickActionComponent::GeneratedSlotMethods"
   },
   "Primer::OpenProject::SubHeader::SegmentedControl": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"

static/constants.json

@@ -22108,16 +22108,16 @@
     "subcomponents": []
   },
   {
-    "fully_qualified_name": "Primer::OpenProject::SubHeader::QuickFilter",
+    "fully_qualified_name": "Primer::OpenProject::SubHeader::QuickActionComponent",
     "description": "Thin wrapper for quick filter slots that defers BaseComponent construction to render time,\nallowing system arguments (e.g. display) to be mutated in before_render.\nDo not use standalone",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
-    "component": "OpenProject::SubHeader::QuickFilter",
+    "component": "OpenProject::SubHeader::QuickActionComponent",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickFilter",
+    "short_name": "OpenProjectSubHeaderQuickActionComponent",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
     "parameters": [],