openproject-primer_view_components 0.75.2 → 0.77.0

data/app/components/primer/alpha/select_panel.rb

@@ -354,8 +354,7 @@ module Primer
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
-      # @param form_arguments [Hash] Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag.
-      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923.
+      # @param form_arguments [Hash] Form arguments. Supported for all fetch strategies.
       # @param show_filter [Boolean] Whether or not to show the filter input.
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
@@ -377,7 +376,6 @@ module Primer
         dynamic_label_prefix: nil,
         dynamic_aria_label_prefix: nil,
         body_id: nil,
-        use_experimental_non_local_form: false,
         list_arguments: {},
         form_arguments: {},
         show_filter: true,
@@ -411,13 +409,11 @@ module Primer
         @loading_label = loading_label
         @loading_description_id = nil
 
-        if use_experimental_non_local_form
-          @form_builder = form_arguments[:builder]
-          @value = form_arguments[:value]
-          @input_name = form_arguments[:name]
-        end
+        @form_builder = form_arguments[:builder]
+        @value = form_arguments[:value]
+        @input_name = form_arguments[:name]
 
-        @list_form_arguments = use_experimental_non_local_form ? {} : form_arguments
+        @list_form_arguments = {}
 
         if loading_description.present?
           @loading_description_id = "#{@panel_id}-loading-description"
@@ -509,8 +505,9 @@ module Primer
 
       # Adds a show button (i.e. a button) that will open the panel when clicked.
       #
+      # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered.
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:id] = "#{@panel_id}-button"
 
         system_arguments[:aria] = merge_aria(
@@ -518,7 +515,11 @@ module Primer
           { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } }
         )
 
-        Primer::Beta::Button.new(**system_arguments)
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Customizable content for the error message that appears when items are fetched for the first time. This message

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

@@ -117,9 +117,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         }));
         if (!checkSuccess)
             return;
-        const currentlyChecked = !this.getNodeCheckedValue(node);
-        // disallow unchecking checked item in single-select mode
-        if (!currentlyChecked) {
+        if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false');
+        }
+        else {
             this.checkOnlyAtPath(path);
         }
         this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {

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

@@ -206,10 +206,9 @@ export class TreeViewElement extends HTMLElement {
 
     if (!checkSuccess) return
 
-    const currentlyChecked = !this.getNodeCheckedValue(node)
-
-    // disallow unchecking checked item in single-select mode
-    if (!currentlyChecked) {
+    if (this.getNodeCheckedValue(node) === 'true') {
+      this.setNodeCheckedValue(node, 'false')
+    } else {
       this.checkOnlyAtPath(path)
     }
 

data/app/components/primer/beta/avatar_stack.css

@@ -1 +1 @@
-.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{border-right:0;z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:var(--base-size-4);margin-right:0}:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:var(--base-size-4);margin-right:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{margin-left:-11px;margin-right:0}

data/app/components/primer/beta/avatar_stack.css.json

@@ -19,7 +19,6 @@
     ".avatar.avatar-more:before",
     ".AvatarStack--right .AvatarStack-body",
     ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
-    ":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
     ".AvatarStack--right .avatar.avatar-more",
     ":is(.AvatarStack--right .avatar.avatar-more):before",
     ":is(.AvatarStack--right .avatar.avatar-more):after",

data/app/components/primer/beta/avatar_stack.css.map

@@ -1 +1 @@
-{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,YAuDF,CAlDE,0BASE,uCAAwC,CAGxC,uCAAwC,CADxC,iEAAkE,CALlE,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAGZ,kBAAmB,CAPnB,iBAAkB,CAYlB,iCAAmC,CATnC,UAAW,CAFX,SAgCF,CAnBE,2CACE,SACF,CAEA,0CAEE,cAAe,CADf,SAEF,CAGA,mCACE,uCACF,CAGA,8CACE,YAAa,CACb,SACF,CAIA,gCACE,+BACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,+BAAgC,CADhC,cAAe,CADf,SAwBF,CApBE,qDAOE,iBAAkB,CAFlB,UAAW,CAFX,aAAc,CACd,WAAY,CAIZ,4DAA6D,CAN7D,iBAOF,CAEA,2BAEE,gDAAiD,CADjD,UAEF,CAEA,0BAEE,kDAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,yDAEE,8BAA+B,CAD/B,cAEF,CAEA,oEACE,aACF,CAGF,wCACE,kDAUF,CARE,oDACE,SACF,CAEA,mDAEE,+BAAgC,CADhC,SAEF,CAGF,4BAME,gEAAiE,CAFjE,cAAe,CADf,iBAAkB,CAFlB,cAMF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    /* stylelint-disable-next-line primer/colors */\n    border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    /* stylelint-disable-next-line selector-max-type */\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: var(--base-size-4);\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: var(--base-size-4);\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -11px;\n    border-right: 0;\n    /* stylelint-disable-next-line primer/colors */\n    border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n}\n"]}
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,YAoDF,CA/CE,0BASE,uCAAwC,CACxC,uCAAwC,CAJxC,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAGZ,kBAAmB,CAPnB,iBAAkB,CAUlB,iCAAmC,CAPnC,UAAW,CAFX,SA6BF,CAlBE,2CACE,SACF,CAEA,0CACE,SACF,CAGA,mCACE,uCACF,CAGA,8CACE,YAAa,CACb,SACF,CAIA,gCACE,+BACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,+BAAgC,CADhC,cAAe,CADf,SAwBF,CApBE,qDAOE,iBAAkB,CAFlB,UAAW,CAFX,aAAc,CACd,WAAY,CAIZ,4DAA6D,CAN7D,iBAOF,CAEA,2BAEE,gDAAiD,CADjD,UAEF,CAEA,0BAEE,kDAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAOF,CAJE,yDAEE,8BAA+B,CAD/B,cAEF,CAGF,wCACE,kDAUF,CARE,oDACE,SACF,CAEA,mDAEE,+BAAgC,CADhC,SAEF,CAGF,4BAGE,iBAAkB,CAFlB,cAGF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n    }\n\n    /* stylelint-disable-next-line selector-max-type */\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: var(--base-size-4);\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: var(--base-size-4);\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -11px;\n  }\n}\n"]}

data/app/components/primer/beta/avatar_stack.pcss

@@ -37,8 +37,6 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
-    /* stylelint-disable-next-line primer/colors */
-    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
 
@@ -48,7 +46,6 @@
 
     &:last-child {
       z-index: 1;
-      border-right: 0;
     }
 
     /* stylelint-disable-next-line selector-max-type */
@@ -117,10 +114,6 @@
       margin-right: 0;
       margin-left: var(--base-size-4);
     }
-
-    & .avatar:not(:last-child) {
-      border-left: 0;
-    }
   }
 
   & .avatar.avatar-more {
@@ -140,8 +133,5 @@
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
-    border-right: 0;
-    /* stylelint-disable-next-line primer/colors */
-    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{height:var(--control-small-size)}

data/app/components/primer/open_project/page_header.css.json

@@ -15,6 +15,8 @@
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader--noBreadcrumb .PageHeader-contextBar",
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAGA,+CACE,gCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb .PageHeader-titleBar {\n  height: var(--control-small-size);\n}"]}

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

@@ -83,3 +83,15 @@
 .PageHeader-parentLink {
   flex: 1 1 auto;
 }
+
+/* Hide the context bar on desktop when no breadcrumb is visible */
+@media screen and (min-width: 543.98px) {
+  .PageHeader--noBreadcrumb .PageHeader-contextBar {
+    display: none;
+  }
+}
+
+/* Match the title bar height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb .PageHeader-titleBar {
+  height: var(--control-small-size);
+}

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

@@ -40,7 +40,6 @@ module Primer
           "PageHeader-title",
           "PageHeader-title--#{variant}"
         )
-
         Primer::OpenProject::PageHeader::Title.new(state: @state, **system_arguments)
       }
 
@@ -181,12 +180,17 @@ module Primer
         Primer::Beta::IconButton.new(icon: icon, **system_arguments)
       }
 
-      # Optional breadcrumbs above the title row
-      # By default shown on wider screens. Can be overridden with system_argument: display
-      #
+      # Using PageHeader without breadcrumbs is only recommended in special cases.
+      # In doubt, please check the PageHeader component documentation.
       # @param items [Array<String, Hash>] Items is an array of strings, hash {href, text} or an anchor tag string
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :breadcrumbs, lambda { |items, selected_item_font_weight: :bold, **system_arguments|
+        if items.nil?
+          # No breadcrumbs → mark the PageHeader with a special class
+          @system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--noBreadcrumb")
+          return
+        end
+
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 

data/lib/primer/view_components/version.rb

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

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

@@ -11,7 +11,6 @@
     open_on_load: open_on_load,
     dynamic_label: true,
     dynamic_label_prefix: "Item",
-    use_experimental_non_local_form: true,
     form_arguments: {
       name: :item,
       builder: builder,

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

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button(icon: :star, scheme: :invisible, "aria-label": 'Menu') %>
+
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview.rb

@@ -186,6 +186,14 @@ module Primer
         render_with_template(locals: { open_on_load: open_on_load })
       end
 
+      # @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 })
+      end
+
       # @!group With icons
 
       # @label With leading icons

data/previews/primer/open_project/page_header_preview.rb

@@ -191,6 +191,32 @@ module Primer
         end
       end
 
+      # @label Without breadcrumbs
+      # A PageHeader example that renders without breadcrumbs.
+      # This should only be done for *entry pages* (such as overview pages).
+      # In case of doubt, please check with the Dream team.
+      def without_breadcrumbs
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_breadcrumbs(nil)
+          header.with_description { "This PageHeader does not have any breadcrumbs." }
+          header.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
+          end
+        end
+      end
+
+      # @label With skipable breadcrumb items
+      def skip_breadcrumb_item
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Resize me to mobile screen size" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" },
+                                      { href: "/bar", text: "Bar", skip_for_mobile: true },
+                                      "Baz"])
+        end
+      end
+
       # @label With tab nav
       #
       def tab_nav
@@ -257,16 +283,6 @@ module Primer
         end
       end
 
-      # @label With skipable breadcrumb items
-      def skip_breadcrumb_item
-        render(Primer::OpenProject::PageHeader.new) do |component|
-          component.with_title { "Resize me to mobile screen size" }
-          component.with_breadcrumbs([{ href: "/foo", text: "Foo" },
-                                      { href: "/bar", text: "Bar", skip_for_mobile: true },
-                                       "Baz"])
-        end
-      end
-
       # @label With a link in the description
       def description
         render_with_template(template: "primer/open_project/page_header_preview/description")

data/static/arguments.json

@@ -2607,13 +2607,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",

data/static/classes.json

@@ -481,6 +481,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--noBreadcrumb": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader--withTabNav": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/info_arch.json

@@ -7854,13 +7854,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",
@@ -7940,6 +7934,12 @@
         "name": "show_button",
         "description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
         "parameters": [
+          {
+            "name": "icon",
+            "type": "String",
+            "default": "N/A",
+            "description": "Name of {{link_to_octicons}} to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered."
+          },
           {
             "name": "system_arguments",
             "type": "Hash",
@@ -8263,6 +8263,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",
@@ -20363,7 +20376,7 @@
       },
       {
         "name": "breadcrumbs",
-        "description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
+        "description": "Using PageHeader without breadcrumbs is only recommended in special cases.\nIn doubt, please check the PageHeader component documentation.",
         "parameters": [
           {
             "name": "items",
@@ -20551,8 +20564,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20564,8 +20577,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20577,8 +20590,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20590,8 +20603,21 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

data/static/previews.json

@@ -6184,8 +6184,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6197,8 +6197,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6210,8 +6210,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6223,8 +6223,21 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -7248,6 +7261,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.75.2
+  version: 0.77.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-13 00:00:00.000000000 Z
+date: 2025-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -45,14 +45,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.29.0
+        version: 19.30.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.29.0
+        version: 19.30.1
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -1055,6 +1055,7 @@ files:
 - previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb
 - previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb
 - previews/primer/alpha/select_panel_preview/scroll_container.html.erb
+- previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb
 - previews/primer/alpha/select_panel_preview/single_select.html.erb
 - previews/primer/alpha/select_panel_preview/single_select_form.html.erb
 - previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb