openproject-primer_view_components 0.75.2 → 0.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
 - data/CHANGELOG.md +14 -0
 - data/app/assets/javascripts/primer_view_components.js +1 -1
 - data/app/assets/javascripts/primer_view_components.js.map +1 -1
 - data/app/assets/styles/primer_view_components.css +1 -1
 - data/app/assets/styles/primer_view_components.css.map +1 -1
 - data/app/components/primer/alpha/select_panel.rb +12 -11
 - data/app/components/primer/alpha/tree_view/tree_view.js +4 -3
 - data/app/components/primer/alpha/tree_view/tree_view.ts +3 -4
 - data/app/components/primer/beta/avatar_stack.css +1 -1
 - data/app/components/primer/beta/avatar_stack.css.json +0 -1
 - data/app/components/primer/beta/avatar_stack.css.map +1 -1
 - data/app/components/primer/beta/avatar_stack.pcss +0 -10
 - data/lib/primer/view_components/version.rb +2 -2
 - data/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb +0 -1
 - data/previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb +19 -0
 - data/previews/primer/alpha/select_panel_preview.rb +8 -0
 - data/static/arguments.json +1 -7
 - data/static/info_arch.json +20 -7
 - data/static/previews.json +13 -0
 - metadata +5 -4
 
| 
         @@ -354,8 +354,7 @@ module Primer 
     | 
|
| 
       354 
354 
     | 
    
         
             
                  # @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.
         
     | 
| 
       355 
355 
     | 
    
         
             
                  # @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.
         
     | 
| 
       356 
356 
     | 
    
         
             
                  # @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.
         
     | 
| 
       357 
     | 
    
         
            -
                  # @param form_arguments [Hash] Form arguments. Supported for  
     | 
| 
       358 
     | 
    
         
            -
                  # @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.
         
     | 
| 
      
 357 
     | 
    
         
            +
                  # @param form_arguments [Hash] Form arguments. Supported for all fetch strategies.
         
     | 
| 
       359 
358 
     | 
    
         
             
                  # @param show_filter [Boolean] Whether or not to show the filter input.
         
     | 
| 
       360 
359 
     | 
    
         
             
                  # @param open_on_load [Boolean] Open the panel when the page loads.
         
     | 
| 
       361 
360 
     | 
    
         
             
                  # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
         
     | 
| 
         @@ -377,7 +376,6 @@ module Primer 
     | 
|
| 
       377 
376 
     | 
    
         
             
                    dynamic_label_prefix: nil,
         
     | 
| 
       378 
377 
     | 
    
         
             
                    dynamic_aria_label_prefix: nil,
         
     | 
| 
       379 
378 
     | 
    
         
             
                    body_id: nil,
         
     | 
| 
       380 
     | 
    
         
            -
                    use_experimental_non_local_form: false,
         
     | 
| 
       381 
379 
     | 
    
         
             
                    list_arguments: {},
         
     | 
| 
       382 
380 
     | 
    
         
             
                    form_arguments: {},
         
     | 
| 
       383 
381 
     | 
    
         
             
                    show_filter: true,
         
     | 
| 
         @@ -411,13 +409,11 @@ module Primer 
     | 
|
| 
       411 
409 
     | 
    
         
             
                    @loading_label = loading_label
         
     | 
| 
       412 
410 
     | 
    
         
             
                    @loading_description_id = nil
         
     | 
| 
       413 
411 
     | 
    
         | 
| 
       414 
     | 
    
         
            -
                     
     | 
| 
       415 
     | 
    
         
            -
             
     | 
| 
       416 
     | 
    
         
            -
             
     | 
| 
       417 
     | 
    
         
            -
                      @input_name = form_arguments[:name]
         
     | 
| 
       418 
     | 
    
         
            -
                    end
         
     | 
| 
      
 412 
     | 
    
         
            +
                    @form_builder = form_arguments[:builder]
         
     | 
| 
      
 413 
     | 
    
         
            +
                    @value = form_arguments[:value]
         
     | 
| 
      
 414 
     | 
    
         
            +
                    @input_name = form_arguments[:name]
         
     | 
| 
       419 
415 
     | 
    
         | 
| 
       420 
     | 
    
         
            -
                    @list_form_arguments =  
     | 
| 
      
 416 
     | 
    
         
            +
                    @list_form_arguments = {}
         
     | 
| 
       421 
417 
     | 
    
         | 
| 
       422 
418 
     | 
    
         
             
                    if loading_description.present?
         
     | 
| 
       423 
419 
     | 
    
         
             
                      @loading_description_id = "#{@panel_id}-loading-description"
         
     | 
| 
         @@ -509,8 +505,9 @@ module Primer 
     | 
|
| 
       509 
505 
     | 
    
         | 
| 
       510 
506 
     | 
    
         
             
                  # Adds a show button (i.e. a button) that will open the panel when clicked.
         
     | 
| 
       511 
507 
     | 
    
         
             
                  #
         
     | 
| 
      
 508 
     | 
    
         
            +
                  # @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.
         
     | 
| 
       512 
509 
     | 
    
         
             
                  # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
         
     | 
| 
       513 
     | 
    
         
            -
                  renders_one :show_button, lambda {  
     | 
| 
      
 510 
     | 
    
         
            +
                  renders_one :show_button, lambda { |icon: nil, **system_arguments|
         
     | 
| 
       514 
511 
     | 
    
         
             
                    system_arguments[:id] = "#{@panel_id}-button"
         
     | 
| 
       515 
512 
     | 
    
         | 
| 
       516 
513 
     | 
    
         
             
                    system_arguments[:aria] = merge_aria(
         
     | 
| 
         @@ -518,7 +515,11 @@ module Primer 
     | 
|
| 
       518 
515 
     | 
    
         
             
                      { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } }
         
     | 
| 
       519 
516 
     | 
    
         
             
                    )
         
     | 
| 
       520 
517 
     | 
    
         | 
| 
       521 
     | 
    
         
            -
                     
     | 
| 
      
 518 
     | 
    
         
            +
                    if icon.present?
         
     | 
| 
      
 519 
     | 
    
         
            +
                      Primer::Beta::IconButton.new(icon: icon, **system_arguments)
         
     | 
| 
      
 520 
     | 
    
         
            +
                    else
         
     | 
| 
      
 521 
     | 
    
         
            +
                      Primer::Beta::Button.new(**system_arguments)
         
     | 
| 
      
 522 
     | 
    
         
            +
                    end
         
     | 
| 
       522 
523 
     | 
    
         
             
                  }
         
     | 
| 
       523 
524 
     | 
    
         | 
| 
       524 
525 
     | 
    
         
             
                  # Customizable content for the error message that appears when items are fetched for the first time. This message
         
     | 
| 
         @@ -117,9 +117,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement { 
     | 
|
| 
       117 
117 
     | 
    
         
             
                    }));
         
     | 
| 
       118 
118 
     | 
    
         
             
                    if (!checkSuccess)
         
     | 
| 
       119 
119 
     | 
    
         
             
                        return;
         
     | 
| 
       120 
     | 
    
         
            -
                     
     | 
| 
       121 
     | 
    
         
            -
             
     | 
| 
       122 
     | 
    
         
            -
                     
     | 
| 
      
 120 
     | 
    
         
            +
                    if (this.getNodeCheckedValue(node) === 'true') {
         
     | 
| 
      
 121 
     | 
    
         
            +
                        this.setNodeCheckedValue(node, 'false');
         
     | 
| 
      
 122 
     | 
    
         
            +
                    }
         
     | 
| 
      
 123 
     | 
    
         
            +
                    else {
         
     | 
| 
       123 
124 
     | 
    
         
             
                        this.checkOnlyAtPath(path);
         
     | 
| 
       124 
125 
     | 
    
         
             
                    }
         
     | 
| 
       125 
126 
     | 
    
         
             
                    this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
         
     | 
| 
         @@ -206,10 +206,9 @@ export class TreeViewElement extends HTMLElement { 
     | 
|
| 
       206 
206 
     | 
    
         | 
| 
       207 
207 
     | 
    
         
             
                if (!checkSuccess) return
         
     | 
| 
       208 
208 
     | 
    
         | 
| 
       209 
     | 
    
         
            -
                 
     | 
| 
       210 
     | 
    
         
            -
             
     | 
| 
       211 
     | 
    
         
            -
                 
     | 
| 
       212 
     | 
    
         
            -
                if (!currentlyChecked) {
         
     | 
| 
      
 209 
     | 
    
         
            +
                if (this.getNodeCheckedValue(node) === 'true') {
         
     | 
| 
      
 210 
     | 
    
         
            +
                  this.setNodeCheckedValue(node, 'false')
         
     | 
| 
      
 211 
     | 
    
         
            +
                } else {
         
     | 
| 
       213 
212 
     | 
    
         
             
                  this.checkOnlyAtPath(path)
         
     | 
| 
       214 
213 
     | 
    
         
             
                }
         
     | 
| 
       215 
214 
     | 
    
         | 
| 
         @@ -1 +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); 
     | 
| 
      
 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);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}
         
     | 
| 
         @@ -19,7 +19,6 @@ 
     | 
|
| 
       19 
19 
     | 
    
         
             
                ".avatar.avatar-more:before",
         
     | 
| 
       20 
20 
     | 
    
         
             
                ".AvatarStack--right .AvatarStack-body",
         
     | 
| 
       21 
21 
     | 
    
         
             
                ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
         
     | 
| 
       22 
     | 
    
         
            -
                ":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
         
     | 
| 
       23 
22 
     | 
    
         
             
                ".AvatarStack--right .avatar.avatar-more",
         
     | 
| 
       24 
23 
     | 
    
         
             
                ":is(.AvatarStack--right .avatar.avatar-more):before",
         
     | 
| 
       25 
24 
     | 
    
         
             
                ":is(.AvatarStack--right .avatar.avatar-more):after",
         
     | 
| 
         @@ -1 +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, 
     | 
| 
      
 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,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"]}
         
     | 
| 
         @@ -37,8 +37,6 @@ 
     | 
|
| 
       37 
37 
     | 
    
         
             
                /* stylelint-disable-next-line primer/spacing */
         
     | 
| 
       38 
38 
     | 
    
         
             
                margin-right: -11px;
         
     | 
| 
       39 
39 
     | 
    
         
             
                background-color: var(--bgColor-default);
         
     | 
| 
       40 
     | 
    
         
            -
                /* stylelint-disable-next-line primer/colors */
         
     | 
| 
       41 
     | 
    
         
            -
                border-right: var(--borderWidth-thin) solid var(--bgColor-default);
         
     | 
| 
       42 
40 
     | 
    
         
             
                border-radius: var(--borderRadius-small);
         
     | 
| 
       43 
41 
     | 
    
         
             
                transition: margin 0.1s ease-in-out;
         
     | 
| 
       44 
42 
     | 
    
         | 
| 
         @@ -48,7 +46,6 @@ 
     | 
|
| 
       48 
46 
     | 
    
         | 
| 
       49 
47 
     | 
    
         
             
                &:last-child {
         
     | 
| 
       50 
48 
     | 
    
         
             
                  z-index: 1;
         
     | 
| 
       51 
     | 
    
         
            -
                  border-right: 0;
         
     | 
| 
       52 
49 
     | 
    
         
             
                }
         
     | 
| 
       53 
50 
     | 
    
         | 
| 
       54 
51 
     | 
    
         
             
                /* stylelint-disable-next-line selector-max-type */
         
     | 
| 
         @@ -117,10 +114,6 @@ 
     | 
|
| 
       117 
114 
     | 
    
         
             
                  margin-right: 0;
         
     | 
| 
       118 
115 
     | 
    
         
             
                  margin-left: var(--base-size-4);
         
     | 
| 
       119 
116 
     | 
    
         
             
                }
         
     | 
| 
       120 
     | 
    
         
            -
             
     | 
| 
       121 
     | 
    
         
            -
                & .avatar:not(:last-child) {
         
     | 
| 
       122 
     | 
    
         
            -
                  border-left: 0;
         
     | 
| 
       123 
     | 
    
         
            -
                }
         
     | 
| 
       124 
117 
     | 
    
         
             
              }
         
     | 
| 
       125 
118 
     | 
    
         | 
| 
       126 
119 
     | 
    
         
             
              & .avatar.avatar-more {
         
     | 
| 
         @@ -140,8 +133,5 @@ 
     | 
|
| 
       140 
133 
     | 
    
         
             
                margin-right: 0;
         
     | 
| 
       141 
134 
     | 
    
         
             
                /* stylelint-disable-next-line primer/spacing */
         
     | 
| 
       142 
135 
     | 
    
         
             
                margin-left: -11px;
         
     | 
| 
       143 
     | 
    
         
            -
                border-right: 0;
         
     | 
| 
       144 
     | 
    
         
            -
                /* stylelint-disable-next-line primer/colors */
         
     | 
| 
       145 
     | 
    
         
            -
                border-left: var(--borderWidth-thin) solid var(--bgColor-default);
         
     | 
| 
       146 
136 
     | 
    
         
             
              }
         
     | 
| 
       147 
137 
     | 
    
         
             
            }
         
     | 
| 
         @@ -0,0 +1,19 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            <% subject_id = SecureRandom.hex %>
         
     | 
| 
      
 2 
     | 
    
         
            +
             
     | 
| 
      
 3 
     | 
    
         
            +
            <%= render(Primer::Alpha::SelectPanel.new(
         
     | 
| 
      
 4 
     | 
    
         
            +
              data: { interaction_subject: subject_id },
         
     | 
| 
      
 5 
     | 
    
         
            +
              select_variant: :single,
         
     | 
| 
      
 6 
     | 
    
         
            +
              fetch_strategy: :local,
         
     | 
| 
      
 7 
     | 
    
         
            +
              dynamic_label: true,
         
     | 
| 
      
 8 
     | 
    
         
            +
              dynamic_label_prefix: "Item",
         
     | 
| 
      
 9 
     | 
    
         
            +
              dynamic_aria_label_prefix: "Selected item",
         
     | 
| 
      
 10 
     | 
    
         
            +
              open_on_load: open_on_load
         
     | 
| 
      
 11 
     | 
    
         
            +
            )) do |panel| %>
         
     | 
| 
      
 12 
     | 
    
         
            +
              <% panel.with_show_button(icon: :star, scheme: :invisible, "aria-label": 'Menu') %>
         
     | 
| 
      
 13 
     | 
    
         
            +
             
     | 
| 
      
 14 
     | 
    
         
            +
              <% panel.with_item(label: "Item 1") %>
         
     | 
| 
      
 15 
     | 
    
         
            +
              <% panel.with_item(label: "Item 2") %>
         
     | 
| 
      
 16 
     | 
    
         
            +
              <% panel.with_item(label: "Item 3") %>
         
     | 
| 
      
 17 
     | 
    
         
            +
            <% end %>
         
     | 
| 
      
 18 
     | 
    
         
            +
             
     | 
| 
      
 19 
     | 
    
         
            +
            <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
         
     | 
| 
         @@ -186,6 +186,14 @@ module Primer 
     | 
|
| 
       186 
186 
     | 
    
         
             
                    render_with_template(locals: { open_on_load: open_on_load })
         
     | 
| 
       187 
187 
     | 
    
         
             
                  end
         
     | 
| 
       188 
188 
     | 
    
         | 
| 
      
 189 
     | 
    
         
            +
                  # @label SelectPanel with Primer::IconButton
         
     | 
| 
      
 190 
     | 
    
         
            +
                  #
         
     | 
| 
      
 191 
     | 
    
         
            +
                  # @snapshot interactive
         
     | 
| 
      
 192 
     | 
    
         
            +
                  # @param open_on_load toggle
         
     | 
| 
      
 193 
     | 
    
         
            +
                  def select_panel_with_icon_button(open_on_load: false)
         
     | 
| 
      
 194 
     | 
    
         
            +
                    render_with_template(locals: { open_on_load: open_on_load })
         
     | 
| 
      
 195 
     | 
    
         
            +
                  end
         
     | 
| 
      
 196 
     | 
    
         
            +
             
     | 
| 
       189 
197 
     | 
    
         
             
                  # @!group With icons
         
     | 
| 
       190 
198 
     | 
    
         | 
| 
       191 
199 
     | 
    
         
             
                  # @label With leading icons
         
     | 
    
        data/static/arguments.json
    CHANGED
    
    | 
         @@ -2607,13 +2607,7 @@ 
     | 
|
| 
       2607 
2607 
     | 
    
         
             
                    "name": "form_arguments",
         
     | 
| 
       2608 
2608 
     | 
    
         
             
                    "type": "Hash",
         
     | 
| 
       2609 
2609 
     | 
    
         
             
                    "default": "`{}`",
         
     | 
| 
       2610 
     | 
    
         
            -
                    "description": "Form arguments. Supported for  
     | 
| 
       2611 
     | 
    
         
            -
                  },
         
     | 
| 
       2612 
     | 
    
         
            -
                  {
         
     | 
| 
       2613 
     | 
    
         
            -
                    "name": "use_experimental_non_local_form",
         
     | 
| 
       2614 
     | 
    
         
            -
                    "type": "Boolean",
         
     | 
| 
       2615 
     | 
    
         
            -
                    "default": "`false`",
         
     | 
| 
       2616 
     | 
    
         
            -
                    "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."
         
     | 
| 
      
 2610 
     | 
    
         
            +
                    "description": "Form arguments. Supported for all fetch strategies."
         
     | 
| 
       2617 
2611 
     | 
    
         
             
                  },
         
     | 
| 
       2618 
2612 
     | 
    
         
             
                  {
         
     | 
| 
       2619 
2613 
     | 
    
         
             
                    "name": "show_filter",
         
     | 
    
        data/static/info_arch.json
    CHANGED
    
    | 
         @@ -7854,13 +7854,7 @@ 
     | 
|
| 
       7854 
7854 
     | 
    
         
             
                    "name": "form_arguments",
         
     | 
| 
       7855 
7855 
     | 
    
         
             
                    "type": "Hash",
         
     | 
| 
       7856 
7856 
     | 
    
         
             
                    "default": "`{}`",
         
     | 
| 
       7857 
     | 
    
         
            -
                    "description": "Form arguments. Supported for  
     | 
| 
       7858 
     | 
    
         
            -
                  },
         
     | 
| 
       7859 
     | 
    
         
            -
                  {
         
     | 
| 
       7860 
     | 
    
         
            -
                    "name": "use_experimental_non_local_form",
         
     | 
| 
       7861 
     | 
    
         
            -
                    "type": "Boolean",
         
     | 
| 
       7862 
     | 
    
         
            -
                    "default": "`false`",
         
     | 
| 
       7863 
     | 
    
         
            -
                    "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."
         
     | 
| 
      
 7857 
     | 
    
         
            +
                    "description": "Form arguments. Supported for all fetch strategies."
         
     | 
| 
       7864 
7858 
     | 
    
         
             
                  },
         
     | 
| 
       7865 
7859 
     | 
    
         
             
                  {
         
     | 
| 
       7866 
7860 
     | 
    
         
             
                    "name": "show_filter",
         
     | 
| 
         @@ -7940,6 +7934,12 @@ 
     | 
|
| 
       7940 
7934 
     | 
    
         
             
                    "name": "show_button",
         
     | 
| 
       7941 
7935 
     | 
    
         
             
                    "description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
         
     | 
| 
       7942 
7936 
     | 
    
         
             
                    "parameters": [
         
     | 
| 
      
 7937 
     | 
    
         
            +
                      {
         
     | 
| 
      
 7938 
     | 
    
         
            +
                        "name": "icon",
         
     | 
| 
      
 7939 
     | 
    
         
            +
                        "type": "String",
         
     | 
| 
      
 7940 
     | 
    
         
            +
                        "default": "N/A",
         
     | 
| 
      
 7941 
     | 
    
         
            +
                        "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."
         
     | 
| 
      
 7942 
     | 
    
         
            +
                      },
         
     | 
| 
       7943 
7943 
     | 
    
         
             
                      {
         
     | 
| 
       7944 
7944 
     | 
    
         
             
                        "name": "system_arguments",
         
     | 
| 
       7945 
7945 
     | 
    
         
             
                        "type": "Hash",
         
     | 
| 
         @@ -8263,6 +8263,19 @@ 
     | 
|
| 
       8263 
8263 
     | 
    
         
             
                      ]
         
     | 
| 
       8264 
8264 
     | 
    
         
             
                    }
         
     | 
| 
       8265 
8265 
     | 
    
         
             
                  },
         
     | 
| 
      
 8266 
     | 
    
         
            +
                  {
         
     | 
| 
      
 8267 
     | 
    
         
            +
                    "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
         
     | 
| 
      
 8268 
     | 
    
         
            +
                    "name": "select_panel_with_icon_button",
         
     | 
| 
      
 8269 
     | 
    
         
            +
                    "snapshot": "interactive",
         
     | 
| 
      
 8270 
     | 
    
         
            +
                    "skip_rules": {
         
     | 
| 
      
 8271 
     | 
    
         
            +
                      "wont_fix": [
         
     | 
| 
      
 8272 
     | 
    
         
            +
                        "region"
         
     | 
| 
      
 8273 
     | 
    
         
            +
                      ],
         
     | 
| 
      
 8274 
     | 
    
         
            +
                      "will_fix": [
         
     | 
| 
      
 8275 
     | 
    
         
            +
                        "color-contrast"
         
     | 
| 
      
 8276 
     | 
    
         
            +
                      ]
         
     | 
| 
      
 8277 
     | 
    
         
            +
                    }
         
     | 
| 
      
 8278 
     | 
    
         
            +
                  },
         
     | 
| 
       8266 
8279 
     | 
    
         
             
                  {
         
     | 
| 
       8267 
8280 
     | 
    
         
             
                    "preview_path": "primer/alpha/select_panel/with_leading_icons",
         
     | 
| 
       8268 
8281 
     | 
    
         
             
                    "name": "with_leading_icons",
         
     | 
    
        data/static/previews.json
    CHANGED
    
    | 
         @@ -7248,6 +7248,19 @@ 
     | 
|
| 
       7248 
7248 
     | 
    
         
             
                      ]
         
     | 
| 
       7249 
7249 
     | 
    
         
             
                    }
         
     | 
| 
       7250 
7250 
     | 
    
         
             
                  },
         
     | 
| 
      
 7251 
     | 
    
         
            +
                  {
         
     | 
| 
      
 7252 
     | 
    
         
            +
                    "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
         
     | 
| 
      
 7253 
     | 
    
         
            +
                    "name": "select_panel_with_icon_button",
         
     | 
| 
      
 7254 
     | 
    
         
            +
                    "snapshot": "interactive",
         
     | 
| 
      
 7255 
     | 
    
         
            +
                    "skip_rules": {
         
     | 
| 
      
 7256 
     | 
    
         
            +
                      "wont_fix": [
         
     | 
| 
      
 7257 
     | 
    
         
            +
                        "region"
         
     | 
| 
      
 7258 
     | 
    
         
            +
                      ],
         
     | 
| 
      
 7259 
     | 
    
         
            +
                      "will_fix": [
         
     | 
| 
      
 7260 
     | 
    
         
            +
                        "color-contrast"
         
     | 
| 
      
 7261 
     | 
    
         
            +
                      ]
         
     | 
| 
      
 7262 
     | 
    
         
            +
                    }
         
     | 
| 
      
 7263 
     | 
    
         
            +
                  },
         
     | 
| 
       7251 
7264 
     | 
    
         
             
                  {
         
     | 
| 
       7252 
7265 
     | 
    
         
             
                    "preview_path": "primer/alpha/select_panel/with_leading_icons",
         
     | 
| 
       7253 
7266 
     | 
    
         
             
                    "name": "with_leading_icons",
         
     | 
    
        metadata
    CHANGED
    
    | 
         @@ -1,7 +1,7 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            --- !ruby/object:Gem::Specification
         
     | 
| 
       2 
2 
     | 
    
         
             
            name: openproject-primer_view_components
         
     | 
| 
       3 
3 
     | 
    
         
             
            version: !ruby/object:Gem::Version
         
     | 
| 
       4 
     | 
    
         
            -
              version: 0. 
     | 
| 
      
 4 
     | 
    
         
            +
              version: 0.76.0
         
     | 
| 
       5 
5 
     | 
    
         
             
            platform: ruby
         
     | 
| 
       6 
6 
     | 
    
         
             
            authors:
         
     | 
| 
       7 
7 
     | 
    
         
             
            - GitHub Open Source
         
     | 
| 
         @@ -9,7 +9,7 @@ authors: 
     | 
|
| 
       9 
9 
     | 
    
         
             
            autorequire:
         
     | 
| 
       10 
10 
     | 
    
         
             
            bindir: bin
         
     | 
| 
       11 
11 
     | 
    
         
             
            cert_chain: []
         
     | 
| 
       12 
     | 
    
         
            -
            date: 2025- 
     | 
| 
      
 12 
     | 
    
         
            +
            date: 2025-11-02 00:00:00.000000000 Z
         
     | 
| 
       13 
13 
     | 
    
         
             
            dependencies:
         
     | 
| 
       14 
14 
     | 
    
         
             
            - !ruby/object:Gem::Dependency
         
     | 
| 
       15 
15 
     | 
    
         
             
              name: actionview
         
     | 
| 
         @@ -45,14 +45,14 @@ dependencies: 
     | 
|
| 
       45 
45 
     | 
    
         
             
                requirements:
         
     | 
| 
       46 
46 
     | 
    
         
             
                - - ">="
         
     | 
| 
       47 
47 
     | 
    
         
             
                  - !ruby/object:Gem::Version
         
     | 
| 
       48 
     | 
    
         
            -
                    version: 19. 
     | 
| 
      
 48 
     | 
    
         
            +
                    version: 19.30.1
         
     | 
| 
       49 
49 
     | 
    
         
             
              type: :runtime
         
     | 
| 
       50 
50 
     | 
    
         
             
              prerelease: false
         
     | 
| 
       51 
51 
     | 
    
         
             
              version_requirements: !ruby/object:Gem::Requirement
         
     | 
| 
       52 
52 
     | 
    
         
             
                requirements:
         
     | 
| 
       53 
53 
     | 
    
         
             
                - - ">="
         
     | 
| 
       54 
54 
     | 
    
         
             
                  - !ruby/object:Gem::Version
         
     | 
| 
       55 
     | 
    
         
            -
                    version: 19. 
     | 
| 
      
 55 
     | 
    
         
            +
                    version: 19.30.1
         
     | 
| 
       56 
56 
     | 
    
         
             
            - !ruby/object:Gem::Dependency
         
     | 
| 
       57 
57 
     | 
    
         
             
              name: view_component
         
     | 
| 
       58 
58 
     | 
    
         
             
              requirement: !ruby/object:Gem::Requirement
         
     | 
| 
         @@ -1055,6 +1055,7 @@ files: 
     | 
|
| 
       1055 
1055 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb
         
     | 
| 
       1056 
1056 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb
         
     | 
| 
       1057 
1057 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/scroll_container.html.erb
         
     | 
| 
      
 1058 
     | 
    
         
            +
            - previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb
         
     | 
| 
       1058 
1059 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/single_select.html.erb
         
     | 
| 
       1059 
1060 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/single_select_form.html.erb
         
     | 
| 
       1060 
1061 
     | 
    
         
             
            - previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb
         
     |