openproject-primer_view_components 0.84.5 → 0.85.0

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

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

@@ -176,8 +176,8 @@ export 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'
     }

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

data/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(>*)"

data/app/components/primer/open_project/sub_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CADb,cAAe,CAGf,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,kCACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader--expandedSearch {\n    grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 543.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--stack-gap-normal);\n    }\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,oBAAqB,CAHrB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBAAkB,CAClB,kBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAEb,cAAe,CAHf,cAAe,CAIf,2BAA4B,CAC5B,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,2BACI,+DACJ,CAEA,qDACI,sBACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,8BACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: baseline;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n    white-space: nowrap;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    row-gap: var(--base-size-16);\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 767.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--expandedSearch {\n        grid-template-areas: \"left left\" \"middle middle\" \"bottom bottom\";\n    }\n\n    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {\n        display: none !important;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--base-size-16);\n    }\n}\n"]}

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

@@ -2,16 +2,19 @@
   <div class="SubHeader-leftPane">
     <%= render @filter_container do %>
       <%= filter_input %>
-      <%= render @mobile_filter_cancel do
-        I18n.t("button_cancel")
-      end if @mobile_filter_cancel.present? %>
+      <%= render @collapsed_filter_cancel if @collapsed_filter_cancel.present? %>
     <% end if filter_input.present? %>
 
-    <%= render @mobile_filter_trigger if @mobile_filter_trigger.present? %>
+    <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
-    <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+    <%= render(Primer::BaseComponent.new(tag: :div, display: :flex)) do %>
+      <% quick_filters.each do |quick_filter| %>
+        <%= quick_filter %>
+      <% end %>
 
-    <%= filter_button %>
+      <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+      <%= filter_button %>
+    <% end %>
 
     <%= segmented_control %>
 
@@ -22,11 +25,11 @@
     <% end %>
   </div>
 
-  <div class="SubHeader-middlePane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+  <div class="SubHeader-middlePane SubHeader-hiddenOnExpand">
     <%= text %>
   </div>
 
-  <div class="SubHeader-rightPane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
+  <div class="SubHeader-rightPane SubHeader-hiddenOnExpand">
     <% actions.each do |action| %>
       <%= action %>
     <% end %>

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

@@ -4,14 +4,10 @@
     display: grid;
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
-    align-items: center;
+    align-items: baseline;
     margin-bottom: var(--base-size-16);
 }
 
-.SubHeader--expandedSearch {
-    grid-template-areas: "left left left" "bottom bottom bottom";
-}
-
 .SubHeader-rightPane {
     grid-area: right;
     display: flex;
@@ -22,6 +18,7 @@
 .SubHeader-middlePane {
     grid-area: middle;
     text-align: center;
+    white-space: nowrap;
 }
 
 .SubHeader-bottomPane {
@@ -32,6 +29,8 @@
     grid-area: left;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--base-size-16);
     width: 100%;
 
     /* Since the container is not full width (due to the grid around it)
@@ -54,12 +53,20 @@
   display: none;
 }
 
-@media (max-width: 543.98px) {
+@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;
@@ -76,6 +83,6 @@
     }
 
     .SubHeader-middlePane:has(> *) {
-        margin-top: var(--stack-gap-normal);
+        margin-top: var(--base-size-16);
     }
 }

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

@@ -7,8 +7,8 @@ module Primer
     class SubHeader < Primer::Component
       status :open_project
 
-      HIDDEN_FILTER_TARGET_SELECTOR = "sub-header.hiddenItemsOnExpandedFilter"
       SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
+      FILTER_EXPAND_BUTTON_TARGET_SELECTOR = "sub-header.filterExpandButton"
 
       MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
       DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
@@ -101,18 +101,23 @@ module Primer
           system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
         end
 
-        @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
-                                                              display: [:inline_flex, :none],
-                                                              aria: { label: label },
-                                                              mr: 2,
-                                                              "data-action": "click:sub-header#expandFilterInput",
-                                                              "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
+        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :none]
 
-        @mobile_filter_cancel = Primer::Beta::Button.new(scheme: :invisible,
-                                                         display: :none,
-                                                         data: {
-                                                           targets: SHOWN_FILTER_TARGET_SELECTOR,
-                                                           action: "click:sub-header#collapseFilterInput"})
+        @collapsed_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
+                                                                 display: trigger_display,
+                                                                 aria: { label: label },
+                                                                 mr: 2,
+                                                                 "data-action": "click:sub-header#expandFilterInput",
+                                                                 "data-targets": FILTER_EXPAND_BUTTON_TARGET_SELECTOR)
+
+        @collapsed_filter_cancel = Primer::Beta::IconButton.new(icon: :x,
+                                                                "aria-label": I18n.t(:button_cancel),
+                                                                scheme: :invisible,
+                                                                display: :none,
+                                                                data: {
+                                                                  targets: SHOWN_FILTER_TARGET_SELECTOR,
+                                                                  action: "click:sub-header#collapseFilterInput"
+                                                                })
 
 
         Primer::Alpha::TextField.new(name: name, label: label, **system_arguments)
@@ -165,6 +170,18 @@ 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.
+      # 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[:display] = DESKTOP_ACTIONS_DISPLAY
+
+        Primer::BaseComponent.new(**kwargs)
+      }
+
       renders_one :segmented_control, lambda { |**system_arguments, &block|
           deny_tag_argument(**system_arguments)
           system_arguments[:mr] ||= 2
@@ -182,6 +199,7 @@ module Primer
 
       renders_one :text, lambda { |**system_arguments|
         system_arguments[:font_weight] ||= :bold
+        system_arguments[:mx] ||= 2
 
         Primer::Beta::Text.new(**system_arguments)
       }
@@ -195,16 +213,18 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
-
+      # @param collapsed_search [Boolean] When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
+      def initialize(collapsed_search: false, **system_arguments)
+        @collapsed_search = collapsed_search
         @system_arguments = system_arguments
         @system_arguments[:tag] = :"sub-header"
 
+        filter_container_display = collapsed_search ? :none : DESKTOP_ACTIONS_DISPLAY
+
         @filter_container = Primer::BaseComponent.new(tag: :div,
                                                       classes: "SubHeader-filterContainer",
-                                                      display: DESKTOP_ACTIONS_DISPLAY,
-
+                                                      display: filter_container_display,
                                                       mr: 2,
                                                       data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
 
@@ -215,21 +235,22 @@ module Primer
       end
 
       def before_render
+        if quick_filters.any? && 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}."
+        end
+
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?
         )
       end
 
       def set_as_hidden_filter_target(system_arguments)
-        system_arguments[:data] ||= {}
-        system_arguments[:data] = merge_data(
-            system_arguments, {
-            data: {
-              targets: HIDDEN_FILTER_TARGET_SELECTOR,
-            }
-          }
-        )
+        system_arguments[:classes] = class_names(system_arguments[:classes], "SubHeader-hiddenOnExpand")
         system_arguments
       end
     end

data/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;

data/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);

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

@@ -3,8 +3,8 @@ import {controller, target, targets} from '@github/catalyst'
 @controller
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
-  @targets hiddenItemsOnExpandedFilter: HTMLElement[]
   @targets shownItemsOnExpandedFilter: HTMLElement[]
+  @targets filterExpandButton: HTMLElement[]
 
   connectedCallback() {
     this.setupFilterInputClearButton()
@@ -28,28 +28,23 @@ 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) {
       item.classList.add('d-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 = 84
-      PATCH = 5
+      MINOR = 85
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/select_panel_preview.rb

@@ -54,7 +54,6 @@ module Primer
 
       # @label Default
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def default(open_on_load: false, show_filter: true)
@@ -66,7 +65,6 @@ module Primer
 
       # @label Local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def local_fetch(open_on_load: false, show_filter: true)
@@ -75,7 +73,6 @@ module Primer
 
       # @label Eventually local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def eventually_local_fetch(open_on_load: false, show_filter: true)
@@ -84,7 +81,6 @@ module Primer
 
       # @label Remote fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch(open_on_load: false, selected_items: "Phaser")
@@ -93,7 +89,6 @@ module Primer
 
       # @label Custom loading label
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_label(open_on_load: false, selected_items: "Phaser")
@@ -102,7 +97,6 @@ module Primer
 
       # @label Custom loading description
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_description(open_on_load: false, selected_items: "Phaser")
@@ -111,7 +105,6 @@ module Primer
 
       # @label Local fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def local_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -119,7 +112,6 @@ module Primer
 
       # @label Eventually local fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def eventually_local_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -127,7 +119,6 @@ module Primer
 
       # @label Remote fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def remote_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -135,7 +126,6 @@ module Primer
 
       # @label Single select
       #
-      # @snapshot interactive
       # @param dynamic_label toggle
       # @param open_on_load toggle
       def single_select(dynamic_label: false, open_on_load: false)
@@ -144,7 +134,6 @@ module Primer
 
       # @label Multiselect
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def multiselect(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -154,7 +143,6 @@ module Primer
 
       # @label With dynamic label
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_dynamic_label(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -162,7 +150,6 @@ module Primer
 
       # @label With dynamic label and aria prefix
       #
-      # @snapshot interactive
       # @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 })
@@ -172,7 +159,6 @@ module Primer
 
       # @label Footer buttons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def footer_buttons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -180,7 +166,6 @@ module Primer
 
       # @label With avatar items
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_avatar_items(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -188,7 +173,6 @@ module Primer
 
       # @label SelectPanel with Primer::IconButton
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def select_panel_with_icon_button(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -198,7 +182,6 @@ module Primer
 
       # @label With leading icons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_leading_icons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -206,7 +189,6 @@ module Primer
 
       # @label With trailing icons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_trailing_icons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -216,7 +198,6 @@ module Primer
 
       # @label With subtitle
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_subtitle(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -224,7 +205,6 @@ module Primer
 
       # @label Remote fetch initial failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def remote_fetch_initial_failure(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -232,7 +212,6 @@ module Primer
 
       # @label Remote fetch filter failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param banner_scheme [Symbol] select [danger, warning]
       # @param show_results toggle
@@ -253,7 +232,6 @@ module Primer
 
       # @label Eventually local fetch initial failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def eventually_local_fetch_initial_failure(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -261,7 +239,6 @@ module Primer
 
       # @label Single-select form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def single_select_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
@@ -269,7 +246,6 @@ module Primer
 
       # @label Remote fetch form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch_form(open_on_load: false, selected_items: "Phaser",  route_format: :html)
@@ -278,7 +254,6 @@ module Primer
 
       # @label Multi-select form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def multiselect_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
@@ -286,7 +261,6 @@ module Primer
 
       # @label List of links
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def list_of_links(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -294,7 +268,6 @@ module Primer
 
       # @label No values
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def no_values(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })

data/previews/primer/alpha/text_area_preview.rb

@@ -107,7 +107,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-over-limit", name: "my-text-area-with-character-limit-over-limit", character_limit: 10, label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

data/previews/primer/alpha/text_field_preview.rb

@@ -236,7 +236,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-19", label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

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

@@ -0,0 +1,47 @@
+<%= render(Primer::OpenProject::SubHeader.new(collapsed_search: true)) do |component|
+  component.with_filter_input(name: "filter", label: "Filter")
+
+  component.with_filter_button(mobile_label: "All filters") do
+    "All filters"
+  end
+
+  component.with_quick_filter do
+    render(Primer::Alpha::SelectPanel.new(title: "Version",
+                                          select_variant: :single,
+                                          fetch_strategy: :local,
+                                          dynamic_label: true,
+                                          dynamic_label_prefix: "Version")) do |panel|
+      panel.with_show_button { "Version" }
+      panel.with_item(label: "1.0")
+      panel.with_item(label: "2.0")
+      panel.with_item(label: "2.1")
+    end
+  end
+
+  component.with_quick_filter do
+    render(Primer::Alpha::SelectPanel.new(title: "Assignee",
+                                          select_variant: :multiple,
+                                          fetch_strategy: :local,
+                                          dynamic_label: true,
+                                          dynamic_label_prefix: "Assignee")) do |panel|
+      panel.with_show_button { "Assignee" }
+      panel.with_avatar_item(username: "Alice", src: "https://avatars.githubusercontent.com/u/1?v=4")
+      panel.with_avatar_item(username: "Bob", src: "https://avatars.githubusercontent.com/u/2?v=4")
+      panel.with_avatar_item(username: "Carol", src: "https://avatars.githubusercontent.com/u/3?v=4")
+      panel.with_avatar_item(username: "Dave", src: "https://avatars.githubusercontent.com/u/4?v=4")
+      panel.with_avatar_item(username: "Eve", src: "https://avatars.githubusercontent.com/u/5?v=4")
+      panel.with_avatar_item(username: "Frank", src: "https://avatars.githubusercontent.com/u/6?v=4")
+      panel.with_avatar_item(username: "Grace", src: "https://avatars.githubusercontent.com/u/7?v=4")
+      panel.with_avatar_item(username: "Heidi", src: "https://avatars.githubusercontent.com/u/8?v=4")
+      panel.with_avatar_item(username: "Ivan", src: "https://avatars.githubusercontent.com/u/9?v=4")
+      panel.with_avatar_item(username: "Judy", src: "https://avatars.githubusercontent.com/u/10?v=4")
+      panel.with_footer(show_divider: true) do
+        render(Primer::Beta::Button.new(scheme: :primary)) { "Apply" }
+      end
+    end
+  end
+
+  component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+    "Create"
+  end
+end %>