openproject-primer_view_components 0.86.2 → 0.87.0

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -469,6 +469,7 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
     else {
         // multi-select mode allows unchecking a checked item
         item.setAttribute('aria-checked', `${checked}`);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
     this.dispatchEvent(new CustomEvent('itemActivated', {
@@ -498,21 +499,29 @@ _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
-    if (this.selectVariant !== 'single')
-        return;
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')?.textContent?.trim();
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[aria-checked=true] .ActionListItem-label`))
+            .map(label => (label.textContent || '').trim())
+            .filter(Boolean)
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f"));
     if (itemLabel && this.dynamicLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
-        prefixSpan.textContent = this.dynamicLabelPrefix;
-        contentSpan.textContent = itemLabel.textContent || '';
+        prefixSpan.textContent = this.dynamicLabelPrefix ? `${this.dynamicLabelPrefix} ` : '';
+        contentSpan.textContent = itemLabel;
         invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -455,6 +455,8 @@ export class ActionMenuElement extends HTMLElement {
     } else {
       // multi-select mode allows unchecking a checked item
       item.setAttribute('aria-checked', `${checked}`)
+
+      this.#setDynamicLabel()
     }
 
     this.#updateInput()
@@ -497,18 +499,26 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #setDynamicLabel() {
-    if (this.selectVariant !== 'single') return
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
-    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
+    let itemLabel: string | undefined
+    if (this.selectVariant === 'single') {
+      itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')?.textContent?.trim()
+    } else if (this.selectVariant === 'multiple') {
+      itemLabel = Array.from(this.querySelectorAll(`[aria-checked=true] .ActionListItem-label`))
+        .map(label => (label.textContent || '').trim())
+        .filter(Boolean)
+        .join(', ')
+    }
+    itemLabel ||= this.#originalLabel
     if (itemLabel && this.dynamicLabel) {
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')
       const contentSpan = document.createElement('span')
-      prefixSpan.textContent = this.dynamicLabelPrefix
-      contentSpan.textContent = itemLabel.textContent || ''
+      prefixSpan.textContent = this.dynamicLabelPrefix ? `${this.dynamicLabelPrefix} ` : ''
+      contentSpan.textContent = itemLabel
       invokerLabel.replaceChildren(prefixSpan, contentSpan)
     } else {
       invokerLabel.textContent = this.#originalLabel

data/app/components/primer/alpha/select_panel_element.js

@@ -866,6 +866,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         else {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, item);
         }
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
@@ -885,7 +886,16 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _SelectPanelElement_originalLabel, __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f");
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent;
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+            .map(label => label.textContent?.trim() ?? '')
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f"));
     if (itemLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');

data/app/components/primer/alpha/select_panel_element.ts

@@ -916,6 +916,8 @@ export class SelectPanelElement extends HTMLElement {
       } else {
         this.#removeSelectedItem(item)
       }
+
+      this.#setDynamicLabel()
     }
 
     this.#updateInput()
@@ -952,8 +954,15 @@ export class SelectPanelElement extends HTMLElement {
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
-    const itemLabel =
-      this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || this.#originalLabel
+    let itemLabel: string | undefined
+    if (this.selectVariant === 'single') {
+      itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent
+    } else if (this.selectVariant === 'multiple') {
+      itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+        .map(label => label.textContent?.trim() ?? '')
+        .join(', ')
+    }
+    itemLabel ||= this.#originalLabel
     if (itemLabel) {
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')

data/app/components/primer/open_project/filterable_tree_view.rb

@@ -199,10 +199,10 @@ module Primer
         src: nil,
         tree_view_arguments: {},
         form_arguments: {},
-        filter_input_arguments: DEFAULT_FILTER_INPUT_ARGUMENTS.dup,
-        filter_mode_control_arguments: DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup,
-        include_sub_items_check_box_arguments: DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup,
-        no_results_node_arguments: DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup,
+        filter_input_arguments: {},
+        filter_mode_control_arguments: {},
+        include_sub_items_check_box_arguments: {},
+        no_results_node_arguments: {},
         **system_arguments
       )
         @tree_view_arguments = tree_view_arguments.dup
@@ -218,6 +218,7 @@ module Primer
           **tree_view_arguments
         )
 
+        filter_input_arguments = filter_input_arguments.reverse_merge(DEFAULT_FILTER_INPUT_ARGUMENTS)
         filter_input_arguments[:data] = merge_data(
           filter_input_arguments, {
             data: { target: "filterable-tree-view.filterInput" }
@@ -250,7 +251,7 @@ module Primer
         @system_arguments[:tag] = :"filterable-tree-view"
         @system_arguments[:src] = src if src
 
-        @no_results_node_arguments = no_results_node_arguments
+        @no_results_node_arguments = no_results_node_arguments.reverse_merge(DEFAULT_NO_RESULTS_NODE_ARGUMENTS)
       end
 
       def with_default_filter_modes

data/app/components/primer/open_project/sub_header/{quick_filter.rb → quick_action_component.rb}

@@ -5,11 +5,17 @@ module Primer
     # 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)

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

@@ -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 %>

data/app/components/primer/open_project/sub_header.rb

@@ -101,7 +101,7 @@ module Primer
           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,
@@ -170,15 +170,27 @@ module Primer
         }
       }
 
-      # 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.
+      # 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
 
-        QuickFilter.new(**kwargs)
+        QuickActionComponent.new(**kwargs)
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
@@ -234,12 +246,14 @@ module Primer
       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
@@ -250,7 +264,7 @@ module Primer
 
         @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
 

data/app/components/primer/open_project/sub_header_element.js

@@ -24,9 +24,10 @@ let SubHeaderElement = 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');
@@ -37,7 +38,7 @@ let SubHeaderElement = 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');
     }

data/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')
   }

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 86
-      PATCH = 2
+      MINOR = 87
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb

@@ -4,7 +4,7 @@
   data: { interaction_subject: subject_id },
   id: "with_avatar_items",
   title: "Select users",
-  select_variant: :single,
+  select_variant: select_variant,
   fetch_strategy: :local,
   dynamic_label: true,
   dynamic_label_prefix: "Item",

data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb

@@ -4,7 +4,7 @@
   data: { interaction_subject: subject_id },
   id: "with_avatar_items",
   title: "Select users",
-  select_variant: :single,
+  select_variant: select_variant,
   fetch_strategy: :local,
   dynamic_label: true,
   dynamic_label_prefix: "Item",

data/previews/primer/alpha/select_panel_preview.rb

@@ -144,15 +144,25 @@ module Primer
       # @label With dynamic label
       #
       # @param open_on_load toggle
-      def with_dynamic_label(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param select_variant [Symbol] select [single, multiple]
+      def with_dynamic_label(open_on_load: false, select_variant: :single)
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+          # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
+          select_variant: select_variant.to_sym
+        })
       end
 
       # @label With dynamic label and aria prefix
       #
       # @param open_on_load toggle
-      def with_dynamic_label_and_aria_prefix(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param select_variant [Symbol] select [single, multiple]
+      def with_dynamic_label_and_aria_prefix(open_on_load: false, select_variant: :single)
+        render_with_template(locals: {
+          open_on_load: open_on_load,
+          # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
+          select_variant: select_variant.to_sym
+        })
       end
 
       # @!endgroup

data/previews/primer/open_project/filterable_tree_view_preview/custom_no_results_text.html.erb

@@ -1,5 +1,5 @@
 <%= render(Primer::OpenProject::FilterableTreeView.new(
-  filter_input_arguments: {placeholder: "Search me!", name: "filter", label: "Filter", visually_hide_label: true},
+  filter_input_arguments: {placeholder: "Search me!", visually_hide_label: true},
   no_results_node_arguments: { label: "All wizards and witches have left the building" })) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>

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

@@ -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)

data/static/arguments.json

@@ -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": []

data/static/audited_at.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": "",

data/static/constants.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"

data/static/info_arch.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": [],

data/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",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.86.2
+  version: 0.87.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -689,7 +689,7 @@ files:
 - app/components/primer/open_project/sub_header/button.rb
 - app/components/primer/open_project/sub_header/button_group.rb
 - app/components/primer/open_project/sub_header/menu.rb
-- app/components/primer/open_project/sub_header/quick_filter.rb
+- app/components/primer/open_project/sub_header/quick_action_component.rb
 - app/components/primer/open_project/sub_header/segmented_control.rb
 - app/components/primer/open_project/sub_header_element.d.ts
 - app/components/primer/open_project/sub_header_element.js