primer_view_components 0.46.0 → 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 +6 -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/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.json +5 -4
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +11 -2
- data/app/components/primer/beta/avatar_stack.rb +4 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/beta/avatar_stack_preview.rb +14 -2
- data/static/arguments.json +6 -0
- data/static/info_arch.json +19 -0
- data/static/previews.json +13 -0
- metadata +2 -2
|
@@ -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);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}
|
|
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,14 +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):hover:not([data-disable-expand]) .avatar",
|
|
22
23
|
".AvatarStack--right .avatar.avatar-more",
|
|
23
24
|
":is(.AvatarStack--right .avatar.avatar-more):before",
|
|
24
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
|
|
@@ -60,7 +65,7 @@
|
|
|
60
65
|
}
|
|
61
66
|
}
|
|
62
67
|
|
|
63
|
-
&:hover {
|
|
68
|
+
&:hover:not([data-disable-expand]) {
|
|
64
69
|
& .avatar {
|
|
65
70
|
margin-right: var(--base-size-4);
|
|
66
71
|
}
|
|
@@ -74,6 +79,10 @@
|
|
|
74
79
|
display: none !important;
|
|
75
80
|
}
|
|
76
81
|
}
|
|
82
|
+
|
|
83
|
+
&[data-disable-expand] {
|
|
84
|
+
position: relative;
|
|
85
|
+
}
|
|
77
86
|
}
|
|
78
87
|
|
|
79
88
|
.avatar.avatar-more {
|
|
@@ -110,7 +119,7 @@
|
|
|
110
119
|
right: 0;
|
|
111
120
|
flex-direction: row-reverse;
|
|
112
121
|
|
|
113
|
-
&:hover .avatar {
|
|
122
|
+
&:hover:not([data-disable-expand]) .avatar {
|
|
114
123
|
margin-right: 0;
|
|
115
124
|
margin-left: var(--base-size-4);
|
|
116
125
|
}
|
|
@@ -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(
|
|
@@ -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
|
@@ -3948,6 +3948,12 @@
|
|
|
3948
3948
|
"default": "`false`",
|
|
3949
3949
|
"description": "Whether to add a tooltip to the stack or not."
|
|
3950
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
|
+
},
|
|
3951
3957
|
{
|
|
3952
3958
|
"name": "body_arguments",
|
|
3953
3959
|
"type": "Hash",
|
data/static/info_arch.json
CHANGED
|
@@ -12166,6 +12166,12 @@
|
|
|
12166
12166
|
"default": "`false`",
|
|
12167
12167
|
"description": "Whether to add a tooltip to the stack or not."
|
|
12168
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
|
+
},
|
|
12169
12175
|
{
|
|
12170
12176
|
"name": "body_arguments",
|
|
12171
12177
|
"type": "Hash",
|
|
@@ -12311,6 +12317,19 @@
|
|
|
12311
12317
|
"color-contrast"
|
|
12312
12318
|
]
|
|
12313
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
|
+
}
|
|
12314
12333
|
}
|
|
12315
12334
|
],
|
|
12316
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
|
},
|
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
|