diff --git a/CHANGELOG.md b/CHANGELOG.md index c740c752de..f3328adbb2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 2863a4fcd9..5b07f7be6d 100644 --- a/README.md +++ b/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)**
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)**
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 diff --git a/modules/primer-alerts/README.md b/modules/primer-alerts/README.md index eba57bc1c6..3f0b9a6d38 100644 --- a/modules/primer-alerts/README.md +++ b/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. diff --git a/modules/primer-alerts/package.json b/modules/primer-alerts/package.json index 5d0b2cb265..88eb955ffb 100644 --- a/modules/primer-alerts/package.json +++ b/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", diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index c2e1d98c8b..cfda4f495c 100644 --- a/modules/primer-avatars/README.md +++ b/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 - - @jonrohan - @aaronshekey - @josh - +
+
+ @octocat + @octocat + @octocat +
+
+``` + +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 +
+
+ @octocat + @octocat +
+ @octocat + @octocat + @octocat +
+
+``` + +You can also link individual avatars. To do this shift the `avatar` class over to the anchor: + +```html +
+
+ + @octocat + + + @octocat + +
+
+``` + +Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change. + +```html +
+
+ @octocat + @octocat + @octocat +
+
``` ## Circle Badge diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 884f6a528d..285b85077f 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/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; + } +} diff --git a/modules/primer-avatars/package.json b/modules/primer-avatars/package.json index 0557724c19..2fa7fddb36 100644 --- a/modules/primer-avatars/package.json +++ b/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", diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index cf9aec8a7a..e969727a1c 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -26,6 +26,43 @@ storiesOf('Avatars', module) )) +.add('AvatarStack', () => ( +
+
+
+ Uncle Cat + Uncle Cat +
+ Uncle Cat + Uncle Cat + Uncle Cat +
+
+
+
+ Uncle Cat + Uncle Cat +
+
+
+
+ Uncle Cat + Uncle Cat +
+ Uncle Cat + Uncle Cat + Uncle Cat +
+
+
+
+ Uncle Cat + Uncle Cat +
+
+ +
+)) .add('CircleBadge--small', () => (
diff --git a/modules/primer-base/README.md b/modules/primer-base/README.md index c25b209ae2..521fecaffd 100644 --- a/modules/primer-base/README.md +++ b/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 diff --git a/modules/primer-base/package.json b/modules/primer-base/package.json index 24ad2908e8..7ad058dfc4 100644 --- a/modules/primer-base/package.json +++ b/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", diff --git a/modules/primer-blankslate/README.md b/modules/primer-blankslate/README.md index 4a1c72db6f..4b72b23e68 100644 --- a/modules/primer-blankslate/README.md +++ b/modules/primer-blankslate/README.md @@ -1,6 +1,6 @@ # Primer Blankslate -[![npm version](http://img.shields.io/npm/v/primer-blankslate.svg)](https://www.npmjs.org/package/primer-blankslate) +[![npm version](https://img.shields.io/npm/v/primer-blankslate.svg)](https://www.npmjs.org/package/primer-blankslate) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well. diff --git a/modules/primer-blankslate/package.json b/modules/primer-blankslate/package.json index d465928f3e..a1040c69a2 100644 --- a/modules/primer-blankslate/package.json +++ b/modules/primer-blankslate/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-blankslate", "description": "Blankslates are for when there is a lack of content within a page or section.", "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", diff --git a/modules/primer-box/README.md b/modules/primer-box/README.md index 5f80962700..c8773cd473 100644 --- a/modules/primer-box/README.md +++ b/modules/primer-box/README.md @@ -1,6 +1,6 @@ # Primer box -[![npm version](http://img.shields.io/npm/v/primer-box.svg)](https://www.npmjs.org/package/primer-box) +[![npm version](https://img.shields.io/npm/v/primer-box.svg)](https://www.npmjs.org/package/primer-box) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers. diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json index 41d0dc027c..196e13fd16 100644 --- a/modules/primer-box/package.json +++ b/modules/primer-box/package.json @@ -1,5 +1,5 @@ { - "version": "2.5.2", + "version": "2.5.3", "name": "primer-box", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", "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", diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md index d4abd6ce2b..49b26d442c 100644 --- a/modules/primer-branch-name/README.md +++ b/modules/primer-branch-name/README.md @@ -1,6 +1,6 @@ # Primer / Branch Name -[![npm version](http://img.shields.io/npm/v/primer-branch-name.svg)](https://www.npmjs.org/package/primer-branch-name) +[![npm version](https://img.shields.io/npm/v/primer-branch-name.svg)](https://www.npmjs.org/package/primer-branch-name) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > A nice, consistent way to display branch names. diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json index 86bf22555f..0d769d1f20 100644 --- a/modules/primer-branch-name/package.json +++ b/modules/primer-branch-name/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0", + "version": "1.0.1", "name": "primer-branch-name", "description": "A nice, consistent way to display branch names.", "homepage": "http://primer.github.io/", @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "github", diff --git a/modules/primer-breadcrumb/README.md b/modules/primer-breadcrumb/README.md index 9f4b0589c2..718b0d0469 100644 --- a/modules/primer-breadcrumb/README.md +++ b/modules/primer-breadcrumb/README.md @@ -1,6 +1,6 @@ # Primer Breadcrumb Navigation -[![npm version](http://img.shields.io/npm/v/primer-breadcrumb.svg)](https://www.npmjs.org/package/primer-breadcrumb) +[![npm version](https://img.shields.io/npm/v/primer-breadcrumb.svg)](https://www.npmjs.org/package/primer-breadcrumb) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Breadcrumb navigation for GitHub's pages with parents / grandparents. diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json index b1a03d65b6..d913f946ce 100644 --- a/modules/primer-breadcrumb/package.json +++ b/modules/primer-breadcrumb/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-breadcrumb", "description": "Breadcrumb navigation for pages with parents / grandparents.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "breadcrumb", diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md index 6588ce0181..948843bae0 100644 --- a/modules/primer-buttons/README.md +++ b/modules/primer-buttons/README.md @@ -1,6 +1,6 @@ # Primer Buttons -[![npm version](http://img.shields.io/npm/v/primer-buttons.svg)](https://www.npmjs.org/package/primer-buttons) +[![npm version](https://img.shields.io/npm/v/primer-buttons.svg)](https://www.npmjs.org/package/primer-buttons) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. diff --git a/modules/primer-buttons/package.json b/modules/primer-buttons/package.json index 1fe294e35c..755a13eaf3 100644 --- a/modules/primer-buttons/package.json +++ b/modules/primer-buttons/package.json @@ -1,5 +1,5 @@ { - "version": "2.5.0", + "version": "2.5.1", "name": "primer-buttons", "description": "A collection of buttons used for primary and secondary 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": [ "primer", diff --git a/modules/primer-core/README.md b/modules/primer-core/README.md index 5cf2b44d5d..cc37633da7 100644 --- a/modules/primer-core/README.md +++ b/modules/primer-core/README.md @@ -1,6 +1,6 @@ # Primer Core -[![npm version](http://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.org/package/primer-core) +[![npm version](https://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.org/package/primer-core) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Primer core is one of 3 meta-packages that belong to the Primer framework. Primer core contains packages that are shared between GitHub product and marketing websites. diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index 735159dca4..74185917a2 100644 --- a/modules/primer-core/package.json +++ b/modules/primer-core/package.json @@ -1,5 +1,5 @@ { - "version": "6.5.0", + "version": "6.6.0", "name": "primer-core", "description": "Primer's core modules", "homepage": "http://primer.github.io/", @@ -26,17 +26,17 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-base": "1.6.0", - "primer-box": "2.5.2", - "primer-breadcrumb": "1.4.2", - "primer-buttons": "2.5.0", - "primer-forms": "2.0.0", - "primer-layout": "1.4.2", - "primer-navigation": "1.5.0", - "primer-support": "4.4.2", - "primer-table-object": "1.4.2", - "primer-tooltips": "1.4.2", - "primer-truncate": "1.4.2", - "primer-utilities": "4.8.2" + "primer-base": "1.6.1", + "primer-box": "2.5.3", + "primer-breadcrumb": "1.4.3", + "primer-buttons": "2.5.1", + "primer-forms": "2.0.1", + "primer-layout": "1.4.3", + "primer-navigation": "1.5.1", + "primer-support": "4.5.0", + "primer-table-object": "1.4.3", + "primer-tooltips": "1.5.0", + "primer-truncate": "1.4.3", + "primer-utilities": "4.8.3" } } diff --git a/modules/primer-forms/README.md b/modules/primer-forms/README.md index c210f3c529..8747063dba 100644 --- a/modules/primer-forms/README.md +++ b/modules/primer-forms/README.md @@ -1,6 +1,6 @@ # Primer Forms -[![npm version](http://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms) +[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Style individual form controls and utilize common layouts. diff --git a/modules/primer-forms/package.json b/modules/primer-forms/package.json index 310b3a100b..4a34948fff 100644 --- a/modules/primer-forms/package.json +++ b/modules/primer-forms/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0", + "version": "2.0.1", "name": "primer-forms", "description": "Style individual form controls and utilize common layouts.", "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", diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md index 7545376de6..38412f7679 100644 --- a/modules/primer-labels/README.md +++ b/modules/primer-labels/README.md @@ -1,6 +1,6 @@ # Primer Labels -[![npm version](http://img.shields.io/npm/v/primer-labels.svg)](https://www.npmjs.org/package/primer-labels) +[![npm version](https://img.shields.io/npm/v/primer-labels.svg)](https://www.npmjs.org/package/primer-labels) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Labels add metadata or indicate status of items and navigational elements. diff --git a/modules/primer-labels/package.json b/modules/primer-labels/package.json index ddd7282c92..40f3ae3fe8 100644 --- a/modules/primer-labels/package.json +++ b/modules/primer-labels/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.2", + "version": "1.5.3", "name": "primer-labels", "description": "Labels add metatdata or indicate status of items and navigational elements.", "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", diff --git a/modules/primer-layout/README.md b/modules/primer-layout/README.md index 5f2fd5e289..9e79587622 100644 --- a/modules/primer-layout/README.md +++ b/modules/primer-layout/README.md @@ -1,6 +1,6 @@ # Primer Layout -[![npm version](http://img.shields.io/npm/v/primer-layout.svg)](https://www.npmjs.org/package/primer-layout) +[![npm version](https://img.shields.io/npm/v/primer-layout.svg)](https://www.npmjs.org/package/primer-layout) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns. diff --git a/modules/primer-layout/package.json b/modules/primer-layout/package.json index f6602ab061..44fd0d7d4d 100644 --- a/modules/primer-layout/package.json +++ b/modules/primer-layout/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-layout", "description": "Containers, rows, and columns for creating page layout.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer-markdown/README.md b/modules/primer-markdown/README.md index 01b8bb5b04..20bc47d5cc 100644 --- a/modules/primer-markdown/README.md +++ b/modules/primer-markdown/README.md @@ -1,6 +1,6 @@ # Primer Markdown -[![npm version](http://img.shields.io/npm/v/primer-markdown.svg)](https://www.npmjs.org/package/primer-markdown) +[![npm version](https://img.shields.io/npm/v/primer-markdown.svg)](https://www.npmjs.org/package/primer-markdown) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets. diff --git a/modules/primer-markdown/package.json b/modules/primer-markdown/package.json index 38323061a5..4f95c4cc74 100644 --- a/modules/primer-markdown/package.json +++ b/modules/primer-markdown/package.json @@ -1,5 +1,5 @@ { - "version": "3.7.2", + "version": "3.7.3", "name": "primer-markdown", "description": "GitHub stylesheets for rendering markdown.", "homepage": "https://github.com/primer/primer-markdown", @@ -27,7 +27,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "github", diff --git a/modules/primer-marketing-buttons/README.md b/modules/primer-marketing-buttons/README.md index acc10e4151..1a7c8e62a7 100644 --- a/modules/primer-marketing-buttons/README.md +++ b/modules/primer-marketing-buttons/README.md @@ -1,6 +1,6 @@ # Primer Marketing CSS Buttons -[![npm version](http://img.shields.io/npm/v/primer-marketing-buttons.svg)](https://www.npmjs.org/package/primer-marketing-buttons) +[![npm version](https://img.shields.io/npm/v/primer-marketing-buttons.svg)](https://www.npmjs.org/package/primer-marketing-buttons) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json index 30692637f5..e77b4e0410 100644 --- a/modules/primer-marketing-buttons/package.json +++ b/modules/primer-marketing-buttons/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.1", + "version": "1.0.2", "name": "primer-marketing-buttons", "description": "Buttons for marketing websites at GitHub", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "peerDependencies": { "primer-buttons": ">=2.5.0" diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index e09df57a89..1350f8c577 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -1,6 +1,6 @@ # Primer Marketing Support -[![npm version](http://img.shields.io/npm/v/primer-marketing-support.svg)](https://www.npmjs.org/package/primer-marketing-support) +[![npm version](https://img.shields.io/npm/v/primer-marketing-support.svg)](https://www.npmjs.org/package/primer-marketing-support) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent. diff --git a/modules/primer-marketing-support/package.json b/modules/primer-marketing-support/package.json index 3dfe6f5ab4..8487680a28 100644 --- a/modules/primer-marketing-support/package.json +++ b/modules/primer-marketing-support/package.json @@ -1,5 +1,5 @@ { - "version": "1.3.2", + "version": "1.3.3", "name": "primer-marketing-support", "description": "Sass variables, mixins, and functions for use in our components.", "homepage": "http://primer.github.io/", diff --git a/modules/primer-marketing-type/README.md b/modules/primer-marketing-type/README.md index 6b08af75f5..1be698b93c 100644 --- a/modules/primer-marketing-type/README.md +++ b/modules/primer-marketing-type/README.md @@ -1,6 +1,6 @@ # Primer Marketing CSS Typography -[![npm version](http://img.shields.io/npm/v/primer-marketing-type.svg)](https://www.npmjs.org/package/primer-marketing-type) +[![npm version](https://img.shields.io/npm/v/primer-marketing-type.svg)](https://www.npmjs.org/package/primer-marketing-type) [![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. diff --git a/modules/primer-marketing-type/package.json b/modules/primer-marketing-type/package.json index 08b62406a8..1975cfb8fa 100644 --- a/modules/primer-marketing-type/package.json +++ b/modules/primer-marketing-type/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-marketing-type", "description": "Typography for marketing websites at GitHub", "homepage": "http://primer.github.io/", @@ -28,8 +28,8 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.3", + "primer-support": "4.5.0" }, "keywords": [ "css", diff --git a/modules/primer-marketing-utilities/README.md b/modules/primer-marketing-utilities/README.md index c67a80fc9a..c378937932 100644 --- a/modules/primer-marketing-utilities/README.md +++ b/modules/primer-marketing-utilities/README.md @@ -1,6 +1,6 @@ # Primer Marketing CSS Utilities -[![npm version](http://img.shields.io/npm/v/primer-marketing-utilities.svg)](https://www.npmjs.org/package/primer-marketing-utilities) +[![npm version](https://img.shields.io/npm/v/primer-marketing-utilities.svg)](https://www.npmjs.org/package/primer-marketing-utilities) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) This repository is a module of the full [primer-marketing-css][primer-marketing-css] repository. diff --git a/modules/primer-marketing-utilities/package.json b/modules/primer-marketing-utilities/package.json index af27265c7f..2e0211e9ec 100644 --- a/modules/primer-marketing-utilities/package.json +++ b/modules/primer-marketing-utilities/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.0", + "version": "1.5.1", "name": "primer-marketing-utilities", "description": "Marketing specific immutable, atomic CSS classes", "homepage": "http://primer.github.io/", @@ -28,8 +28,8 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.3", + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer-marketing/README.md b/modules/primer-marketing/README.md index 38ef65745f..1141e7d20d 100755 --- a/modules/primer-marketing/README.md +++ b/modules/primer-marketing/README.md @@ -1,6 +1,6 @@ # Primer marketing -[![npm version](http://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.org/package/primer-marketing) +[![npm version](https://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.org/package/primer-marketing) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Primer marketing is one of 3 meta-packages that belong to the Primer framework. Primer marketing contains packages that are used on GitHub marketing websites. diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json index c66cc37e20..46db1b7f6a 100644 --- a/modules/primer-marketing/package.json +++ b/modules/primer-marketing/package.json @@ -1,5 +1,5 @@ { - "version": "6.0.1", + "version": "6.0.2", "name": "primer-marketing", "description": "Primer marketing packages", "homepage": "http://primer.github.io/", @@ -26,13 +26,13 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-marketing-buttons": "1.0.1", - "primer-marketing-support": "1.3.2", - "primer-marketing-type": "1.4.2", - "primer-marketing-utilities": "1.5.0", - "primer-page-headers": "1.4.2", - "primer-page-sections": "1.4.2", - "primer-support": "4.4.2", - "primer-tables": "1.4.2" + "primer-marketing-buttons": "1.0.2", + "primer-marketing-support": "1.3.3", + "primer-marketing-type": "1.4.3", + "primer-marketing-utilities": "1.5.1", + "primer-page-headers": "1.4.3", + "primer-page-sections": "1.4.3", + "primer-support": "4.5.0", + "primer-tables": "1.4.3" } } diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md index b0c9107b8d..e3ca6dc792 100644 --- a/modules/primer-navigation/README.md +++ b/modules/primer-navigation/README.md @@ -1,6 +1,6 @@ # Primer Navigation -[![npm version](http://img.shields.io/npm/v/primer-navigation.svg)](https://www.npmjs.org/package/primer-navigation) +[![npm version](https://img.shields.io/npm/v/primer-navigation.svg)](https://www.npmjs.org/package/primer-navigation) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently. diff --git a/modules/primer-navigation/package.json b/modules/primer-navigation/package.json index a49e63e771..b084845697 100644 --- a/modules/primer-navigation/package.json +++ b/modules/primer-navigation/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.0", + "version": "1.5.1", "name": "primer-navigation", "description": "Singular purpose and flexible navigation elements.", "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", diff --git a/modules/primer-page-headers/README.md b/modules/primer-page-headers/README.md index b3ec12ae94..339d19cec4 100644 --- a/modules/primer-page-headers/README.md +++ b/modules/primer-page-headers/README.md @@ -1,6 +1,6 @@ # Primer Marketing CSS Page Headers -[![npm version](http://img.shields.io/npm/v/primer-page-headers.svg)](https://www.npmjs.org/package/primer-page-headers) +[![npm version](https://img.shields.io/npm/v/primer-page-headers.svg)](https://www.npmjs.org/package/primer-page-headers) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Jumbotrons, heroes, and featured content sections for marketing websites at GitHub. diff --git a/modules/primer-page-headers/package.json b/modules/primer-page-headers/package.json index 1d55e71a7d..f77604bebe 100644 --- a/modules/primer-page-headers/package.json +++ b/modules/primer-page-headers/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-page-headers", "description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.", "homepage": "http://primer.github.io/", @@ -27,8 +27,8 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.3", + "primer-support": "4.5.0" }, "keywords": [ "css", diff --git a/modules/primer-page-sections/README.md b/modules/primer-page-sections/README.md index 37a4b63db8..2d32078ca9 100644 --- a/modules/primer-page-sections/README.md +++ b/modules/primer-page-sections/README.md @@ -1,6 +1,6 @@ # Primer Page Sections -[![npm version](http://img.shields.io/npm/v/primer-page-sections.svg)](https://www.npmjs.org/package/primer-page-sections) +[![npm version](https://img.shields.io/npm/v/primer-page-sections.svg)](https://www.npmjs.org/package/primer-page-sections) [![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. diff --git a/modules/primer-page-sections/package.json b/modules/primer-page-sections/package.json index b0c6f51c1f..1676e24df2 100644 --- a/modules/primer-page-sections/package.json +++ b/modules/primer-page-sections/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-page-sections", "description": "Styles to create distinct sections of marketing pages at GitHub.", "homepage": "http://primer.github.io/", @@ -27,8 +27,8 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.3", + "primer-support": "4.5.0" }, "keywords": [ "css", diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index ebc3f62930..a32d5b8570 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -1,6 +1,6 @@ # Primer Popover -[![npm version](http://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover) +[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Popover for suggesting, guiding, and bringing attention to specific UI elements on a page. diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json index e2607fe393..c0d67405de 100644 --- a/modules/primer-popover/package.json +++ b/modules/primer-popover/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.3", + "version": "0.0.4", "name": "primer-popover", "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", "homepage": "http://primer.github.io/", @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "peerDependencies": { "primer-box": ">=2.5.0" diff --git a/modules/primer-product/README.md b/modules/primer-product/README.md index 959a75c126..0e810833ce 100644 --- a/modules/primer-product/README.md +++ b/modules/primer-product/README.md @@ -1,6 +1,6 @@ # Primer product -[![npm version](http://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.org/package/primer-product) +[![npm version](https://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.org/package/primer-product) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Primer product is one of 3 meta-packages that belong to the Primer framework. Primer product contains packages that are used on GitHub product websites. diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 84b6a8e85f..1a4af8114f 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -1,5 +1,5 @@ { - "version": "5.5.1", + "version": "5.6.0", "name": "primer-product", "description": "Primer's product modules", "homepage": "http://primer.github.io/", @@ -26,14 +26,14 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-alerts": "1.5.2", - "primer-avatars": "1.4.2", - "primer-blankslate": "1.4.2", - "primer-branch-name": "1.0.0", - "primer-labels": "1.5.2", - "primer-markdown": "3.7.2", - "primer-popover": "0.0.3", - "primer-subhead": "1.0.0", - "primer-support": "4.4.2" + "primer-alerts": "1.5.3", + "primer-avatars": "1.5.0", + "primer-blankslate": "1.4.3", + "primer-branch-name": "1.0.1", + "primer-labels": "1.5.3", + "primer-markdown": "3.7.3", + "primer-popover": "0.0.4", + "primer-subhead": "1.0.1", + "primer-support": "4.5.0" } } diff --git a/modules/primer-subhead/README.md b/modules/primer-subhead/README.md index dba699d192..97b050a16e 100644 --- a/modules/primer-subhead/README.md +++ b/modules/primer-subhead/README.md @@ -1,6 +1,6 @@ # Primer / Subhead -[![npm version](http://img.shields.io/npm/v/primer-subhead.svg)](https://www.npmjs.org/package/primer-subhead) +[![npm version](https://img.shields.io/npm/v/primer-subhead.svg)](https://www.npmjs.org/package/primer-subhead) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json index ba1c1b85f1..e53c415290 100644 --- a/modules/primer-subhead/package.json +++ b/modules/primer-subhead/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0", + "version": "1.0.1", "name": "primer-subhead", "description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.", "homepage": "http://primer.github.io/", @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "github", diff --git a/modules/primer-support/README.md b/modules/primer-support/README.md index 0fd95a76ee..23b074e749 100644 --- a/modules/primer-support/README.md +++ b/modules/primer-support/README.md @@ -1,6 +1,6 @@ # Primer Support -[![npm version](http://img.shields.io/npm/v/primer-support.svg)](https://www.npmjs.org/package/primer-support) +[![npm version](https://img.shields.io/npm/v/primer-support.svg)](https://www.npmjs.org/package/primer-support) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent. diff --git a/modules/primer-support/lib/variables/misc.scss b/modules/primer-support/lib/variables/misc.scss index ceca69eacf..cd6414f533 100644 --- a/modules/primer-support/lib/variables/misc.scss +++ b/modules/primer-support/lib/variables/misc.scss @@ -19,7 +19,7 @@ $box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default; // Tooltips $tooltip-max-width: 250px !default; -$tooltip-background-color: rgba($black, 0.8) !default; +$tooltip-background-color: $black; $tooltip-text-color: $white !default; $tooltip-delay: 0.4s !default; $tooltip-duration: 0.1s !default; diff --git a/modules/primer-support/package.json b/modules/primer-support/package.json index 0bad35ab2f..a94ee6ffdf 100644 --- a/modules/primer-support/package.json +++ b/modules/primer-support/package.json @@ -1,5 +1,5 @@ { - "version": "4.4.2", + "version": "4.5.0", "name": "primer-support", "description": "Sass variables, mixins, and functions for use in our components.", "homepage": "http://primer.github.io/", diff --git a/modules/primer-table-object/README.md b/modules/primer-table-object/README.md index 9c1bfc472d..c7dc614c48 100644 --- a/modules/primer-table-object/README.md +++ b/modules/primer-table-object/README.md @@ -1,6 +1,6 @@ # Primer table object -[![npm version](http://img.shields.io/npm/v/primer-table-object.svg)](https://www.npmjs.org/package/primer-table-object) +[![npm version](https://img.shields.io/npm/v/primer-table-object.svg)](https://www.npmjs.org/package/primer-table-object) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9. diff --git a/modules/primer-table-object/package.json b/modules/primer-table-object/package.json index 13fe6c6549..1e224704e3 100644 --- a/modules/primer-table-object/package.json +++ b/modules/primer-table-object/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-table-object", "description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer-tables/README.md b/modules/primer-tables/README.md index 1786ebc0ce..d35dd603a3 100644 --- a/modules/primer-tables/README.md +++ b/modules/primer-tables/README.md @@ -1,6 +1,6 @@ # Primer Marketing CSS Tables -[![npm version](http://img.shields.io/npm/v/primer-tables.svg)](https://www.npmjs.org/package/primer-tables) +[![npm version](https://img.shields.io/npm/v/primer-tables.svg)](https://www.npmjs.org/package/primer-tables) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Styles to display tabular data for marketing websites at GitHub. diff --git a/modules/primer-tables/package.json b/modules/primer-tables/package.json index d74a9dd98a..a04f32fd81 100644 --- a/modules/primer-tables/package.json +++ b/modules/primer-tables/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-tables", "description": "Styles to display tabular data for marketing websites at GitHub.", "homepage": "http://primer.github.io/", @@ -27,8 +27,8 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.3", + "primer-support": "4.5.0" }, "keywords": [ "css", diff --git a/modules/primer-tooltips/README.md b/modules/primer-tooltips/README.md index ffe689835a..38ddea0fb7 100644 --- a/modules/primer-tooltips/README.md +++ b/modules/primer-tooltips/README.md @@ -1,6 +1,6 @@ # Primer Tooltips -[![npm version](http://img.shields.io/npm/v/primer-tooltips.svg)](https://www.npmjs.org/package/primer-tooltips) +[![npm version](https://img.shields.io/npm/v/primer-tooltips.svg)](https://www.npmjs.org/package/primer-tooltips) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute. @@ -40,11 +40,18 @@ title: Tooltips status: Stable --> -Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an `aria-label` attribute. +Add tooltips built entirely in CSS to nearly any element. + +{:toc} + +## Implementation and accessibility **Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information. -In addition, you'll want to specify a direction: +**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon. + +## Tooltip direction +Specify the direction of a tooltip with north, south, east, and west directions: - `.tooltipped-n` - `.tooltipped-ne` @@ -55,7 +62,6 @@ In addition, you'll want to specify a direction: - `.tooltipped-w` - `.tooltipped-nw` -Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon. ```html @@ -84,7 +90,37 @@ Tooltip classes will conflict with Octicon classes, and as such, must go on a pa ``` -#### Tooltips with multiple lines +## Tooltip alignment +Align tooltips to the left or right of an element, combined with a directional class to specify north or south. + +```html + + Tooltip North East align left 1 + + + Tooltip North East align left 2 + + + Tooltip South East align left 1 + + + Tooltip South East align left 2 + + + Tooltip North West align right 1 + + + Tooltip North West align right 2 + + + Tooltip South West align right 1 + + + Tooltip South West align right 2 + +``` + +## Tooltips with multiple lines Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`. @@ -94,7 +130,7 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi ``` -#### Tooltips No Delay +## Tooltips No Delay By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay` diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 1c56165563..5ebccc399c 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -7,7 +7,7 @@ position: absolute; z-index: 1000000; display: none; - padding: 5px $spacer-2; + padding: 0.5em 0.75em; font: normal normal 11px/1.5 $body-font; -webkit-font-smoothing: subpixel-antialiased; color: $tooltip-text-color; @@ -21,7 +21,7 @@ pointer-events: none; content: attr(aria-label); background: $tooltip-background-color; - border-radius: 3px; + border-radius: $border-radius; opacity: 0; } @@ -35,7 +35,7 @@ color: $tooltip-background-color; pointer-events: none; content: ""; - border: 5px solid transparent; + border: 6px $border-style transparent; opacity: 0; } @@ -90,14 +90,14 @@ &::after { top: 100%; right: 50%; - margin-top: 5px; + margin-top: 6px; } &::before { top: auto; right: 50%; - bottom: -5px; - margin-right: -5px; + bottom: -7px; + margin-right: -6px; border-bottom-color: $tooltip-background-color; } } @@ -106,12 +106,12 @@ &::after { right: auto; left: 50%; - margin-left: -15px; + margin-left: -$spacer-3; } } .tooltipped-sw::after { - margin-right: -15px; + margin-right: -$spacer-3; } // Tooltips above the object @@ -121,14 +121,14 @@ &::after { right: 50%; bottom: 100%; - margin-bottom: 5px; + margin-bottom: 6px; } &::before { - top: -5px; + top: -7px; right: 50%; bottom: auto; - margin-right: -5px; + margin-right: -6px; border-top-color: $tooltip-background-color; } } @@ -137,12 +137,12 @@ &::after { right: auto; left: 50%; - margin-left: -15px; + margin-left: -$spacer-3; } } .tooltipped-nw::after { - margin-right: -15px; + margin-right: -$spacer-3; } // Move the tooltip body to the center of the object. @@ -156,15 +156,15 @@ &::after { right: 100%; bottom: 50%; - margin-right: 5px; + margin-right: 6px; transform: translateY(50%); } &::before { top: 50%; bottom: 50%; - left: -5px; - margin-top: -5px; + left: -7px; + margin-top: -6px; border-left-color: $tooltip-background-color; } } @@ -174,19 +174,60 @@ &::after { bottom: 50%; left: 100%; - margin-left: 5px; + margin-left: 6px; transform: translateY(50%); } &::before { top: 50%; - right: -5px; + right: -7px; bottom: 50%; - margin-top: -5px; + margin-top: -6px; border-right-color: $tooltip-background-color; } } +// Tooltip align right and left +.tooltipped-align-right-1, +.tooltipped-align-right-2 { + &::after { + right: 0; + margin-right: 0; + } +} + +.tooltipped-align-right-1 { + &::before { + right: 10px; + } +} + +.tooltipped-align-right-2 { + &::before { + right: 15px; + } +} + +.tooltipped-align-left-1, +.tooltipped-align-left-2, { + &::after { + left: 0; + margin-left: 0; + } +} + +.tooltipped-align-left-1 { + &::before { + left: 5px; + } +} + +.tooltipped-align-left-2 { + &::before { + left: 10px; + } +} + // Multiline tooltips // // `.tooltipped-multiline` Add this class when you have long content. @@ -270,10 +311,3 @@ border-left-color: $background-color; } } - -@include retina-media-query { - .tooltipped-w::after { - // weird bug on retina - margin-right: 4.5px; - } -} diff --git a/modules/primer-tooltips/package.json b/modules/primer-tooltips/package.json index be62f11c33..e1b5b4a59b 100644 --- a/modules/primer-tooltips/package.json +++ b/modules/primer-tooltips/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.5.0", "name": "primer-tooltips", "description": "Add tooltips built entirely in CSS to nearly any element.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js new file mode 100644 index 0000000000..579876b385 --- /dev/null +++ b/modules/primer-tooltips/stories.js @@ -0,0 +1,82 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Tooltips', module) +.add('tooltipped direction', () => ( +
+ + Tooltip North + + + Tooltip North East + + + Tooltip East + + + Tooltip South East + + + Tooltip South + + + Tooltip South West + + + Tooltip West + + + Tooltip North West + +
+)) +.add('tooltip aligned', () => ( +
+ + Tooltip North East align left 1 + + + Tooltip North East align left 2 + + + Tooltip South East align left 1 + + + Tooltip South East align left 2 + + + Tooltip North West align right 1 + + + Tooltip North West align right 2 + + + Tooltip South West align right 1 + + + Tooltip South West align right 2 + +
+ )) + .add('tootlipped-multiline', () => ( +
+ + Tooltip with multiple lines + + + Tooltip with multiple lines + +
+ )) + .add('tootlip no delay', () => ( +
+ + Tooltip no delay + +
+ )) + .add('tooltip on button', () => ( +
+ +
+)) diff --git a/modules/primer-truncate/README.md b/modules/primer-truncate/README.md index 14fccc7844..50fa4b07be 100644 --- a/modules/primer-truncate/README.md +++ b/modules/primer-truncate/README.md @@ -1,6 +1,6 @@ # Primer Truncate -[![npm version](http://img.shields.io/npm/v/primer-truncate.svg)](https://www.npmjs.org/package/primer-truncate) +[![npm version](https://img.shields.io/npm/v/primer-truncate.svg)](https://www.npmjs.org/package/primer-truncate) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > .css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target. diff --git a/modules/primer-truncate/package.json b/modules/primer-truncate/package.json index e2af7e3d8c..0593d75df1 100644 --- a/modules/primer-truncate/package.json +++ b/modules/primer-truncate/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.4.3", "name": "primer-truncate", "description": "Shorten text with an ellipsis.", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer-utilities/README.md b/modules/primer-utilities/README.md index 554289b637..cabf42443a 100644 --- a/modules/primer-utilities/README.md +++ b/modules/primer-utilities/README.md @@ -1,6 +1,6 @@ # Primer Utilities -[![npm version](http://img.shields.io/npm/v/primer-utilities.svg)](https://www.npmjs.org/package/primer-utilities) +[![npm version](https://img.shields.io/npm/v/primer-utilities.svg)](https://www.npmjs.org/package/primer-utilities) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more. diff --git a/modules/primer-utilities/package.json b/modules/primer-utilities/package.json index 2aab3834d4..5fe481ec04 100644 --- a/modules/primer-utilities/package.json +++ b/modules/primer-utilities/package.json @@ -1,5 +1,5 @@ { - "version": "4.8.2", + "version": "4.8.3", "name": "primer-utilities", "description": "Immutable, atomic CSS classes to rapidly build product", "homepage": "http://primer.github.io/", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.5.0" }, "keywords": [ "primer", diff --git a/modules/primer/README.md b/modules/primer/README.md index 879707d4eb..9c0610e094 100644 --- a/modules/primer/README.md +++ b/modules/primer/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. diff --git a/modules/primer/package.json b/modules/primer/package.json index b87e1bc3b4..9bb5ef3b91 100644 --- a/modules/primer/package.json +++ b/modules/primer/package.json @@ -1,5 +1,5 @@ { - "version": "10.0.1", + "version": "10.1.0", "name": "primer", "description": "Primer is the CSS framework that powers GitHub's front-end design. 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.", "homepage": "http://primer.github.io/", @@ -27,36 +27,36 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-alerts": "1.5.2", - "primer-avatars": "1.4.2", - "primer-base": "1.6.0", - "primer-blankslate": "1.4.2", - "primer-box": "2.5.2", - "primer-branch-name": "1.0.0", - "primer-breadcrumb": "1.4.2", - "primer-buttons": "2.5.0", - "primer-core": "6.5.0", - "primer-forms": "2.0.0", - "primer-labels": "1.5.2", - "primer-layout": "1.4.2", - "primer-markdown": "3.7.2", - "primer-marketing": "6.0.1", - "primer-marketing-buttons": "1.0.1", - "primer-marketing-support": "1.3.2", - "primer-marketing-type": "1.4.2", - "primer-marketing-utilities": "1.5.0", - "primer-navigation": "1.5.0", - "primer-page-headers": "1.4.2", - "primer-page-sections": "1.4.2", - "primer-popover": "0.0.3", - "primer-product": "5.5.1", - "primer-subhead": "1.0.0", - "primer-support": "4.4.2", - "primer-table-object": "1.4.2", - "primer-tables": "1.4.2", - "primer-tooltips": "1.4.2", - "primer-truncate": "1.4.2", - "primer-utilities": "4.8.2" + "primer-alerts": "1.5.3", + "primer-avatars": "1.5.0", + "primer-base": "1.6.1", + "primer-blankslate": "1.4.3", + "primer-box": "2.5.3", + "primer-branch-name": "1.0.1", + "primer-breadcrumb": "1.4.3", + "primer-buttons": "2.5.1", + "primer-core": "6.6.0", + "primer-forms": "2.0.1", + "primer-labels": "1.5.3", + "primer-layout": "1.4.3", + "primer-markdown": "3.7.3", + "primer-marketing": "6.0.2", + "primer-marketing-buttons": "1.0.2", + "primer-marketing-support": "1.3.3", + "primer-marketing-type": "1.4.3", + "primer-marketing-utilities": "1.5.1", + "primer-navigation": "1.5.1", + "primer-page-headers": "1.4.3", + "primer-page-sections": "1.4.3", + "primer-popover": "0.0.4", + "primer-product": "5.6.0", + "primer-subhead": "1.0.1", + "primer-support": "4.5.0", + "primer-table-object": "1.4.3", + "primer-tables": "1.4.3", + "primer-tooltips": "1.5.0", + "primer-truncate": "1.4.3", + "primer-utilities": "4.8.3" }, "keywords": [ "primer", diff --git a/tools/generator-primer-module/README.md b/tools/generator-primer-module/README.md index 56c71c9404..683fd788a4 100644 --- a/tools/generator-primer-module/README.md +++ b/tools/generator-primer-module/README.md @@ -1,6 +1,6 @@ # Primer Module Generator -[![npm version](http://img.shields.io/npm/v/generator-primer-module.svg)](https://www.npmjs.org/package/generator-primer-module) +[![npm version](https://img.shields.io/npm/v/generator-primer-module.svg)](https://www.npmjs.org/package/generator-primer-module) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) Primer is the CSS framework that powers GitHub's front-end design. This is a diff --git a/tools/generator-primer-module/app/templates/README.md b/tools/generator-primer-module/app/templates/README.md index d3942a29d4..31746929d5 100644 --- a/tools/generator-primer-module/app/templates/README.md +++ b/tools/generator-primer-module/app/templates/README.md @@ -1,6 +1,6 @@ # Primer / <%= title %> -[![npm version](http://img.shields.io/npm/v/<%= module %>.svg)](https://www.npmjs.org/package/<%= module %>) +[![npm version](https://img.shields.io/npm/v/<%= module %>.svg)](https://www.npmjs.org/package/<%= module %>) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > <%= description %> diff --git a/tools/generator-primer-module/package.json b/tools/generator-primer-module/package.json index b0f9e72dba..db4febe39b 100644 --- a/tools/generator-primer-module/package.json +++ b/tools/generator-primer-module/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.1", + "version": "1.0.2", "name": "generator-primer-module", "description": "Use this to create a new Primer modules!", "author": "GitHub, Inc.", @@ -17,7 +17,7 @@ }, "dependencies": { "chalk": "^2.1.0", - "primer-support": "4.4.2", + "primer-support": "4.5.0", "yeoman-generator": "^1.1.1" }, "keywords": [ diff --git a/tools/stylelint-config-primer/README.md b/tools/stylelint-config-primer/README.md index 9770437b94..808245d844 100644 --- a/tools/stylelint-config-primer/README.md +++ b/tools/stylelint-config-primer/README.md @@ -1,6 +1,6 @@ # Primer Stylelint Config -[![NPM version](http://img.shields.io/npm/v/stylelint-config-primer.svg)](https://www.npmjs.org/package/stylelint-config-primer) +[![NPM version](https://img.shields.io/npm/v/stylelint-config-primer.svg)](https://www.npmjs.org/package/stylelint-config-primer) [![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) > A sharable stylelint config object that enforces GitHub's css rules diff --git a/tools/stylelint-config-primer/package.json b/tools/stylelint-config-primer/package.json index 496f63aacf..d9e86aabdb 100644 --- a/tools/stylelint-config-primer/package.json +++ b/tools/stylelint-config-primer/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-config-primer", - "version": "2.2.1", + "version": "2.2.2", "description": "Sharable stylelint config used by GitHub's CSS", "homepage": "http://primer.github.io/", "author": "GitHub, Inc.", @@ -19,7 +19,7 @@ "stylelint-no-unsupported-browser-features": "^1.0.0", "stylelint-order": "^0.4.4", "stylelint-scss": "^1.4.1", - "stylelint-selector-no-utility": "1.8.1" + "stylelint-selector-no-utility": "1.8.2" }, "devDependencies": { "eslint": "^3.19.0", diff --git a/tools/stylelint-selector-no-utility/README.md b/tools/stylelint-selector-no-utility/README.md index d974bc5b6b..ac5414fe89 100644 --- a/tools/stylelint-selector-no-utility/README.md +++ b/tools/stylelint-selector-no-utility/README.md @@ -1,6 +1,6 @@ # selector-no-utility -[![NPM version](http://img.shields.io/npm/v/stylelint-selector-no-utility.svg)](https://www.npmjs.org/package/stylelint-selector-no-utility) +[![NPM version](https://img.shields.io/npm/v/stylelint-selector-no-utility.svg)](https://www.npmjs.org/package/stylelint-selector-no-utility) [![Build Status](https://travis-ci.org/primer/stylelint-selector-no-utility.svg?branch=master)](https://travis-ci.org/primer/stylelint-selector-no-utility) **This plugin is specific to [primer-utilities](https://github.com/primer/primer/tree/master/modules/primer-utilities)**. We'll accept pull requests to make it more generic, or feel free to fork and use it for your own classes. diff --git a/tools/stylelint-selector-no-utility/package.json b/tools/stylelint-selector-no-utility/package.json index 21e771a41d..684d56e39f 100644 --- a/tools/stylelint-selector-no-utility/package.json +++ b/tools/stylelint-selector-no-utility/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-selector-no-utility", - "version": "1.8.1", + "version": "1.8.2", "description": "Stylelint rule that doesn't allow the styling of utility classes in CSS", "main": "index.js", "scripts": { @@ -21,7 +21,7 @@ "license": "MIT", "repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility", "dependencies": { - "primer-utilities": "4.8.2", + "primer-utilities": "4.8.3", "stylelint": "^7.13.0" }, "devDependencies": {