primer_view_components 0.45.1 → 0.47.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 +5 -5
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +11 -12
- data/app/components/primer/beta/avatar_stack.rb +4 -1
- 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/previews/primer/beta/avatar_stack_preview.rb +14 -2
- data/static/arguments.json +7 -7
- data/static/info_arch.json +39 -7
- data/static/previews.json +26 -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:not([data-disable-expand]) .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover:not([data-disable-expand]) .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover:not([data-disable-expand]) .avatar-more{display:none!important}.AvatarStack-body[data-disable-expand]{position:relative}.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:not([data-disable-expand]) .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}
|
|
@@ -11,15 +11,15 @@
|
|
|
11
11
|
":is(.AvatarStack-body .avatar):last-child",
|
|
12
12
|
":is(.AvatarStack-body .avatar) img",
|
|
13
13
|
":is(.AvatarStack-body .avatar):nth-child(n+4)",
|
|
14
|
-
".AvatarStack-body:hover .avatar",
|
|
15
|
-
".AvatarStack-body:hover .avatar:nth-child(n+4)",
|
|
16
|
-
".AvatarStack-body:hover .avatar-more",
|
|
14
|
+
".AvatarStack-body:hover:not([data-disable-expand]) .avatar",
|
|
15
|
+
".AvatarStack-body:hover:not([data-disable-expand]) .avatar:nth-child(n+4)",
|
|
16
|
+
".AvatarStack-body:hover:not([data-disable-expand]) .avatar-more",
|
|
17
|
+
".AvatarStack-body[data-disable-expand]",
|
|
17
18
|
".avatar.avatar-more",
|
|
18
19
|
".avatar.avatar-more:after",
|
|
19
20
|
".avatar.avatar-more:before",
|
|
20
21
|
".AvatarStack--right .AvatarStack-body",
|
|
21
|
-
":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
|
|
22
|
-
":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
|
|
22
|
+
":is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar",
|
|
23
23
|
".AvatarStack--right .avatar.avatar-more",
|
|
24
24
|
":is(.AvatarStack--right .avatar.avatar-more):before",
|
|
25
25
|
":is(.AvatarStack--right .avatar.avatar-more):after",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAUA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,YAwDF,CAnDE,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,2DACE,+BACF,CAEA,0EACE,YAAa,CACb,SACF,CAEA,gEACE,sBACF,CAGF,uCACE,iBACF,CAGF,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,oFAEE,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":["/* stylelint-disable selector-max-specificity */\n/* The selector-max-specificity rule is disabled here because the nested selectors\n in AvatarStack require high specificity to properly override default styles and \n achieve the intended visual stacking. */\n\n/* 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:not([data-disable-expand]) {\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 &[data-disable-expand] {\n position: relative;\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:not([data-disable-expand]) .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"]}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/* stylelint-disable selector-max-specificity */
|
|
2
|
+
/* The selector-max-specificity rule is disabled here because the nested selectors
|
|
3
|
+
in AvatarStack require high specificity to properly override default styles and
|
|
4
|
+
achieve the intended visual stacking. */
|
|
5
|
+
|
|
1
6
|
/* AvatarStack */
|
|
2
7
|
|
|
3
8
|
/* Stacked avatars can be used to show who is participating in thread when
|
|
@@ -37,8 +42,6 @@
|
|
|
37
42
|
/* stylelint-disable-next-line primer/spacing */
|
|
38
43
|
margin-right: -11px;
|
|
39
44
|
background-color: var(--bgColor-default);
|
|
40
|
-
/* stylelint-disable-next-line primer/colors */
|
|
41
|
-
border-right: var(--borderWidth-thin) solid var(--bgColor-default);
|
|
42
45
|
border-radius: var(--borderRadius-small);
|
|
43
46
|
transition: margin 0.1s ease-in-out;
|
|
44
47
|
|
|
@@ -48,7 +51,6 @@
|
|
|
48
51
|
|
|
49
52
|
&:last-child {
|
|
50
53
|
z-index: 1;
|
|
51
|
-
border-right: 0;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
/* stylelint-disable-next-line selector-max-type */
|
|
@@ -63,7 +65,7 @@
|
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
|
|
66
|
-
&:hover {
|
|
68
|
+
&:hover:not([data-disable-expand]) {
|
|
67
69
|
& .avatar {
|
|
68
70
|
margin-right: var(--base-size-4);
|
|
69
71
|
}
|
|
@@ -77,6 +79,10 @@
|
|
|
77
79
|
display: none !important;
|
|
78
80
|
}
|
|
79
81
|
}
|
|
82
|
+
|
|
83
|
+
&[data-disable-expand] {
|
|
84
|
+
position: relative;
|
|
85
|
+
}
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
.avatar.avatar-more {
|
|
@@ -113,14 +119,10 @@
|
|
|
113
119
|
right: 0;
|
|
114
120
|
flex-direction: row-reverse;
|
|
115
121
|
|
|
116
|
-
&:hover .avatar {
|
|
122
|
+
&:hover:not([data-disable-expand]) .avatar {
|
|
117
123
|
margin-right: 0;
|
|
118
124
|
margin-left: var(--base-size-4);
|
|
119
125
|
}
|
|
120
|
-
|
|
121
|
-
& .avatar:not(:last-child) {
|
|
122
|
-
border-left: 0;
|
|
123
|
-
}
|
|
124
126
|
}
|
|
125
127
|
|
|
126
128
|
& .avatar.avatar-more {
|
|
@@ -140,8 +142,5 @@
|
|
|
140
142
|
margin-right: 0;
|
|
141
143
|
/* stylelint-disable-next-line primer/spacing */
|
|
142
144
|
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
145
|
}
|
|
147
146
|
}
|
|
@@ -22,14 +22,16 @@ module Primer
|
|
|
22
22
|
# @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
|
|
23
23
|
# @param align [Symbol] <%= one_of(Primer::Beta::AvatarStack::ALIGN_OPTIONS) %>
|
|
24
24
|
# @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
|
|
25
|
+
# @param disable_expand [Boolean] Whether to disable the expand behavior on hover. If true, avatars will not expand.
|
|
25
26
|
# @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
|
|
26
27
|
# The default tag is <%= pretty_value(Primer::Beta::AvatarStack::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
|
|
27
28
|
# to <%= one_of(Primer::Beta::AvatarStack::BODY_TAG_OPTIONS, lower: true) %>
|
|
28
29
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
29
|
-
def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
|
|
30
|
+
def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, disable_expand: false, body_arguments: {}, **system_arguments)
|
|
30
31
|
@align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
|
|
31
32
|
@system_arguments = system_arguments
|
|
32
33
|
@tooltipped = tooltipped
|
|
34
|
+
@disable_expand = disable_expand
|
|
33
35
|
@body_arguments = body_arguments
|
|
34
36
|
@direction = @body_arguments[:direction]
|
|
35
37
|
|
|
@@ -39,6 +41,7 @@ module Primer
|
|
|
39
41
|
"AvatarStack-body",
|
|
40
42
|
@body_arguments[:classes]
|
|
41
43
|
)
|
|
44
|
+
@body_arguments[:"data-disable-expand"] = true if @disable_expand
|
|
42
45
|
|
|
43
46
|
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
|
44
47
|
@system_arguments[:classes] = class_names(
|
|
@@ -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
|
|
@@ -11,8 +11,9 @@ module Primer
|
|
|
11
11
|
# @param align select [["Left", left], ["Right", right]]
|
|
12
12
|
# @param tooltipped toggle
|
|
13
13
|
# @param tooltip_label text
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
# @param disable_expand toggle
|
|
15
|
+
def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!", disable_expand: false)
|
|
16
|
+
render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, disable_expand: disable_expand, body_arguments: { label: tooltip_label })) do |component|
|
|
16
17
|
Array.new(number_of_avatars&.to_i || 1) do
|
|
17
18
|
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
18
19
|
end
|
|
@@ -97,6 +98,17 @@ module Primer
|
|
|
97
98
|
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
|
|
98
99
|
end
|
|
99
100
|
end
|
|
101
|
+
|
|
102
|
+
# @label With disabled expand
|
|
103
|
+
def with_disabled_expand
|
|
104
|
+
render(Primer::Beta::AvatarStack.new(disable_expand: true)) do |component|
|
|
105
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
106
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
107
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
108
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
109
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
110
|
+
end
|
|
111
|
+
end
|
|
100
112
|
#
|
|
101
113
|
# @!endgroup
|
|
102
114
|
end
|
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",
|
|
@@ -3954,6 +3948,12 @@
|
|
|
3954
3948
|
"default": "`false`",
|
|
3955
3949
|
"description": "Whether to add a tooltip to the stack or not."
|
|
3956
3950
|
},
|
|
3951
|
+
{
|
|
3952
|
+
"name": "disable_expand",
|
|
3953
|
+
"type": "Boolean",
|
|
3954
|
+
"default": "`false`",
|
|
3955
|
+
"description": "Whether to disable the expand behavior on hover. If true, avatars will not expand."
|
|
3956
|
+
},
|
|
3957
3957
|
{
|
|
3958
3958
|
"name": "body_arguments",
|
|
3959
3959
|
"type": "Hash",
|
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",
|
|
@@ -12153,6 +12166,12 @@
|
|
|
12153
12166
|
"default": "`false`",
|
|
12154
12167
|
"description": "Whether to add a tooltip to the stack or not."
|
|
12155
12168
|
},
|
|
12169
|
+
{
|
|
12170
|
+
"name": "disable_expand",
|
|
12171
|
+
"type": "Boolean",
|
|
12172
|
+
"default": "`false`",
|
|
12173
|
+
"description": "Whether to disable the expand behavior on hover. If true, avatars will not expand."
|
|
12174
|
+
},
|
|
12156
12175
|
{
|
|
12157
12176
|
"name": "body_arguments",
|
|
12158
12177
|
"type": "Hash",
|
|
@@ -12298,6 +12317,19 @@
|
|
|
12298
12317
|
"color-contrast"
|
|
12299
12318
|
]
|
|
12300
12319
|
}
|
|
12320
|
+
},
|
|
12321
|
+
{
|
|
12322
|
+
"preview_path": "primer/beta/avatar_stack/with_disabled_expand",
|
|
12323
|
+
"name": "with_disabled_expand",
|
|
12324
|
+
"snapshot": "false",
|
|
12325
|
+
"skip_rules": {
|
|
12326
|
+
"wont_fix": [
|
|
12327
|
+
"region"
|
|
12328
|
+
],
|
|
12329
|
+
"will_fix": [
|
|
12330
|
+
"color-contrast"
|
|
12331
|
+
]
|
|
12332
|
+
}
|
|
12301
12333
|
}
|
|
12302
12334
|
],
|
|
12303
12335
|
"subcomponents": []
|
data/static/previews.json
CHANGED
|
@@ -1469,6 +1469,19 @@
|
|
|
1469
1469
|
"color-contrast"
|
|
1470
1470
|
]
|
|
1471
1471
|
}
|
|
1472
|
+
},
|
|
1473
|
+
{
|
|
1474
|
+
"preview_path": "primer/beta/avatar_stack/with_disabled_expand",
|
|
1475
|
+
"name": "with_disabled_expand",
|
|
1476
|
+
"snapshot": "false",
|
|
1477
|
+
"skip_rules": {
|
|
1478
|
+
"wont_fix": [
|
|
1479
|
+
"region"
|
|
1480
|
+
],
|
|
1481
|
+
"will_fix": [
|
|
1482
|
+
"color-contrast"
|
|
1483
|
+
]
|
|
1484
|
+
}
|
|
1472
1485
|
}
|
|
1473
1486
|
]
|
|
1474
1487
|
},
|
|
@@ -6156,6 +6169,19 @@
|
|
|
6156
6169
|
]
|
|
6157
6170
|
}
|
|
6158
6171
|
},
|
|
6172
|
+
{
|
|
6173
|
+
"preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
|
|
6174
|
+
"name": "select_panel_with_icon_button",
|
|
6175
|
+
"snapshot": "interactive",
|
|
6176
|
+
"skip_rules": {
|
|
6177
|
+
"wont_fix": [
|
|
6178
|
+
"region"
|
|
6179
|
+
],
|
|
6180
|
+
"will_fix": [
|
|
6181
|
+
"color-contrast"
|
|
6182
|
+
]
|
|
6183
|
+
}
|
|
6184
|
+
},
|
|
6159
6185
|
{
|
|
6160
6186
|
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
|
6161
6187
|
"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.47.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-
|
|
11
|
+
date: 2025-11-18 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
|