Merge pull request #400 from primer/release-10.1.0

Release 10.1.0

Author: broccolini

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 10.1.0 (2017-11-15)
+
+#### :rocket: Enhancement
+* [#385](https://github.com/primer/primer/pull/385) New Avatar stack. ([@califa](https://github.com/califa) & [@sophshep](https://github.com/sophshep))
+* [#404](https://github.com/primer/primer/pull/404) Tooltip component updates ([@broccolini](https://github.com/broccolini))
+
+#### :memo: Documentation
+* [#405](https://github.com/primer/primer/pull/405) Add deprecation warning for `.avatar-stack`. ([@jonrohan](https://github.com/jonrohan))
+* [#391](https://github.com/primer/primer/pull/391) Update shields.io url to https. ([@NuttasitBoonwat](https://github.com/NuttasitBoonwat))
+
+#### Committers: 5
+- Diana Mounter ([broccolini](https://github.com/broccolini))
+- Joel Califa ([califa](https://github.com/califa))
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Sophie Shepherd ([sophshep](https://github.com/sophshep))
+- [NuttasitBoonwat](https://github.com/NuttasitBoonwat)
+
 # 10.0.1 (2017-11-14)
 
 #### :bug: Bug Fix

README.md

@@ -1,6 +1,6 @@
 # Primer
 
-[![npm version](http://img.shields.io/npm/v/primer.svg)](https://www.npmjs.org/package/primer)
+[![npm version](https://img.shields.io/npm/v/primer.svg)](https://www.npmjs.org/package/primer)
 [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
 
 Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
@@ -13,10 +13,10 @@ The Primer repo is managed as a monorepo that is composed of many npm packages.
 
 | Package | Version |
 |---|---|
-| **[primer](/modules/primer)** <br />Includes all 23 packages | [![npm](http://img.shields.io/npm/v/primer.svg)](https://www.npmjs.com/package/primer) |
-| [primer-core](/modules/primer-core) | [![npm](http://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.com/package/primer-core) |
-| [primer-product](/modules/primer-product) |  [![npm](http://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.com/package/primer-product) |
-| [primer-marketing](/modules/primer-marketing) | [![npm](http://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.com/package/primer-marketing) |
+| **[primer](/modules/primer)** <br />Includes all 23 packages | [![npm](https://img.shields.io/npm/v/primer.svg)](https://www.npmjs.com/package/primer) |
+| [primer-core](/modules/primer-core) | [![npm](https://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.com/package/primer-core) |
+| [primer-product](/modules/primer-product) |  [![npm](https://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.com/package/primer-product) |
+| [primer-marketing](/modules/primer-marketing) | [![npm](https://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.com/package/primer-marketing) |
 
 ## Install
 

modules/primer-alerts/README.md

@@ -1,6 +1,6 @@
 # Primer Alerts
 
-[![npm version](http://img.shields.io/npm/v/primer-alerts.svg)](https://www.npmjs.org/package/primer-alerts)
+[![npm version](https://img.shields.io/npm/v/primer-alerts.svg)](https://www.npmjs.org/package/primer-alerts)
 [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
 
 > Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.

modules/primer-alerts/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.2",
+  "version": "1.5.3",
   "name": "primer-alerts",
   "description": "Flash messages, or alerts, inform users of successful or pending actions.",
   "homepage": "http://primer.github.io/",
@@ -27,7 +27,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.4.2"
+    "primer-support": "4.5.0"
   },
   "keywords": [
     "alerts",

modules/primer-avatars/README.md

@@ -1,6 +1,6 @@
 # Primer Avatars
 
-[![npm version](http://img.shields.io/npm/v/primer-avatars.svg)](https://www.npmjs.org/package/primer-avatars)
+[![npm version](https://img.shields.io/npm/v/primer-avatars.svg)](https://www.npmjs.org/package/primer-avatars)
 [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
 
 > Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
@@ -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 tooltipped-align-left-1" 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 tooltipped-align-left-1" 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 tooltipped-align-left-1" 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 tooltipped-align-right-1" 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

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

@@ -2,6 +2,8 @@
 // there is limited space available.
 //
 // No styleguide references
+@warn ".avatar-stack will be deprecated in version 11. Use .AvatarStack instead.";
+
 .avatar-stack {
   display: inline-block;
   white-space: nowrap;
@@ -43,3 +45,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;
+  }
+}

modules/primer-avatars/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.5.0",
   "name": "primer-avatars",
   "description": "Basic styles for user profile avatars.",
   "homepage": "http://primer.github.io/",
@@ -27,7 +27,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.4.2"
+    "primer-support": "4.5.0"
   },
   "keywords": [
     "avatars",

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 tooltipped-align-left-1' 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 tooltipped-align-left-1' 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 tooltipped-align-right-1' 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 tooltipped-align-right-1' 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'>

modules/primer-base/README.md

@@ -1,6 +1,6 @@
 # Primer Base
 
-[![npm version](http://img.shields.io/npm/v/primer-base.svg)](https://www.npmjs.org/package/primer-base)
+[![npm version](https://img.shields.io/npm/v/primer-base.svg)](https://www.npmjs.org/package/primer-base)
 [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
 
 > GitHub's CSS to reset the browsers default styles. Built on top of normalize.css

modules/primer-base/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "primer-base",
   "description": "CSS to reset the browsers default styles",
   "homepage": "http://primer.github.io/",
@@ -27,7 +27,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.4.2"
+    "primer-support": "4.5.0"
   },
   "keywords": [
     "primer",