Skip to content

Commit ef4ac3e

Browse files
broccolinibroccolini
authored
Merge pull request #385 from primer/avatar-stack
New Avatar stack
2 parents dd641e6 + 29f2689 commit ef4ac3e

File tree

3 files changed

+225
-6
lines changed

3 files changed

+225
-6
lines changed

‎modules/primer-avatars/README.md‎

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,62 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
7575

7676
### Avatar stack
7777

78-
Stacked avatars can be used to show who is participating in thread when there is limited space available. When you hover over the stack, the avatars will reveal themselves. Optimally, you should put no more than 3 avatars in the stack.
78+
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
7979

8080
```html
81-
<span class="avatar-stack tooltipped tooltipped-s" aria-label="jonrohan, aaronshekey, and josh">
82-
<img alt="@jonrohan" class="avatar" height="39" alt="jonrohan" src="/jonrohan.png" width="39">
83-
<img alt="@aaronshekey" class="avatar" height="39" alt="aaronshekey" src="/aaronshekey.png" width="39">
84-
<img alt="@josh" class="avatar" height="39" alt="josh" src="/josh.png" width="39">
85-
</span>
81+
<div class="AvatarStack AvatarStack--three-plus">
82+
<div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat, octocat, and octocat">
83+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
84+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
85+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
86+
</div>
87+
</div>
88+
```
89+
90+
Based on the number of avatars in the stack, add these modifier classes:
91+
- `AvatarStack--two` for 2 avatars.
92+
- `AvatarStack--three-plus` for 3 or more avatars.
93+
94+
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
95+
96+
```html
97+
<div class="AvatarStack AvatarStack--three-plus">
98+
<div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat, octocat, octocat, octocat, and octocat">
99+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
100+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
101+
<div class="avatar avatar-more"></div>
102+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
103+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
104+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
105+
</div>
106+
</div>
107+
```
108+
109+
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
110+
111+
```html
112+
<div class="AvatarStack AvatarStack--two">
113+
<div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat and octocat">
114+
<a href="#" class="avatar">
115+
<img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
116+
</a>
117+
<a href="#" class="avatar">
118+
<img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
119+
</a>
120+
</div>
121+
</div>
122+
```
123+
124+
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
125+
126+
```html
127+
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
128+
<div class="AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right" aria-label="octocat, octocat, and octocat">
129+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
130+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
131+
<img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
132+
</div>
133+
</div>
86134
```
87135

88136
## Circle Badge

‎modules/primer-avatars/lib/avatar-stack.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,137 @@
4343
}
4444
}
4545
}
46+
47+
// Refactored, new avatar stack:
48+
49+
.AvatarStack {
50+
position: relative;
51+
min-width: 26px;
52+
height: 20px;
53+
54+
.AvatarStack-body {
55+
position: absolute;
56+
}
57+
58+
&.AvatarStack--two {
59+
min-width: 36px;
60+
}
61+
62+
&.AvatarStack--three-plus {
63+
min-width: 46px;
64+
}
65+
}
66+
67+
.AvatarStack-body {
68+
display: flex;
69+
background: $bg-white;
70+
71+
.avatar {
72+
position: relative;
73+
z-index: 2;
74+
display: flex;
75+
width: 20px;
76+
height: 20px;
77+
box-sizing: content-box;
78+
margin-right: -11px;
79+
background-color: $bg-white;
80+
border-right: $border-width $border-style $white;
81+
border-radius: 2px;
82+
transition: margin 0.1s ease-in-out;
83+
84+
&:first-child {
85+
z-index: 3;
86+
}
87+
88+
&:last-child {
89+
z-index: 1;
90+
}
91+
92+
// stylelint-disable selector-max-type
93+
img {
94+
border-radius: 2px;
95+
}
96+
// stylelint-enable selector-max-type
97+
98+
// Account for 4+ avatars
99+
&:nth-child(n+4) {
100+
display: none;
101+
opacity: 0;
102+
}
103+
}
104+
105+
&:hover {
106+
.avatar {
107+
margin-right: 3px;
108+
}
109+
110+
.avatar:nth-child(n+4) {
111+
display: flex;
112+
opacity: 1;
113+
}
114+
115+
.avatar-more {
116+
display: none !important;
117+
}
118+
}
119+
}
120+
121+
.avatar.avatar-more {
122+
z-index: 1;
123+
margin-right: 0;
124+
background: $gray-100;
125+
126+
&::before,
127+
&::after {
128+
position: absolute;
129+
display: block;
130+
height: 20px;
131+
content: "";
132+
border-radius: 2px;
133+
outline: $border-width $border-style $white;
134+
}
135+
136+
&::before {
137+
width: 17px;
138+
background: $gray-200;
139+
}
140+
141+
&::after {
142+
width: 14px;
143+
background: $gray-300;
144+
}
145+
}
146+
147+
// Right aligned variation
148+
149+
.AvatarStack--right {
150+
.AvatarStack-body {
151+
right: 0;
152+
flex-direction: row-reverse;
153+
154+
&:hover .avatar {
155+
margin-right: 0;
156+
margin-left: 3px;
157+
}
158+
}
159+
160+
.avatar.avatar-more {
161+
background: $gray-300;
162+
163+
&::before {
164+
width: 5px;
165+
}
166+
167+
&::after {
168+
width: 2px;
169+
background: $gray-100;
170+
}
171+
}
172+
173+
.avatar {
174+
margin-right: 0;
175+
margin-left: -11px;
176+
border-right: 0;
177+
border-left: $border-width $border-style $white;
178+
}
179+
}

‎modules/primer-avatars/stories.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,43 @@ storiesOf('Avatars', module)
2626
</div>
2727

2828
))
29+
.add('AvatarStack', () => (
30+
<div>
31+
<div className='AvatarStack AvatarStack-three-plus mb-2'>
32+
<div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='five avatars'>
33+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
34+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
35+
<div className='avatar-more avatar'></div>
36+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
37+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
38+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
39+
</div>
40+
</div>
41+
<div className='AvatarStack AvatarStack-two mb-2'>
42+
<div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='two avatars'>
43+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
44+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
45+
</div>
46+
</div>
47+
<div className='AvatarStack AvatarStack-three-plus AvatarStack--right mb-2'>
48+
<div className='AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right' aria-label='five avatars'>
49+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
50+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
51+
<div className='avatar-more avatar'></div>
52+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
53+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
54+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
55+
</div>
56+
</div>
57+
<div className='AvatarStack AvatarStack-two AvatarStack--right mb-2'>
58+
<div className='AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right' aria-label='two avatars'>
59+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
60+
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
61+
</div>
62+
</div>
63+
64+
</div>
65+
))
2966
.add('CircleBadge--small', () => (
3067
<div>
3168
<a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>

0 commit comments

Comments
 (0)