@openproject/primer-view-components 0.84.5 → 0.85.0

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

@@ -154,8 +154,8 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
                 side: this.side,
                 anchorOffset: 4,
             });
-            this.dialog.style.top = `${top}px`;
-            this.dialog.style.left = `${left}px`;
+            this.dialog.style.top = `${Math.round(top)}px`;
+            this.dialog.style.left = `${Math.round(left)}px`;
             this.dialog.style.bottom = 'auto';
             this.dialog.style.right = 'auto';
         }

package/app/components/primer/open_project/sub_header.css

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:543.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--stack-gap-normal)}}
+.SubHeader{align-items:baseline;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center;white-space:nowrap}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;flex-wrap:wrap;grid-area:left;row-gap:var(--base-size-16);width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:767.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--expandedSearch{grid-template-areas:"left left" "middle middle" "bottom bottom"}.SubHeader--expandedSearch .SubHeader-hiddenOnExpand{display:none!important}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--base-size-16)}}

package/app/components/primer/open_project/sub_header.css.json

@@ -2,7 +2,6 @@
   "name": "open_project/sub_header",
   "selectors": [
     ".SubHeader",
-    ".SubHeader--expandedSearch",
     ".SubHeader-rightPane",
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",
@@ -10,6 +9,8 @@
     ":is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto)",
     ".SubHeader-filterContainer",
     ".SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction",
+    ".SubHeader--expandedSearch",
+    ".SubHeader--expandedSearch .SubHeader-hiddenOnExpand",
     ".SubHeader--emptyLeftPane",
     ".SubHeader--emptyLeftPane .SubHeader-middlePane",
     ".SubHeader-middlePane:has(>*)"

package/app/components/primer/open_project/sub_header_element.d.ts

@@ -1,7 +1,7 @@
 declare class SubHeaderElement extends HTMLElement {
     filterInput: HTMLInputElement;
-    hiddenItemsOnExpandedFilter: HTMLElement[];
     shownItemsOnExpandedFilter: HTMLElement[];
+    filterExpandButton: HTMLElement[];
     connectedCallback(): void;
     setupFilterInputClearButton(): void;
     toggleFilterInputClearButton(): void;

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

@@ -23,17 +23,17 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         }
     }
     expandFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
-            item.classList.add('d-none');
-        }
         for (const item of this.shownItemsOnExpandedFilter) {
             item.classList.remove('d-none');
         }
+        for (const item of this.filterExpandButton) {
+            item.classList.add('d-none');
+        }
         this.classList.add('SubHeader--expandedSearch');
         this.filterInput.focus();
     }
     collapseFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
+        for (const item of this.filterExpandButton) {
             item.classList.remove('d-none');
         }
         for (const item of this.shownItemsOnExpandedFilter) {
@@ -63,10 +63,10 @@ __decorate([
 ], SubHeaderElement.prototype, "filterInput", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
     controller
 ], SubHeaderElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.84.5",
+  "version": "0.85.0",
   "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

@@ -6473,6 +6473,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
     "parameters": [
+      {
+        "name": "collapsed_search",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

package/static/constants.json

@@ -1978,8 +1978,8 @@
       "none",
       "flex"
     ],
+    "FILTER_EXPAND_BUTTON_TARGET_SELECTOR": "sub-header.filterExpandButton",
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::GeneratedSlotMethods",
-    "HIDDEN_FILTER_TARGET_SELECTOR": "sub-header.hiddenItemsOnExpandedFilter",
     "MOBILE_ACTIONS_DISPLAY": [
       "flex",
       "none"

package/static/info_arch.json

@@ -8102,7 +8102,7 @@
       {
         "preview_path": "primer/alpha/select_panel/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8115,7 +8115,7 @@
       {
         "preview_path": "primer/alpha/select_panel/local_fetch",
         "name": "local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8128,7 +8128,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch",
         "name": "eventually_local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8141,7 +8141,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch",
         "name": "remote_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8154,7 +8154,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_label",
         "name": "custom_loading_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8167,7 +8167,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_description",
         "name": "custom_loading_description",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8180,7 +8180,7 @@
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8193,7 +8193,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
         "name": "eventually_local_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8206,7 +8206,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
         "name": "remote_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8219,7 +8219,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select",
         "name": "single_select",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8232,7 +8232,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect",
         "name": "multiselect",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8245,7 +8245,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_dynamic_label",
         "name": "with_dynamic_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8258,7 +8258,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_dynamic_label_and_aria_prefix",
         "name": "with_dynamic_label_and_aria_prefix",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8271,7 +8271,7 @@
       {
         "preview_path": "primer/alpha/select_panel/footer_buttons",
         "name": "footer_buttons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8284,7 +8284,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_avatar_items",
         "name": "with_avatar_items",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8297,7 +8297,7 @@
       {
         "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
         "name": "select_panel_with_icon_button",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8310,7 +8310,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8323,7 +8323,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_trailing_icons",
         "name": "with_trailing_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8336,7 +8336,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_subtitle",
         "name": "with_subtitle",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8349,7 +8349,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
         "name": "remote_fetch_initial_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8362,7 +8362,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
         "name": "remote_fetch_filter_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8375,7 +8375,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
         "name": "eventually_local_fetch_initial_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8388,7 +8388,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select_form",
         "name": "single_select_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8401,7 +8401,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_form",
         "name": "remote_fetch_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8414,7 +8414,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect_form",
         "name": "multiselect_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8427,7 +8427,7 @@
       {
         "preview_path": "primer/alpha/select_panel/list_of_links",
         "name": "list_of_links",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8440,7 +8440,7 @@
       {
         "preview_path": "primer/alpha/select_panel/no_values",
         "name": "no_values",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9368,7 +9368,7 @@
       {
         "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
         "name": "with_character_limit_over_limit",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9907,7 +9907,7 @@
       {
         "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
         "name": "with_character_limit_over_limit",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -21649,6 +21649,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
     "parameters": [
+      {
+        "name": "collapsed_search",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -21672,6 +21678,11 @@
         "description": "A button or custom content that will render on the left-hand side of the component, next to the filter input.\n\nTo render a button, call the `with_filter_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_filter_component` method and pass a block that returns HTML.",
         "parameters": []
       },
+      {
+        "name": "quick_filters",
+        "description": "Quick filters shown in the left pane next to the search bar (0–5 items).\nHidden on mobile. Requires all_filters_button to be set when used.\nSupports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.",
+        "parameters": []
+      },
       {
         "name": "segmented_control",
         "description": null,
@@ -21781,6 +21792,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/sub_header/collapsed_search",
+        "name": "collapsed_search",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/quick_filters",
+        "name": "quick_filters",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/sub_header/bottom_pane",
         "name": "bottom_pane",