Merge pull request #385 from primer/avatar-stack

New Avatar stack
primer · Nov 14, 2017 · ef4ac3e · ef4ac3e
2 parents dd641e6 + 29f2689
commit ef4ac3e
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 6 deletions.
diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md
@@ -75,14 +75,62 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
 
 ### Avatar stack
 
-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.
+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.
 
 ```html
-<span class="avatar-stack tooltipped tooltipped-s" aria-label="jonrohan, aaronshekey, and josh">
-  <img alt="@jonrohan" class="avatar" height="39" alt="jonrohan" src="/jonrohan.png" width="39">
-  <img alt="@aaronshekey" class="avatar" height="39" alt="aaronshekey" src="/aaronshekey.png" width="39">
-  <img alt="@josh" class="avatar" height="39" alt="josh" src="/josh.png" width="39">
-</span>
+<div class="AvatarStack AvatarStack--three-plus">
+  <div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat, octocat, and octocat">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+  </div>
+</div>
+```
+
+Based on the number of avatars in the stack, add these modifier classes:
+- `AvatarStack--two` for 2 avatars.
+- `AvatarStack--three-plus` for 3 or more avatars.
+
+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:
+
+```html
+<div class="AvatarStack AvatarStack--three-plus">
+  <div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat, octocat, octocat, octocat, and octocat">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <div class="avatar avatar-more"></div>
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+  </div>
+</div>
+```
+
+You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
+
+```html
+<div class="AvatarStack AvatarStack--two">
+  <div class="AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left" aria-label="octocat and octocat">
+    <a href="#" class="avatar">
+      <img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    </a>
+    <a href="#" class="avatar">
+      <img height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    </a>
+  </div>
+</div>
+```
+
+Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
+
+```html
+<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
+  <div class="AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right" aria-label="octocat, octocat, and octocat">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+    <img class="avatar" height="20" alt="@octocat" src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" width="20">
+  </div>
+</div>
 ```
 
 ## Circle Badge

diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss
@@ -43,3 +43,137 @@
     }
   }
 }
+
+// Refactored, new avatar stack:
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+
+  .AvatarStack-body {
+    position: absolute;
+  }
+
+  &.AvatarStack--two {
+    min-width: 36px;
+  }
+
+  &.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+}
+
+.AvatarStack-body {
+  display: flex;
+  background: $bg-white;
+
+  .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    margin-right: -11px;
+    background-color: $bg-white;
+    border-right: $border-width $border-style $white;
+    border-radius: 2px;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+    }
+
+    // stylelint-disable selector-max-type
+    img {
+      border-radius: 2px;
+    }
+    // stylelint-enable selector-max-type
+
+    // Account for 4+ avatars
+    &:nth-child(n+4) {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    .avatar {
+      margin-right: 3px;
+    }
+
+    .avatar:nth-child(n+4) {
+      display: flex;
+      opacity: 1;
+    }
+
+    .avatar-more {
+      display: none !important;
+    }
+  }
+}
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: $gray-100;
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: "";
+    border-radius: 2px;
+    outline: $border-width $border-style $white;
+  }
+
+  &::before {
+    width: 17px;
+    background: $gray-200;
+  }
+
+  &::after {
+    width: 14px;
+    background: $gray-300;
+  }
+}
+
+// Right aligned variation
+
+.AvatarStack--right {
+  .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+
+    &:hover .avatar {
+      margin-right: 0;
+      margin-left: 3px;
+    }
+  }
+
+  .avatar.avatar-more {
+    background: $gray-300;
+
+    &::before {
+      width: 5px;
+    }
+
+    &::after {
+      width: 2px;
+      background: $gray-100;
+    }
+  }
+
+  .avatar {
+    margin-right: 0;
+    margin-left: -11px;
+    border-right: 0;
+    border-left: $border-width $border-style $white;
+  }
+}
diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js
@@ -26,6 +26,43 @@ storiesOf('Avatars', module)
   </div>
 
 ))
+.add('AvatarStack', () => (
+  <div>
+    <div className='AvatarStack AvatarStack-three-plus mb-2'>
+      <div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='five avatars'>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <div className='avatar-more avatar'></div>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      </div>
+    </div>
+    <div className='AvatarStack AvatarStack-two mb-2'>
+      <div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='two avatars'>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      </div>
+    </div>
+    <div className='AvatarStack AvatarStack-three-plus AvatarStack--right mb-2'>
+      <div className='AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right' aria-label='five avatars'>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <div className='avatar-more avatar'></div>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      </div>
+    </div>
+    <div className='AvatarStack AvatarStack-two AvatarStack--right mb-2'>
+      <div className='AvatarStack-body tooltipped tooltipped-sw temp-tooltipped-align-right' aria-label='two avatars'>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+        <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      </div>
+    </div>
+
+  </div>
+))
 .add('CircleBadge--small', () => (
   <div>
     <a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>