openproject-primer_view_components 0.75.1 → 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.
@@ -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 `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag.
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
- if use_experimental_non_local_form
415
- @form_builder = form_arguments[:builder]
416
- @value = form_arguments[:value]
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 = use_experimental_non_local_form ? {} : 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 { |**system_arguments|
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
- Primer::Beta::Button.new(**system_arguments)
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
@@ -84,8 +84,8 @@ module Primer
84
84
 
85
85
  @system_arguments[:src] = @src if @src
86
86
 
87
- @on_label = on_label || "On"
88
- @off_label = off_label || "Off"
87
+ @on_label = on_label || I18n.t("toggle_switch.label_on")
88
+ @off_label = off_label || I18n.t("toggle_switch.label_off")
89
89
  end
90
90
 
91
91
  def on?
@@ -117,9 +117,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
117
117
  }));
118
118
  if (!checkSuccess)
119
119
  return;
120
- const currentlyChecked = !this.getNodeCheckedValue(node);
121
- // disallow unchecking checked item in single-select mode
122
- if (!currentlyChecked) {
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
- const currentlyChecked = !this.getNodeCheckedValue(node)
210
-
211
- // disallow unchecking checked item in single-select mode
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);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}
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,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"]}
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
  }
@@ -15,6 +15,10 @@ en:
15
15
  include_sub_items: "Include sub-items"
16
16
  no_results_text: "No results"
17
17
 
18
+ toggle_switch:
19
+ label_on: "On"
20
+ label_off: "Off"
21
+
18
22
  label_title: "Title"
19
23
  label_loading: "Loading..."
20
24
  label_more: "More"
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 75
9
- PATCH = 1
8
+ MINOR = 76
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -11,7 +11,6 @@
11
11
  open_on_load: open_on_load,
12
12
  dynamic_label: true,
13
13
  dynamic_label_prefix: "Item",
14
- use_experimental_non_local_form: true,
15
14
  form_arguments: {
16
15
  name: :item,
17
16
  builder: builder,
@@ -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
@@ -2607,13 +2607,7 @@
2607
2607
  "name": "form_arguments",
2608
2608
  "type": "Hash",
2609
2609
  "default": "`{}`",
2610
- "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
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",
@@ -7854,13 +7854,7 @@
7854
7854
  "name": "form_arguments",
7855
7855
  "type": "Hash",
7856
7856
  "default": "`{}`",
7857
- "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
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.75.1
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-10-10 00:00:00.000000000 Z
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.29.0
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.29.0
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