primer_view_components 0.45.0 → 0.46.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 +18 -0
- 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/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/app/components/primer/beta/avatar_stack.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- 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 +3 -2
|
@@ -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
|
|
@@ -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
|
@@ -2502,13 +2502,7 @@
|
|
|
2502
2502
|
"name": "form_arguments",
|
|
2503
2503
|
"type": "Hash",
|
|
2504
2504
|
"default": "`{}`",
|
|
2505
|
-
"description": "Form arguments. Supported for
|
|
2506
|
-
},
|
|
2507
|
-
{
|
|
2508
|
-
"name": "use_experimental_non_local_form",
|
|
2509
|
-
"type": "Boolean",
|
|
2510
|
-
"default": "`false`",
|
|
2511
|
-
"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."
|
|
2505
|
+
"description": "Form arguments. Supported for all fetch strategies."
|
|
2512
2506
|
},
|
|
2513
2507
|
{
|
|
2514
2508
|
"name": "show_filter",
|
data/static/info_arch.json
CHANGED
|
@@ -7358,13 +7358,7 @@
|
|
|
7358
7358
|
"name": "form_arguments",
|
|
7359
7359
|
"type": "Hash",
|
|
7360
7360
|
"default": "`{}`",
|
|
7361
|
-
"description": "Form arguments. Supported for
|
|
7362
|
-
},
|
|
7363
|
-
{
|
|
7364
|
-
"name": "use_experimental_non_local_form",
|
|
7365
|
-
"type": "Boolean",
|
|
7366
|
-
"default": "`false`",
|
|
7367
|
-
"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."
|
|
7361
|
+
"description": "Form arguments. Supported for all fetch strategies."
|
|
7368
7362
|
},
|
|
7369
7363
|
{
|
|
7370
7364
|
"name": "show_filter",
|
|
@@ -7444,6 +7438,12 @@
|
|
|
7444
7438
|
"name": "show_button",
|
|
7445
7439
|
"description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
|
|
7446
7440
|
"parameters": [
|
|
7441
|
+
{
|
|
7442
|
+
"name": "icon",
|
|
7443
|
+
"type": "String",
|
|
7444
|
+
"default": "N/A",
|
|
7445
|
+
"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."
|
|
7446
|
+
},
|
|
7447
7447
|
{
|
|
7448
7448
|
"name": "system_arguments",
|
|
7449
7449
|
"type": "Hash",
|
|
@@ -7767,6 +7767,19 @@
|
|
|
7767
7767
|
]
|
|
7768
7768
|
}
|
|
7769
7769
|
},
|
|
7770
|
+
{
|
|
7771
|
+
"preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
|
|
7772
|
+
"name": "select_panel_with_icon_button",
|
|
7773
|
+
"snapshot": "interactive",
|
|
7774
|
+
"skip_rules": {
|
|
7775
|
+
"wont_fix": [
|
|
7776
|
+
"region"
|
|
7777
|
+
],
|
|
7778
|
+
"will_fix": [
|
|
7779
|
+
"color-contrast"
|
|
7780
|
+
]
|
|
7781
|
+
}
|
|
7782
|
+
},
|
|
7770
7783
|
{
|
|
7771
7784
|
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
|
7772
7785
|
"name": "with_leading_icons",
|
data/static/previews.json
CHANGED
|
@@ -6156,6 +6156,19 @@
|
|
|
6156
6156
|
]
|
|
6157
6157
|
}
|
|
6158
6158
|
},
|
|
6159
|
+
{
|
|
6160
|
+
"preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
|
|
6161
|
+
"name": "select_panel_with_icon_button",
|
|
6162
|
+
"snapshot": "interactive",
|
|
6163
|
+
"skip_rules": {
|
|
6164
|
+
"wont_fix": [
|
|
6165
|
+
"region"
|
|
6166
|
+
],
|
|
6167
|
+
"will_fix": [
|
|
6168
|
+
"color-contrast"
|
|
6169
|
+
]
|
|
6170
|
+
}
|
|
6171
|
+
},
|
|
6159
6172
|
{
|
|
6160
6173
|
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
|
6161
6174
|
"name": "with_leading_icons",
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.46.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-10-
|
|
11
|
+
date: 2025-10-15 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -924,6 +924,7 @@ files:
|
|
|
924
924
|
- previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb
|
|
925
925
|
- previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb
|
|
926
926
|
- previews/primer/alpha/select_panel_preview/scroll_container.html.erb
|
|
927
|
+
- previews/primer/alpha/select_panel_preview/select_panel_with_icon_button.html.erb
|
|
927
928
|
- previews/primer/alpha/select_panel_preview/single_select.html.erb
|
|
928
929
|
- previews/primer/alpha/select_panel_preview/single_select_form.html.erb
|
|
929
930
|
- previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb
|