@openproject/primer-view-components 0.86.2-rc.9bb5c7250 → 0.87.0-rc.482ee0ea9

package/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 {

package/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');

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.86.2-rc.9bb5c7250",
+  "version": "0.87.0-rc.482ee0ea9",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -6599,6 +6599,15 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::SubHeader::QuickActionComponent",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "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": []
+  },
   {
     "component": "OpenProject::SubHeader::SegmentedControl",
     "status": "open_project",

package/static/audited_at.json

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

package/static/constants.json

@@ -1984,16 +1984,19 @@
     "Button": "Primer::OpenProject::SubHeader::Button",
     "ButtonGroup": "Primer::OpenProject::SubHeader::ButtonGroup",
     "DESKTOP_ACTIONS_DISPLAY": [
+      "none",
       "none",
       "flex"
     ],
     "FILTER_EXPAND_BUTTON_TARGET_SELECTOR": "sub-header.filterExpandButton",
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::GeneratedSlotMethods",
     "MOBILE_ACTIONS_DISPLAY": [
+      "flex",
       "flex",
       "none"
     ],
     "Menu": "Primer::OpenProject::SubHeader::Menu",
+    "QuickActionComponent": "Primer::OpenProject::SubHeader::QuickActionComponent",
     "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter",
     "SegmentedControl": "Primer::OpenProject::SubHeader::SegmentedControl"
   },
@@ -2006,6 +2009,9 @@
   "Primer::OpenProject::SubHeader::Menu": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::Menu::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::SubHeader::QuickActionComponent": {
+    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickActionComponent::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::SubHeader::SegmentedControl": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"
   },

package/static/info_arch.json

@@ -22107,6 +22107,25 @@
     "previews": [],
     "subcomponents": []
   },
+  {
+    "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::QuickActionComponent",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "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": [],
+    "slots": [],
+    "methods": [],
+    "previews": [],
+    "subcomponents": []
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::SubHeader::SegmentedControl",
     "description": "A Helper class to create SegmentedControls inside the SubHeader action slot\nDo not use standalone",

package/static/statuses.json

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