openproject-primer_view_components 0.84.4 → 0.85.0

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

@@ -19,6 +19,7 @@ var _ActionMenuElement_instances, _a, _ActionMenuElement_abortController, _Actio
 var ActionMenuElement_1;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
+import AnchoredPositionElement from '../../anchored_position';
 import { observeMutationsUntilConditionMet } from '../../utils';
 import { ActionMenuFocusZoneStack } from './action_menu_focus_zone_stack';
 import { ClipboardCopyElement } from '@github/clipboard-copy-element';
@@ -365,6 +366,9 @@ _ActionMenuElement_handleItemKeyboardEvent = function _ActionMenuElement_handleI
 };
 _ActionMenuElement_handleToggleEvent = function _ActionMenuElement_handleToggleEvent(event) {
     const subMenu = event.target;
+    // Ignore toggle events from non-anchored-position elements (e.g. tooltips inside the menu)
+    if (!(event.target instanceof AnchoredPositionElement))
+        return;
     if (event.newState === 'open') {
         // allow tabbing away from primary menu, but trap focus in sub-menus
         const isPrimaryMenu = subMenu === this.overlay;

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

@@ -346,6 +346,9 @@ export class ActionMenuElement extends HTMLElement {
   #handleToggleEvent(event: ToggleEvent) {
     const subMenu = event.target as AnchoredPositionElement
 
+    // Ignore toggle events from non-anchored-position elements (e.g. tooltips inside the menu)
+    if (!(event.target instanceof AnchoredPositionElement)) return
+
     if (event.newState === 'open') {
       // allow tabbing away from primary menu, but trap focus in sub-menus
       const isPrimaryMenu = subMenu === this.overlay

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 = 4
+      MINOR = 85
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb

@@ -1,18 +1,18 @@
 <%= form_with(url: primer_view_components.action_menu_form_action_path(format: route_format)) do |f| %>
-  <% content = -> (base) do %>
-    <% base.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
-    <% base.with_item(label: "Recursive", data: { value: "recursive" }) %>
-    <% base.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
-    <% base.with_item(label: "Resolve") %>
-  <% end %>
   <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
     <% menu.with_show_button { "Strategy" } %>
     <% if nest_in_sub_menu %>
       <% menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu| %>
-        <% content.call(sub_menu) %>
+        <% sub_menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+        <% sub_menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+        <% sub_menu.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
+        <% sub_menu.with_item(label: "Resolve") %>
       <% end %>
     <% else %>
-      <% content.call(menu) %>
+      <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      <% menu.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
+      <% menu.with_item(label: "Resolve") %>
     <% end %>
   <% end %>
   <hr>

data/previews/primer/alpha/action_menu_preview/opens_dialog.html.erb

@@ -1,21 +1,13 @@
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Menu" } %>
-  <% contents = -> (base) do %>
-    <% base.with_item(label: "Item", tag: :button, value: "") %>
-    <% base.with_item(
-      label: "Show dialog",
-      tag: :button,
-      content_arguments: { "data-show-dialog-id": "my-dialog" },
-      value: "",
-      scheme: :danger
-    ) %>
-  <% end %>
   <% if nest_in_sub_menu %>
     <% component.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
-      <% contents.call(sub_menu_item) %>
+      <% sub_menu_item.with_item(label: "Item", tag: :button, value: "") %>
+      <% sub_menu_item.with_item(label: "Show dialog", tag: :button, content_arguments: { "data-show-dialog-id": "my-dialog" }, value: "", scheme: :danger) %>
     <% end %>
   <% else %>
-    <% contents.call(component) %>
+    <% component.with_item(label: "Item", tag: :button, value: "") %>
+    <% component.with_item(label: "Show dialog", tag: :button, content_arguments: { "data-show-dialog-id": "my-dialog" }, value: "", scheme: :danger) %>
   <% end %>
 <% end %>
 

data/previews/primer/alpha/action_menu_preview/single_select_form_items.html.erb

@@ -1,42 +1,12 @@
-<% contents = -> (menu) do %>
-  <% menu.with_item(
-    label: "Repository",
-    href: primer_view_components.action_menu_form_action_path(format: route_format),
-    form_arguments: {
-      method: :post,
-      inputs: [{
-        name: "query",
-        value: "query"
-      }, {
-        name: "foo", # use "foo" here because that's what the controller expects
-        value: "group-by-repository",
-      }],
-    }
-  ) %>
-  <% menu.with_item(
-    label: "Date",
-    href: primer_view_components.action_menu_form_action_path(format: route_format),
-    form_arguments: {
-      method: :post,
-      inputs: [{
-        name: "query",
-        value: "query"
-      }, {
-        name: "foo", # use "foo" here because that's what the controller expects
-        value: "sort-by-date"
-      }]
-    }
-  ) %>
-<% end %>
-
 <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| %>
   <% menu.with_show_button { "Group By" } %>
-
   <% if nest_in_sub_menu %>
     <% menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
-      <% contents.call(sub_menu_item) %>
+      <% sub_menu_item.with_item(label: "Repository", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { method: :post, inputs: [{ name: "query", value: "query" }, { name: "foo", value: "group-by-repository" }] }) %>
+      <% sub_menu_item.with_item(label: "Date", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { method: :post, inputs: [{ name: "query", value: "query" }, { name: "foo", value: "sort-by-date" }] }) %>
     <% end %>
   <% else %>
-    <% contents.call(menu) %>
+    <% menu.with_item(label: "Repository", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { method: :post, inputs: [{ name: "query", value: "query" }, { name: "foo", value: "group-by-repository" }] }) %>
+    <% menu.with_item(label: "Date", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { method: :post, inputs: [{ name: "query", value: "query" }, { name: "foo", value: "sort-by-date" }] }) %>
   <% end %>
 <% end %>

data/previews/primer/alpha/action_menu_preview/with_actions.html.erb

@@ -8,24 +8,17 @@
 
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Trigger" } %>
-  <% contents = -> (base) do %>
-    <% base.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
-    <% base.with_item(label: "Navigate", tag: :a, content_arguments: { href: primer_view_components.action_menu_landing_path }, disabled: disable_items) %>
-    <% base.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
-    <% base.with_item(
-      label: "Submit form",
-      href: primer_view_components.action_menu_form_action_path(format: route_format),
-      form_arguments: {
-        name: "foo", value: "bar", method: :post
-      },
-      disabled: disable_items
-    ) %>
-  <% end %>
   <% if nest_in_sub_menu %>
     <% component.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
-      <% contents.call(sub_menu_item) %>
+      <% sub_menu_item.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+      <% sub_menu_item.with_item(label: "Navigate", tag: :a, content_arguments: { href: primer_view_components.action_menu_landing_path }, disabled: disable_items) %>
+      <% sub_menu_item.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
+      <% sub_menu_item.with_item(label: "Submit form", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { name: "foo", value: "bar", method: :post }, disabled: disable_items) %>
     <% end %>
   <% else %>
-    <% contents.call(component) %>
+    <% component.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+    <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: primer_view_components.action_menu_landing_path }, disabled: disable_items) %>
+    <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
+    <% component.with_item(label: "Submit form", href: primer_view_components.action_menu_form_action_path(format: route_format), form_arguments: { name: "foo", value: "bar", method: :post }, disabled: disable_items) %>
   <% end %>
 <% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -155,6 +155,7 @@ module Primer
         render(Primer::Alpha::ActionMenu.new) do |menu|
           menu.with_show_button(icon: :star, "aria-label": "Menu")
           menu.with_item(label: "Does something")
+          menu.with_item(label: "Does something else")
         end
       end