From 4e60c70568fe083c6996de38ec65d75d4adecffa Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 09:51:23 -0400 Subject: [PATCH 01/53] add tooltip stories --- modules/primer-tooltips/stories.js | 44 ++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 modules/primer-tooltips/stories.js diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js new file mode 100644 index 0000000000..add52b7689 --- /dev/null +++ b/modules/primer-tooltips/stories.js @@ -0,0 +1,44 @@ +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-in-button', () => ( +
+ +
+)) +.add('tootlipped-multiline', () => ( +
+ + Tooltip with multiple lines + +
+)) From 8e6a3d1e8feb167caf7da67cb3af770e8b07db5e Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 09:51:47 -0400 Subject: [PATCH 02/53] move tooltip variables into tooltips module --- modules/primer-support/lib/variables/misc.scss | 7 ------- modules/primer-tooltips/lib/tooltips.scss | 7 +++++++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/primer-support/lib/variables/misc.scss b/modules/primer-support/lib/variables/misc.scss index ceca69eacf..1b984b3bd7 100644 --- a/modules/primer-support/lib/variables/misc.scss +++ b/modules/primer-support/lib/variables/misc.scss @@ -17,13 +17,6 @@ $box-shadow-medium: 0 1px 5px $black-fade-15 !default; $box-shadow-large: 0 1px 15px $black-fade-15 !default; $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-text-color: $white !default; -$tooltip-delay: 0.4s !default; -$tooltip-duration: 0.1s !default; - // Should be moved into custom github css $stats-switcher-py: 10px; // Future proof this `height` value by finding the computed line-height, then diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 1c56165563..f712197560 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -1,3 +1,10 @@ +// Tooltips +$tooltip-max-width: 250px !default; +$tooltip-background-color: rgba($black, 0.8) !default; +$tooltip-text-color: $white !default; +$tooltip-delay: 0.4s !default; +$tooltip-duration: 0.1s !default; + .tooltipped { position: relative; } From 863fb12341568a9e3c67f4075628a41ca7dee874 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 09:54:57 -0400 Subject: [PATCH 03/53] Make tooltips black and update white variable --- modules/primer-tooltips/lib/tooltips.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index f712197560..6ddd2aa6c2 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -1,7 +1,7 @@ // Tooltips $tooltip-max-width: 250px !default; -$tooltip-background-color: rgba($black, 0.8) !default; -$tooltip-text-color: $white !default; +$tooltip-background-color: $black !default; +$tooltip-text-color: $text-white !default; $tooltip-delay: 0.4s !default; $tooltip-duration: 0.1s !default; From 43951a0fb713ef5ac1364fc6f0c3071e6bb1cd1f Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 09:57:50 -0400 Subject: [PATCH 04/53] update padding and line-height so tooltip height lands on whole pixels --- modules/primer-tooltips/lib/tooltips.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 6ddd2aa6c2..1d8d720fce 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -14,8 +14,8 @@ $tooltip-duration: 0.1s !default; position: absolute; z-index: 1000000; display: none; - padding: 5px $spacer-2; - font: normal normal 11px/1.5 $body-font; + padding: 0.375 0.5; + font: normal normal 11px/$lh-condensed $body-font; -webkit-font-smoothing: subpixel-antialiased; color: $tooltip-text-color; text-align: center; From 3275a6f6eafadf6c7dfd19b69d9d90e4dc91d264 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 11:28:04 -0400 Subject: [PATCH 05/53] for some reason doesn't like the variable --- modules/primer-tooltips/lib/tooltips.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 1d8d720fce..28db3fd047 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -15,7 +15,7 @@ $tooltip-duration: 0.1s !default; z-index: 1000000; display: none; padding: 0.375 0.5; - font: normal normal 11px/$lh-condensed $body-font; + font: normal normal 11px/1.25 $body-font; -webkit-font-smoothing: subpixel-antialiased; color: $tooltip-text-color; text-align: center; From 6da680b9c055a67b5d057483a4f28ca80d9759e8 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 11:28:40 -0400 Subject: [PATCH 06/53] adjust tooltip caret size and margin so overlaps with tooltip body --- modules/primer-tooltips/lib/tooltips.scss | 33 +++++++++-------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 28db3fd047..17bc3250b1 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -42,7 +42,7 @@ $tooltip-duration: 0.1s !default; color: $tooltip-background-color; pointer-events: none; content: ""; - border: 5px solid transparent; + border: 6px solid transparent; opacity: 0; } @@ -103,7 +103,7 @@ $tooltip-duration: 0.1s !default; &::before { top: auto; right: 50%; - bottom: -5px; + bottom: -6px; margin-right: -5px; border-bottom-color: $tooltip-background-color; } @@ -128,14 +128,14 @@ $tooltip-duration: 0.1s !default; &::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; } } @@ -144,12 +144,12 @@ $tooltip-duration: 0.1s !default; &::after { right: auto; left: 50%; - margin-left: -15px; + margin-left: -16px; } } .tooltipped-nw::after { - margin-right: -15px; + margin-right: -16px; } // Move the tooltip body to the center of the object. @@ -163,15 +163,15 @@ $tooltip-duration: 0.1s !default; &::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; } } @@ -181,15 +181,15 @@ $tooltip-duration: 0.1s !default; &::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; } } @@ -277,10 +277,3 @@ $tooltip-duration: 0.1s !default; border-left-color: $background-color; } } - -@include retina-media-query { - .tooltipped-w::after { - // weird bug on retina - margin-right: 4.5px; - } -} From a24f5eaeb474d3dc28ffdb3368cd28bba0140ca3 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 11:38:06 -0400 Subject: [PATCH 07/53] use variable for border-radius --- modules/primer-tooltips/lib/tooltips.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 17bc3250b1..e86d17c5ec 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -28,7 +28,7 @@ $tooltip-duration: 0.1s !default; pointer-events: none; content: attr(aria-label); background: $tooltip-background-color; - border-radius: 3px; + border-radius: $border-radius; opacity: 0; } From 48ca2f739e4202350b588c25440a91d06abc6688 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 11:38:43 -0400 Subject: [PATCH 08/53] missed some variations, make them consistent --- modules/primer-tooltips/lib/tooltips.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index e86d17c5ec..9694b0fa07 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -97,14 +97,14 @@ $tooltip-duration: 0.1s !default; &::after { top: 100%; right: 50%; - margin-top: 5px; + margin-top: 6px; } &::before { top: auto; right: 50%; - bottom: -6px; - margin-right: -5px; + bottom: -7px; + margin-right: -6px; border-bottom-color: $tooltip-background-color; } } @@ -113,12 +113,12 @@ $tooltip-duration: 0.1s !default; &::after { right: auto; left: 50%; - margin-left: -15px; + margin-left: -16px; } } .tooltipped-sw::after { - margin-right: -15px; + margin-right: -16px; } // Tooltips above the object From 289095dd6ab11178bfc4ff13a785db874047c1b6 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 11:40:16 -0400 Subject: [PATCH 09/53] use spacer variables --- modules/primer-tooltips/lib/tooltips.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 9694b0fa07..7e844f1204 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -113,12 +113,12 @@ $tooltip-duration: 0.1s !default; &::after { right: auto; left: 50%; - margin-left: -16px; + margin-left: -$spacer-3; } } .tooltipped-sw::after { - margin-right: -16px; + margin-right: -$spacer-3; } // Tooltips above the object @@ -144,12 +144,12 @@ $tooltip-duration: 0.1s !default; &::after { right: auto; left: 50%; - margin-left: -16px; + margin-left: -$spacer-3; } } .tooltipped-nw::after { - margin-right: -16px; + margin-right: -$spacer-3; } // Move the tooltip body to the center of the object. From 5771ad36557f35f24ff37044d1f56c88148bd952 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 21:13:50 -0400 Subject: [PATCH 10/53] add tooltip modifiers for align right and left --- modules/primer-tooltips/lib/tooltips.scss | 22 ++++++++++++++++++ modules/primer-tooltips/stories.js | 28 +++++++++++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 7e844f1204..dc5a1a1886 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -277,3 +277,25 @@ $tooltip-duration: 0.1s !default; border-left-color: $background-color; } } + +.tooltipped-align-right { + &::after { + right: 0; + margin-right: 0; + } + + &::before { + right: 15px; + } +} + +.tooltipped-align-left { + &::after { + left: 0; + margin-left: 0; + } + + &::before { + left: 10px; + } +} diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js index add52b7689..49a7f19336 100644 --- a/modules/primer-tooltips/stories.js +++ b/modules/primer-tooltips/stories.js @@ -42,3 +42,31 @@ storiesOf('Tooltips', module) )) +.add('tootlip no delay', () => ( +
+ + Tooltip no delay + +
+)) +.add('tooltip on button', () => ( +
+ +
+)) +.add('tooltip aligned', () => ( +
+ + Tooltip North East align left + + + Tooltip South East align left + + + Tooltip North West align right + + + Tooltip South West align right + +
+)) From da39183dac57e94f95ebe68fefc473a95b9d6904 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 21:57:58 -0400 Subject: [PATCH 11/53] re-order stories --- modules/primer-tooltips/stories.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js index 49a7f19336..e21d014c80 100644 --- a/modules/primer-tooltips/stories.js +++ b/modules/primer-tooltips/stories.js @@ -30,11 +30,6 @@ storiesOf('Tooltips', module) )) -.add('tooltip-in-button', () => ( -
- -
-)) .add('tootlipped-multiline', () => (
From b24b87376a365fe293afb8ac0d3d204ef84081d5 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 22:06:24 -0400 Subject: [PATCH 12/53] add align modifiers to docs --- modules/primer-tooltips/README.md | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/modules/primer-tooltips/README.md b/modules/primer-tooltips/README.md index 148c532f62..9e2a44ad7e 100644 --- a/modules/primer-tooltips/README.md +++ b/modules/primer-tooltips/README.md @@ -84,7 +84,24 @@ Tooltip classes will conflict with Octicon classes, and as such, must go on a pa ``` -#### Tooltips with multiple lines +### Align tooltips + +```html + + Tooltip North East align left + + + Tooltip South East align left + + + Tooltip North West align right + + + Tooltip South West align right + +``` + +### 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 +111,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` From 484c911bd6cdf20d1cb27a09fe1834b0e21f3296 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Sat, 7 Oct 2017 22:19:58 -0400 Subject: [PATCH 13/53] re-order sass --- modules/primer-tooltips/lib/tooltips.scss | 45 ++++++++++++----------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index dc5a1a1886..5e79340ce0 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -194,6 +194,29 @@ $tooltip-duration: 0.1s !default; } } +// Tooltip align right and left +.tooltipped-align-right { + &::after { + right: 0; + margin-right: 0; + } + + &::before { + right: 15px; + } +} + +.tooltipped-align-left { + &::after { + left: 0; + margin-left: 0; + } + + &::before { + left: 10px; + } +} + // Multiline tooltips // // `.tooltipped-multiline` Add this class when you have long content. @@ -277,25 +300,3 @@ $tooltip-duration: 0.1s !default; border-left-color: $background-color; } } - -.tooltipped-align-right { - &::after { - right: 0; - margin-right: 0; - } - - &::before { - right: 15px; - } -} - -.tooltipped-align-left { - &::after { - left: 0; - margin-left: 0; - } - - &::before { - left: 10px; - } -} From 2f1a72f4a35af7b63a5e3be3cc8ce61c7dc1f9a2 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:07:17 -0500 Subject: [PATCH 14/53] Copy CSS over from https://github.com/github/github/blob/8d6e8bcea9f42a39b0139d9906d1ac2f5b7dbd8c/app/assets/stylesheets/components/avatar-stack.scss --- modules/primer-avatars/lib/avatar-stack.scss | 128 +++++++++++++++++++ 1 file changed, 128 insertions(+) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 884f6a528d..680e3cca0b 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -43,3 +43,131 @@ } } } + +// Refactored, new avatar stack: + +.temp-tooltipped-align-left { + &::after { + left: 0 !important; + margin-left: 0 !important; + } + + &::before { + left: 5px !important; + } +} + +.temp-avatar-stack-container { + min-width: 26px; + height: 20px; + position: relative; +} + +.authors-2 .temp-avatar-stack-container { + min-width: 36px !important; +} + +.authors-3 .temp-avatar-stack-container { + min-width: 46px !important; +} + +.temp-avatar-stack { + position: absolute; + background: $bg-white; + padding-right: 5px; + + .avatar { + position: relative; + z-index: 2; + display: inline-block; + width: 20px; + height: 20px; + box-sizing: content-box; + margin-right: -15px; + background-color: $bg-white; + border-right: $border-width $border-style $white; + border-radius: 2px; + transition: margin 0.1s ease-in-out; + + // &:only-child { + // background-color: transparent; + // } + + &:first-child { + z-index: 3; + } + + &:last-child { + z-index: 1; + margin-right: 0; + border-right: 0; + } + + // stylelint-disable selector-max-type + img { + border-radius: 2px; + } + // stylelint-enable selector-max-type + + &:nth-child(3) { + z-index: 1; + } + + // Account for 4+ avatars + &:nth-child(n+4) { + z-index: 0; + display: none; + margin-left: -15px; + opacity: 0; + } + } + + &:hover .avatar:nth-child(n+4) { + display: inline-block; + margin-left: 0; + opacity: 1; + transition: opacity 0.1s, margin-left 0.1s; + } + + &:hover .avatar { + margin-right: 0; + } +} + +.avatar.avatar-more { + 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 { + z-index: 2; + width: 14px; + background: $gray-300; + } + + &::after { + width: 17px; + background: $gray-200; + } +} + +.navigation-focus .temp-avatar-stack { + background: lighten($blue-000, 1%); +} + +.commit-tease .temp-avatar-stack { + background: $blue-000; +} + +.temp-avatar-stack:hover .avatar-more { + display: none; +} From dbf4b84be8024428b5c0dbcbba31ed2508c3cabe Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:19:28 -0500 Subject: [PATCH 15/53] Rename AvatarStack --- modules/primer-avatars/lib/avatar-stack.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 680e3cca0b..6432183bb0 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -57,21 +57,21 @@ } } -.temp-avatar-stack-container { +.AvatarStack-container { min-width: 26px; height: 20px; position: relative; } -.authors-2 .temp-avatar-stack-container { +.authors-2 .AvatarStack-container { min-width: 36px !important; } -.authors-3 .temp-avatar-stack-container { +.authors-3 .AvatarStack-container { min-width: 46px !important; } -.temp-avatar-stack { +.AvatarStack { position: absolute; background: $bg-white; padding-right: 5px; @@ -160,14 +160,14 @@ } } -.navigation-focus .temp-avatar-stack { +.navigation-focus .AvatarStack { background: lighten($blue-000, 1%); } -.commit-tease .temp-avatar-stack { +.commit-tease .AvatarStack { background: $blue-000; } -.temp-avatar-stack:hover .avatar-more { +.AvatarStack:hover .avatar-more { display: none; } From 20b318633741d17ed35319514b618b4ce63aaede Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:34:04 -0500 Subject: [PATCH 16/53] Remove container (for now). And Authors 1&2 css. --- modules/primer-avatars/lib/avatar-stack.scss | 52 +++++--------------- 1 file changed, 13 insertions(+), 39 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 6432183bb0..0b5286fa8b 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -46,31 +46,6 @@ // Refactored, new avatar stack: -.temp-tooltipped-align-left { - &::after { - left: 0 !important; - margin-left: 0 !important; - } - - &::before { - left: 5px !important; - } -} - -.AvatarStack-container { - min-width: 26px; - height: 20px; - position: relative; -} - -.authors-2 .AvatarStack-container { - min-width: 36px !important; -} - -.authors-3 .AvatarStack-container { - min-width: 46px !important; -} - .AvatarStack { position: absolute; background: $bg-white; @@ -89,10 +64,6 @@ border-radius: 2px; transition: margin 0.1s ease-in-out; - // &:only-child { - // background-color: transparent; - // } - &:first-child { z-index: 3; } @@ -103,11 +74,9 @@ border-right: 0; } - // stylelint-disable selector-max-type img { border-radius: 2px; } - // stylelint-enable selector-max-type &:nth-child(3) { z-index: 1; @@ -130,7 +99,7 @@ } &:hover .avatar { - margin-right: 0; + margin-right: 3px; } } @@ -160,14 +129,19 @@ } } -.navigation-focus .AvatarStack { - background: lighten($blue-000, 1%); +.AvatarStack:hover .avatar-more { + display: none; } -.commit-tease .AvatarStack { - background: $blue-000; -} +// Temp tooltip class to position it correctly -.AvatarStack:hover .avatar-more { - display: none; +.temp-tooltipped-align-left { + &::after { + left: 0 !important; + margin-left: 0 !important; + } + + &::before { + left: 5px !important; + } } From db3ef6869908297d7ca6e893352b77ba7264f457 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:34:19 -0500 Subject: [PATCH 17/53] Add new AvatarStack to storybook --- modules/primer-avatars/stories.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index cf9aec8a7a..d0d8e20f76 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -26,6 +26,18 @@ storiesOf('Avatars', module)
)) +.add('AvatarStack', () => ( +
+
+ Uncle Cat + Uncle Cat +
+ Uncle Cat + Uncle Cat + Uncle Cat +
+
+)) .add('CircleBadge--small', () => (
From e003cd02331e5a15ccb24309517009bbe7dba4e0 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:45:24 -0500 Subject: [PATCH 18/53] lint --- modules/primer-avatars/lib/avatar-stack.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 0b5286fa8b..d9e09ea173 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -48,8 +48,8 @@ .AvatarStack { position: absolute; - background: $bg-white; padding-right: 5px; + background: $bg-white; .avatar { position: relative; @@ -74,9 +74,11 @@ border-right: 0; } + // stylelint-disable selector-max-type img { border-radius: 2px; } + // stylelint-enable selector-max-type &:nth-child(3) { z-index: 1; From f0393d7019d7481b7e5cbf8ef64c30f8e0a82e9c Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 16:41:35 -0500 Subject: [PATCH 19/53] Delete a lot of unnecessary (i think?) CSS --- modules/primer-avatars/lib/avatar-stack.scss | 21 ++------------------ modules/primer-avatars/stories.js | 6 +++++- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index d9e09ea173..21fe209593 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -47,9 +47,7 @@ // Refactored, new avatar stack: .AvatarStack { - position: absolute; - padding-right: 5px; - background: $bg-white; + background: inherit; .avatar { position: relative; @@ -80,24 +78,16 @@ } // stylelint-enable selector-max-type - &:nth-child(3) { - z-index: 1; - } - // Account for 4+ avatars &:nth-child(n+4) { - z-index: 0; display: none; - margin-left: -15px; opacity: 0; } } &:hover .avatar:nth-child(n+4) { display: inline-block; - margin-left: 0; opacity: 1; - transition: opacity 0.1s, margin-left 0.1s; } &:hover .avatar { @@ -106,12 +96,11 @@ } .avatar.avatar-more { + z-index: 1; margin-right: 0; background: $gray-100; - &::before, &::after { - position: absolute; display: block; height: 20px; content: ""; @@ -119,12 +108,6 @@ outline: $border-width $border-style $white; } - &::before { - z-index: 2; - width: 14px; - background: $gray-300; - } - &::after { width: 17px; background: $gray-200; diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index d0d8e20f76..584fc65171 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -28,7 +28,7 @@ storiesOf('Avatars', module) )) .add('AvatarStack', () => (
-
+
Uncle Cat Uncle Cat
@@ -36,6 +36,10 @@ storiesOf('Avatars', module) Uncle Cat Uncle Cat
+
+ Uncle Cat + Uncle Cat +
)) .add('CircleBadge--small', () => ( From 314b6300e90f70ec1996081b16967fc99cf40b93 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 16:47:11 -0500 Subject: [PATCH 20/53] cleanup --- modules/primer-avatars/lib/avatar-stack.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 21fe209593..ecb911b433 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -102,16 +102,13 @@ &::after { display: block; + width: 17px; height: 20px; content: ""; + background: $gray-200; border-radius: 2px; outline: $border-width $border-style $white; } - - &::after { - width: 17px; - background: $gray-200; - } } .AvatarStack:hover .avatar-more { From ef42395f02490fb40a9d3282cfee2fceef977436 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Tue, 31 Oct 2017 18:27:36 -0400 Subject: [PATCH 21/53] fix avatar-more styling --- modules/primer-avatars/lib/avatar-stack.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index ecb911b433..848b0cb864 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -100,15 +100,26 @@ margin-right: 0; background: $gray-100; + &::before, &::after { + position: absolute; display: block; - width: 17px; height: 20px; content: ""; - background: $gray-200; border-radius: 2px; outline: $border-width $border-style $white; } + + &::before { + z-index: 2; + width: 14px; + background: $gray-300; + } + + &::after { + width: 17px; + background: $gray-200; + } } .AvatarStack:hover .avatar-more { From e942b6dc48582d331c4db566cce6d92a4703f6f3 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Tue, 31 Oct 2017 18:33:35 -0400 Subject: [PATCH 22/53] implement container and switch classes around --- modules/primer-avatars/lib/avatar-stack.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 848b0cb864..2edfe5c439 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -47,6 +47,12 @@ // Refactored, new avatar stack: .AvatarStack { + position: relative; + min-width: 26px; + height: 20px; +} + +.AvatarStack-body { background: inherit; .avatar { @@ -122,7 +128,7 @@ } } -.AvatarStack:hover .avatar-more { +.AvatarStack-body:hover .avatar-more { display: none; } From ac78db0cf3721beb2b11dcd58236ae491ec05c06 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Tue, 31 Oct 2017 19:14:36 -0400 Subject: [PATCH 23/53] make avatar stacks position absolute, reduce margin --- modules/primer-avatars/lib/avatar-stack.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 2edfe5c439..1f211b7f93 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -53,7 +53,9 @@ } .AvatarStack-body { - background: inherit; + position: absolute; + background: $bg-white; + padding-right: 5px; .avatar { position: relative; @@ -97,7 +99,7 @@ } &:hover .avatar { - margin-right: 3px; + margin-right: 0; } } From 6af7e7625ef9f694803e010aa123284e2ef2a027 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Wed, 1 Nov 2017 00:11:08 -0400 Subject: [PATCH 24/53] fix linter --- modules/primer-avatars/lib/avatar-stack.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 1f211b7f93..c23068e02b 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -54,8 +54,8 @@ .AvatarStack-body { position: absolute; - background: $bg-white; padding-right: 5px; + background: $bg-white; .avatar { position: relative; From bb5bd3bad6909dda8c5768b43ae17d9e308d2910 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Wed, 1 Nov 2017 09:36:54 -0400 Subject: [PATCH 25/53] add specific sizes for avatar count --- modules/primer-avatars/lib/avatar-stack.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index c23068e02b..a680042ab0 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -50,11 +50,19 @@ position: relative; min-width: 26px; height: 20px; + + &.AvatarStack--2 { + min-width: 36px; + } + + &.AvatarStack--3 { + min-width: 46px; + } } .AvatarStack-body { position: absolute; - padding-right: 5px; + padding-right: $spacer-1; background: $bg-white; .avatar { From b3d3ebb3b908fc7bfdad0055721aa1f5e12f2288 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Wed, 1 Nov 2017 11:11:13 -0400 Subject: [PATCH 26/53] update storybook --- modules/primer-avatars/stories.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index 584fc65171..731af8a3f1 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -28,17 +28,21 @@ 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 +
)) From 0f6465d8b9eb9a66f93a373c0329c9745a803501 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 08:08:04 -0400 Subject: [PATCH 27/53] remove temp tooltip alignment css back to github/github --- modules/primer-avatars/lib/avatar-stack.scss | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index a680042ab0..02ed32ea6f 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -141,16 +141,3 @@ .AvatarStack-body:hover .avatar-more { display: none; } - -// Temp tooltip class to position it correctly - -.temp-tooltipped-align-left { - &::after { - left: 0 !important; - margin-left: 0 !important; - } - - &::before { - left: 5px !important; - } -} From 01b9f6711a74b021cbec944a28ee90faae6e8ab3 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Thu, 2 Nov 2017 12:28:37 -0400 Subject: [PATCH 28/53] add em unit to padding --- modules/primer-tooltips/lib/tooltips.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 5e79340ce0..7f77fed523 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -14,7 +14,7 @@ $tooltip-duration: 0.1s !default; position: absolute; z-index: 1000000; display: none; - padding: 0.375 0.5; + padding: 0.375em 0.5em; font: normal normal 11px/1.25 $body-font; -webkit-font-smoothing: subpixel-antialiased; color: $tooltip-text-color; From 62bba0bf45e642e6d9ed9cefb5b6ee5f40a62a9a Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Thu, 2 Nov 2017 12:28:51 -0400 Subject: [PATCH 29/53] missed a border variable --- modules/primer-tooltips/lib/tooltips.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 7f77fed523..972bdaeadc 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -42,7 +42,7 @@ $tooltip-duration: 0.1s !default; color: $tooltip-background-color; pointer-events: none; content: ""; - border: 6px solid transparent; + border: 6px $border-style transparent; opacity: 0; } From e374740f0c3c752f74aa2094adb140a09a61cc2d Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 15:27:31 -0400 Subject: [PATCH 30/53] add first version of non-working right aligned modifier --- modules/primer-avatars/lib/avatar-stack.scss | 45 ++++++++++++++++++++ modules/primer-avatars/stories.js | 25 +++++++++-- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 02ed32ea6f..2422911e7e 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -141,3 +141,48 @@ .AvatarStack-body:hover .avatar-more { display: none; } + +// Right aligned variation + +.AvatarStack--right { + + .AvatarStack-body { + right: 0; + } + + .avatar.avatar-more { + margin-right: -15px; + background: $gray-300; + + &::before { + background: $gray-100; + } + + &::after { + background: $gray-200; + } + } + + .avatar { + margin-right: 0; + margin-left: -15px; + border-right: 0; + border-left: $border-width $border-style $white; + + &:last-child { + z-index: 1; + margin-right: -15px; + margin-left: 0; + border-right: 0; + } + } + + &:hover .avatar:nth-child(n+4) { + display: inline-block; + opacity: 1; + } + + &:hover .avatar { + margin-left: 0; + } +} diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index 731af8a3f1..633dd51ce5 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -28,8 +28,8 @@ storiesOf('Avatars', module) )) .add('AvatarStack', () => (
-
-
+
+
Uncle Cat Uncle Cat
@@ -38,12 +38,29 @@ storiesOf('Avatars', module) Uncle Cat
-
-
+
+
Uncle Cat Uncle Cat
+
+
+ Uncle Cat + Uncle Cat +
+ Uncle Cat + Uncle Cat + Uncle Cat +
+
+
+
+ Uncle Cat + Uncle Cat +
+
+
)) .add('CircleBadge--small', () => ( From ff7967f57ad857761142d6f77e6c46f52206df75 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 16:55:33 -0400 Subject: [PATCH 31/53] refactor right align modifier, update storybook --- modules/primer-avatars/lib/avatar-stack.scss | 50 +++++++++++--------- modules/primer-avatars/stories.js | 10 ++-- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 2422911e7e..f327acf2a2 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -101,13 +101,19 @@ } } - &:hover .avatar:nth-child(n+4) { - display: inline-block; - opacity: 1; - } + &:hover { + .avatar:nth-child(n+4) { + display: inline-block; + opacity: 1; + } - &:hover .avatar { - margin-right: 0; + .avatar { + margin-right: 0; + } + + .avatar-more { + display: none !important; + } } } @@ -138,28 +144,36 @@ } } -.AvatarStack-body:hover .avatar-more { - display: none; -} - // Right aligned variation .AvatarStack--right { .AvatarStack-body { right: 0; + display: flex; + flex-direction: row-reverse; + + &:hover .avatar:nth-child(n+4) { + display: inline-block; + opacity: 1; + } + + &:hover .avatar { + margin-left: 0; + } } .avatar.avatar-more { - margin-right: -15px; background: $gray-300; &::before { background: $gray-100; + width: 2px; } &::after { background: $gray-200; + width: 6px; } } @@ -170,19 +184,9 @@ border-left: $border-width $border-style $white; &:last-child { - z-index: 1; - margin-right: -15px; + margin-right: 0; margin-left: 0; - border-right: 0; + border-left: 0; } } - - &:hover .avatar:nth-child(n+4) { - display: inline-block; - opacity: 1; - } - - &:hover .avatar { - margin-left: 0; - } } diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index 633dd51ce5..196548ea7e 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -45,17 +45,17 @@ storiesOf('Avatars', module)
-
- Uncle Cat - Uncle Cat +
+ Uncle Cat + Uncle Cat
- Uncle Cat + Uncle Cat Uncle Cat Uncle Cat
-
+
Uncle Cat Uncle Cat
From a03d4e6996c2762c364db3fcd758432f2d5e274e Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 17:34:15 -0400 Subject: [PATCH 32/53] modify spacing so it works with storybook --- modules/primer-avatars/lib/avatar-stack.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index f327acf2a2..78f1acd426 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -72,7 +72,7 @@ width: 20px; height: 20px; box-sizing: content-box; - margin-right: -15px; + margin-right: -11px; background-color: $bg-white; border-right: $border-width $border-style $white; border-radius: 2px; @@ -108,7 +108,7 @@ } .avatar { - margin-right: 0; + margin-right: 3px; } .avatar-more { @@ -159,7 +159,8 @@ } &:hover .avatar { - margin-left: 0; + margin-right: 0; + margin-left: 3px; } } @@ -173,13 +174,13 @@ &::after { background: $gray-200; - width: 6px; + width: 5px; } } .avatar { margin-right: 0; - margin-left: -15px; + margin-left: -11px; border-right: 0; border-left: $border-width $border-style $white; From 8cca4f5dd6c5398909868e652f616e50472182ff Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 17:34:24 -0400 Subject: [PATCH 33/53] white space workaround --- modules/primer-avatars/lib/avatar-stack.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 78f1acd426..67a6cef892 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -50,6 +50,7 @@ position: relative; min-width: 26px; height: 20px; + font-size: 0; &.AvatarStack--2 { min-width: 36px; From 9c57895293bf81391fb3194d1433df86be78c7ca Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 17:46:31 -0400 Subject: [PATCH 34/53] make ci happy --- modules/primer-avatars/lib/avatar-stack.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 67a6cef892..1060141b16 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -148,16 +148,17 @@ // Right aligned variation .AvatarStack--right { - .AvatarStack-body { right: 0; display: flex; flex-direction: row-reverse; + // stylelint-disable selector-max-specificity &:hover .avatar:nth-child(n+4) { display: inline-block; opacity: 1; } + // stylelint-enable selector-max-specificity &:hover .avatar { margin-right: 0; @@ -169,13 +170,13 @@ background: $gray-300; &::before { - background: $gray-100; width: 2px; + background: $gray-100; } &::after { - background: $gray-200; width: 5px; + background: $gray-200; } } From 80fd1fa6f51a6087a273205946bc117dc747a478 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 18:30:15 -0400 Subject: [PATCH 35/53] flip padding --- modules/primer-avatars/lib/avatar-stack.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 1060141b16..b0cd407fad 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -63,7 +63,7 @@ .AvatarStack-body { position: absolute; - padding-right: $spacer-1; + padding-right: 2px; background: $bg-white; .avatar { @@ -152,6 +152,8 @@ right: 0; display: flex; flex-direction: row-reverse; + padding-right: 0; + padding-left: 2px; // stylelint-disable selector-max-specificity &:hover .avatar:nth-child(n+4) { From 251036df91ac4549449bfb23d07246d612493cc1 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 18:47:48 -0400 Subject: [PATCH 36/53] refactor css --- modules/primer-avatars/lib/avatar-stack.scss | 32 ++++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index b0cd407fad..19bd21e5dc 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -83,12 +83,6 @@ z-index: 3; } - &:last-child { - z-index: 1; - margin-right: 0; - border-right: 0; - } - // stylelint-disable selector-max-type img { border-radius: 2px; @@ -103,15 +97,15 @@ } &:hover { + .avatar { + margin-right: 3px; + } + .avatar:nth-child(n+4) { display: inline-block; opacity: 1; } - .avatar { - margin-right: 3px; - } - .avatar-more { display: none !important; } @@ -134,14 +128,13 @@ } &::before { - z-index: 2; - width: 14px; - background: $gray-300; + width: 17px; + background: $gray-200; } &::after { - width: 17px; - background: $gray-200; + width: 14px; + background: $gray-300; } } @@ -151,9 +144,9 @@ .AvatarStack-body { right: 0; display: flex; - flex-direction: row-reverse; padding-right: 0; padding-left: 2px; + flex-direction: row-reverse; // stylelint-disable selector-max-specificity &:hover .avatar:nth-child(n+4) { @@ -172,13 +165,12 @@ background: $gray-300; &::before { - width: 2px; - background: $gray-100; + width: 5px; } &::after { - width: 5px; - background: $gray-200; + width: 2px; + background: $gray-100; } } From a73abaeb9a096f1e8a46bc5b954bc3c27dbff776 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 18:47:58 -0400 Subject: [PATCH 37/53] add margins to storybook --- modules/primer-avatars/stories.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index 196548ea7e..e218f38ec9 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -28,7 +28,7 @@ storiesOf('Avatars', module) )) .add('AvatarStack', () => (
-
+
Uncle Cat Uncle Cat @@ -38,13 +38,13 @@ storiesOf('Avatars', module) Uncle Cat
-
+
Uncle Cat Uncle Cat
-
+
Uncle Cat Uncle Cat @@ -54,7 +54,7 @@ storiesOf('Avatars', module) Uncle Cat
-
+
Uncle Cat Uncle Cat From 2fa1d3489769508195e46b16f631e9e54cdb21ed Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 18:52:29 -0400 Subject: [PATCH 38/53] replace inline-block with flexbox --- modules/primer-avatars/lib/avatar-stack.scss | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 19bd21e5dc..e13bff8e72 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -50,7 +50,6 @@ position: relative; min-width: 26px; height: 20px; - font-size: 0; &.AvatarStack--2 { min-width: 36px; @@ -63,13 +62,14 @@ .AvatarStack-body { position: absolute; + display: flex; padding-right: 2px; background: $bg-white; .avatar { position: relative; z-index: 2; - display: inline-block; + display: flex; width: 20px; height: 20px; box-sizing: content-box; @@ -102,7 +102,7 @@ } .avatar:nth-child(n+4) { - display: inline-block; + display: flex; opacity: 1; } @@ -143,18 +143,10 @@ .AvatarStack--right { .AvatarStack-body { right: 0; - display: flex; padding-right: 0; padding-left: 2px; flex-direction: row-reverse; - // stylelint-disable selector-max-specificity - &:hover .avatar:nth-child(n+4) { - display: inline-block; - opacity: 1; - } - // stylelint-enable selector-max-specificity - &:hover .avatar { margin-right: 0; margin-left: 3px; From ef0f1e516b8f834c5c928282d0457ff7663094a1 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Fri, 3 Nov 2017 10:59:54 -0400 Subject: [PATCH 39/53] re-add last child z-index --- modules/primer-avatars/lib/avatar-stack.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index e13bff8e72..e6b28cab7b 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -83,6 +83,10 @@ z-index: 3; } + &:last-child { + z-index: 1; + } + // stylelint-disable selector-max-type img { border-radius: 2px; From da3ae73e2a259376f8ceedcbb8af370ee39aa7e6 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Fri, 3 Nov 2017 12:33:05 -0400 Subject: [PATCH 40/53] remove padding now that avatars have margins --- modules/primer-avatars/lib/avatar-stack.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index e6b28cab7b..eac08fa001 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -63,7 +63,6 @@ .AvatarStack-body { position: absolute; display: flex; - padding-right: 2px; background: $bg-white; .avatar { @@ -147,8 +146,6 @@ .AvatarStack--right { .AvatarStack-body { right: 0; - padding-right: 0; - padding-left: 2px; flex-direction: row-reverse; &:hover .avatar { From 6ab65941fcfe9a36c8dadd66ed312ffbb310b050 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Fri, 3 Nov 2017 16:09:22 -0400 Subject: [PATCH 41/53] remove unrequired css --- modules/primer-avatars/lib/avatar-stack.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index eac08fa001..5e7c22843e 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -172,11 +172,5 @@ margin-left: -11px; border-right: 0; border-left: $border-width $border-style $white; - - &:last-child { - margin-right: 0; - margin-left: 0; - border-left: 0; - } } } From 9e9d9c1546d49a6ae9d9f21856ec5e34b5b32687 Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Mon, 6 Nov 2017 11:56:23 -0500 Subject: [PATCH 42/53] first draft for new avatar stack docs --- modules/primer-avatars/README.md | 52 ++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index d818dbcac5..31c6fa99ff 100644 --- a/modules/primer-avatars/README.md +++ b/modules/primer-avatars/README.md @@ -75,14 +75,54 @@ 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 - +
+ @jonrohan + @aaronshekey + @josh +
+``` + +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 +
+ @jonrohan + @aaronshekey +
+ @josh + @josh + @josh +
+``` + +You can also link individual avatars. To do this shift the `avatar` class over to the anchor: + +```html +
+ + @jonrohan + + + @josh + +
+``` + +If you'd like a right-aligned avatar stack, add the `AvatarStack--right` modifier class and switch the tooltips around: + +```html +
+ @jonrohan + @aaronshekey + @josh +
``` ## Circle Badge From 7e491e2e8cc6f0a3acf3886bf966f169492168a6 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 01:35:48 -0500 Subject: [PATCH 43/53] move position absolute into container class --- modules/primer-avatars/lib/avatar-stack.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 5e7c22843e..033ef60e7b 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -51,6 +51,10 @@ min-width: 26px; height: 20px; + .AvatarStack-body { + position: absolute; + } + &.AvatarStack--2 { min-width: 36px; } @@ -61,7 +65,6 @@ } .AvatarStack-body { - position: absolute; display: flex; background: $bg-white; From 03a3d751e0c69fdf552463f423f6415b2c7c0e2f Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 01:36:05 -0500 Subject: [PATCH 44/53] replace people avatars with octocats in storybook --- modules/primer-avatars/stories.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index e218f38ec9..f07c7d84c6 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -46,10 +46,10 @@ storiesOf('Avatars', module)
- Uncle Cat - Uncle Cat + Uncle Cat + Uncle Cat
- Uncle Cat + Uncle Cat Uncle Cat Uncle Cat
From 8b99d32a5afea6f34c6927ad7d2ba5c9ea6b4e1c Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 7 Nov 2017 01:38:33 -0500 Subject: [PATCH 45/53] update modifier class names --- modules/primer-avatars/lib/avatar-stack.scss | 4 ++-- modules/primer-avatars/stories.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 033ef60e7b..baab2a723c 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -55,11 +55,11 @@ position: absolute; } - &.AvatarStack--2 { + &.AvatarStack-two { min-width: 36px; } - &.AvatarStack--3 { + &.AvatarStack-three-plus { min-width: 46px; } } diff --git a/modules/primer-avatars/stories.js b/modules/primer-avatars/stories.js index f07c7d84c6..4759855490 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -28,7 +28,7 @@ storiesOf('Avatars', module) )) .add('AvatarStack', () => (
-
+
Uncle Cat Uncle Cat @@ -38,13 +38,13 @@ storiesOf('Avatars', module) Uncle Cat
-
+
Uncle Cat Uncle Cat
-
+
Uncle Cat Uncle Cat @@ -54,7 +54,7 @@ storiesOf('Avatars', module) Uncle Cat
-
+
Uncle Cat Uncle Cat From 4956549160ba89e4a07447c6b2a7b8d906f53b4e Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 9 Nov 2017 11:49:18 -0500 Subject: [PATCH 46/53] fix length modifiers --- modules/primer-avatars/lib/avatar-stack.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index baab2a723c..4457a361a0 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -55,11 +55,11 @@ position: absolute; } - &.AvatarStack-two { + &.AvatarStack--two { min-width: 36px; } - &.AvatarStack-three-plus { + &.AvatarStack--three-plus { min-width: 46px; } } From c2a392f65c81f837c24ba895b869650000f6792a Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Mon, 13 Nov 2017 12:02:27 -0500 Subject: [PATCH 47/53] replace employees with octocats, remove redundant alts --- modules/primer-avatars/README.md | 36 ++++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index 31c6fa99ff..232aea285c 100644 --- a/modules/primer-avatars/README.md +++ b/modules/primer-avatars/README.md @@ -78,10 +78,10 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly 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
``` @@ -92,36 +92,36 @@ Based on the number of avatars in the stack, add these modifier classes: 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 -
- @jonrohan - @aaronshekey +
+ @octocat + @octocat
- @josh - @josh - @josh + @octocat + @octocat + @octocat
``` You can also link individual avatars. To do this shift the `avatar` class over to the anchor: ```html -
+
- @jonrohan + @octocat - @josh + @octocat
``` -If you'd like a right-aligned avatar stack, add the `AvatarStack--right` modifier class and switch the tooltips around: +Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change. ```html -
- @jonrohan - @aaronshekey - @josh +
+ @octocat + @octocat + @octocat
``` From 9fec40de9a98160e1cd2a889b83a9b64703beeef Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Mon, 13 Nov 2017 15:57:03 -0500 Subject: [PATCH 48/53] Add AvatarStack-body to the readme file --- modules/primer-avatars/README.md | 52 ++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index 232aea285c..f57d95ff4c 100644 --- a/modules/primer-avatars/README.md +++ b/modules/primer-avatars/README.md @@ -78,10 +78,12 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly 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 -
- @octocat - @octocat - @octocat +
+
+ @octocat + @octocat + @octocat +
``` @@ -92,36 +94,42 @@ Based on the number of avatars in the stack, add these modifier classes: 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 +
+
+ @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 - +
+
+ + @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 +
+
+ @octocat + @octocat + @octocat +
``` From 37f657a5ebaf74609c36153d9dfc84131e9520dd Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Tue, 14 Nov 2017 16:32:30 -0500 Subject: [PATCH 49/53] increase padding and put back to default lineheight --- modules/primer-tooltips/lib/tooltips.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-tooltips/lib/tooltips.scss b/modules/primer-tooltips/lib/tooltips.scss index 972bdaeadc..7b4be9ca94 100644 --- a/modules/primer-tooltips/lib/tooltips.scss +++ b/modules/primer-tooltips/lib/tooltips.scss @@ -14,8 +14,8 @@ $tooltip-duration: 0.1s !default; position: absolute; z-index: 1000000; display: none; - padding: 0.375em 0.5em; - font: normal normal 11px/1.25 $body-font; + padding: 0.5em 0.75em; + font: normal normal 11px/1.5 $body-font; -webkit-font-smoothing: subpixel-antialiased; color: $tooltip-text-color; text-align: center; From ec460a5ef492f4319d31e622fdc0e7bba4162e05 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Wed, 15 Nov 2017 12:14:55 -0500 Subject: [PATCH 50/53] udpate readme with caret variations --- modules/primer-tooltips/README.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/modules/primer-tooltips/README.md b/modules/primer-tooltips/README.md index 2eb46e0741..35b68e2244 100644 --- a/modules/primer-tooltips/README.md +++ b/modules/primer-tooltips/README.md @@ -86,17 +86,31 @@ Tooltip classes will conflict with Octicon classes, and as such, must go on a pa ### Align tooltips +Tooltips can be aligned to the left or right of an element, and come with 2 variations for indenting the caret. + ```html - + + Tooltip North East align left + + Tooltip North East align left - + + Tooltip South East align left + + Tooltip South East align left - + Tooltip North West align right - + + Tooltip North West align right + + + Tooltip South West align right + + Tooltip South West align right ``` From e75a3bd4f263546a70f5f4b6a416e9100eaeb6e6 Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Wed, 15 Nov 2017 12:17:44 -0500 Subject: [PATCH 51/53] Revert "Merge branch 'release-10.1.0' into brocs/tooltips" This reverts commit f5ef7d3878a7c67e5285624a00951e38192d92f5, reversing changes made to 2145536f45d78d4ac02e8626e2b6d2cd0ce6492f. --- CHANGELOG.md | 6 - modules/primer-avatars/README.md | 60 +------- modules/primer-avatars/lib/avatar-stack.scss | 134 ------------------ modules/primer-avatars/stories.js | 37 ----- modules/primer-marketing-buttons/package.json | 4 +- modules/primer-marketing/package.json | 4 +- modules/primer-popover/package.json | 4 +- modules/primer-product/package.json | 4 +- modules/primer/package.json | 10 +- 9 files changed, 19 insertions(+), 244 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c740c752de..291d14f8df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,3 @@ -# 10.0.1 (2017-11-14) - -#### :bug: Bug Fix - -* Fixing `peerDependencies` to be greater than equal to versions. Fixing version mismatch with buttons and box. - # 10.0.0 (2017-11-13) #### :boom: Breaking Change diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index c2a7436dc2..c2e1d98c8b 100644 --- a/modules/primer-avatars/README.md +++ b/modules/primer-avatars/README.md @@ -75,62 +75,14 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly ### Avatar 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. +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. ```html -
-
- @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 -
-
+ + @jonrohan + @aaronshekey + @josh + ``` ## Circle Badge diff --git a/modules/primer-avatars/lib/avatar-stack.scss b/modules/primer-avatars/lib/avatar-stack.scss index 4457a361a0..884f6a528d 100644 --- a/modules/primer-avatars/lib/avatar-stack.scss +++ b/modules/primer-avatars/lib/avatar-stack.scss @@ -43,137 +43,3 @@ } } } - -// 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 index 4759855490..cf9aec8a7a 100644 --- a/modules/primer-avatars/stories.js +++ b/modules/primer-avatars/stories.js @@ -26,43 +26,6 @@ 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-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json index 30692637f5..24cd42d105 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.0", "name": "primer-marketing-buttons", "description": "Buttons for marketing websites at GitHub", "homepage": "http://primer.github.io/", @@ -31,7 +31,7 @@ "primer-support": "4.4.2" }, "peerDependencies": { - "primer-buttons": ">=2.5.0" + "primer-buttons": "2.4.1" }, "keywords": [ "css", diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json index c66cc37e20..9e43d94395 100644 --- a/modules/primer-marketing/package.json +++ b/modules/primer-marketing/package.json @@ -1,5 +1,5 @@ { - "version": "6.0.1", + "version": "6.0.0", "name": "primer-marketing", "description": "Primer marketing packages", "homepage": "http://primer.github.io/", @@ -26,7 +26,7 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-marketing-buttons": "1.0.1", + "primer-marketing-buttons": "1.0.0", "primer-marketing-support": "1.3.2", "primer-marketing-type": "1.4.2", "primer-marketing-utilities": "1.5.0", diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json index e2607fe393..f06bec8c5b 100644 --- a/modules/primer-popover/package.json +++ b/modules/primer-popover/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.3", + "version": "0.0.2", "name": "primer-popover", "description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.", "homepage": "http://primer.github.io/", @@ -26,7 +26,7 @@ "primer-support": "4.4.2" }, "peerDependencies": { - "primer-box": ">=2.5.0" + "primer-box": "2.5.1" }, "keywords": [ "github", diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json index 84b6a8e85f..cceb69d764 100644 --- a/modules/primer-product/package.json +++ b/modules/primer-product/package.json @@ -1,5 +1,5 @@ { - "version": "5.5.1", + "version": "5.5.0", "name": "primer-product", "description": "Primer's product modules", "homepage": "http://primer.github.io/", @@ -32,7 +32,7 @@ "primer-branch-name": "1.0.0", "primer-labels": "1.5.2", "primer-markdown": "3.7.2", - "primer-popover": "0.0.3", + "primer-popover": "0.0.2", "primer-subhead": "1.0.0", "primer-support": "4.4.2" } diff --git a/modules/primer/package.json b/modules/primer/package.json index b87e1bc3b4..3bfb6cc193 100644 --- a/modules/primer/package.json +++ b/modules/primer/package.json @@ -1,5 +1,5 @@ { - "version": "10.0.1", + "version": "10.0.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/", @@ -40,16 +40,16 @@ "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": "6.0.0", + "primer-marketing-buttons": "1.0.0", "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-popover": "0.0.2", + "primer-product": "5.5.0", "primer-subhead": "1.0.0", "primer-support": "4.4.2", "primer-table-object": "1.4.2", From 4b708354d057ab5aae57dddf4b3adf7155c68eed Mon Sep 17 00:00:00 2001 From: Diana Mounter Date: Wed, 15 Nov 2017 12:24:28 -0500 Subject: [PATCH 52/53] Revert "Merge branch 'release-10.1.0' into brocs/tooltips" This reverts commit 2145536f45d78d4ac02e8626e2b6d2cd0ce6492f, reversing changes made to 37f657a5ebaf74609c36153d9dfc84131e9520dd. --- .github/CONTRIBUTING.md | 8 +- .gitignore | 1 - .storybook/config.js | 5 +- .storybook/lib/storiesFromMarkdown.js | 14 +- .travis.yml | 6 +- CHANGELOG.md | 75 ++--- README.md | 24 +- lerna.json | 12 - modules/README.md | 2 +- modules/primer-alerts/README.md | 10 +- modules/primer-alerts/package.json | 12 +- modules/primer-avatars/README.md | 10 +- modules/primer-avatars/package.json | 12 +- modules/primer-base/README.md | 10 +- modules/primer-base/lib/base.scss | 11 - modules/primer-base/lib/normalize.scss | 4 +- modules/primer-base/package.json | 12 +- modules/primer-base/stories.js | 7 - modules/primer-blankslate/README.md | 10 +- modules/primer-blankslate/package.json | 12 +- modules/primer-box/README.md | 10 +- modules/primer-box/package.json | 12 +- modules/primer-branch-name/README.md | 10 +- modules/primer-branch-name/package.json | 10 +- modules/primer-breadcrumb/README.md | 8 +- modules/primer-breadcrumb/package.json | 12 +- modules/primer-buttons/README.md | 99 +++--- modules/primer-buttons/lib/button.scss | 9 - modules/primer-buttons/package.json | 12 +- modules/primer-buttons/stories.js | 11 - modules/primer-core/README.md | 10 +- modules/primer-core/index.scss | 2 +- modules/primer-core/package.json | 34 +- .../LICENSE | 0 modules/{primer => primer-css}/README.md | 18 +- modules/{primer => primer-css}/index.scss | 2 +- modules/primer-css/package.json | 66 ++++ modules/primer-dropdown/README.md | 312 ++++++++++++++++++ modules/primer-dropdown/index.scss | 2 + modules/primer-dropdown/lib/dropdown.scss | 262 +++++++++++++++ modules/primer-dropdown/package.json | 39 +++ modules/primer-forms/README.md | 13 +- modules/primer-forms/package.json | 12 +- modules/primer-labels/README.md | 10 +- modules/primer-labels/package.json | 12 +- modules/primer-layout/README.md | 10 +- modules/primer-layout/docs/grid.md | 2 +- modules/primer-layout/package.json | 12 +- modules/primer-markdown/README.md | 10 +- modules/primer-markdown/lib/code.scss | 19 +- modules/primer-markdown/lib/lists.scss | 4 - modules/primer-markdown/package.json | 8 +- modules/primer-markdown/stories.js | 18 - modules/primer-marketing-buttons/.npmignore | 2 - modules/primer-marketing-buttons/README.md | 89 ----- modules/primer-marketing-buttons/index.scss | 3 - .../primer-marketing-buttons/lib/button.scss | 24 -- modules/primer-marketing-buttons/package.json | 44 --- modules/primer-marketing-buttons/stories.js | 21 -- modules/primer-marketing-support/README.md | 8 +- modules/primer-marketing-support/package.json | 10 +- modules/primer-marketing-type/README.md | 6 +- modules/primer-marketing-type/package.json | 14 +- modules/primer-marketing-utilities/README.md | 8 +- .../docs/borders.md | 20 +- .../primer-marketing-utilities/docs/layout.md | 33 -- modules/primer-marketing-utilities/index.scss | 1 - .../lib/borders.scss | 3 - .../lib/layout.scss | 15 - .../primer-marketing-utilities/package.json | 14 +- modules/primer-marketing-utilities/stories.js | 21 -- modules/primer-marketing/README.md | 10 +- modules/primer-marketing/index.scss | 3 +- modules/primer-marketing/package.json | 25 +- modules/primer-navigation/README.md | 140 +------- modules/primer-navigation/index.scss | 1 - .../primer-navigation/lib/underline-nav.scss | 72 ---- modules/primer-navigation/package.json | 12 +- modules/primer-navigation/stories.js | 10 - modules/primer-page-headers/README.md | 6 +- modules/primer-page-headers/package.json | 14 +- modules/primer-page-sections/README.md | 8 +- modules/primer-page-sections/package.json | 14 +- modules/primer-popover/LICENSE | 21 -- modules/primer-popover/README.md | 208 ------------ modules/primer-popover/index.scss | 3 - modules/primer-popover/lib/popover.scss | 180 ---------- modules/primer-popover/package.json | 35 -- modules/primer-popover/stories.js | 10 - modules/primer-product/README.md | 10 +- modules/primer-product/index.scss | 4 +- modules/primer-product/package.json | 28 +- modules/primer-subhead/README.md | 10 +- modules/primer-subhead/package.json | 10 +- modules/primer-support/README.md | 8 +- modules/primer-support/docs/breakpoints.md | 2 +- modules/primer-support/docs/color-system.md | 2 +- modules/primer-support/docs/spacing.md | 2 +- modules/primer-support/docs/typography.md | 2 +- modules/primer-support/package.json | 10 +- modules/primer-table-object/README.md | 10 +- modules/primer-table-object/package.json | 12 +- modules/primer-tables/README.md | 6 +- modules/primer-tables/package.json | 14 +- modules/primer-tooltips/README.md | 10 +- modules/primer-tooltips/package.json | 12 +- modules/primer-truncate/README.md | 10 +- modules/primer-truncate/package.json | 12 +- modules/primer-utilities/README.md | 10 +- modules/primer-utilities/docs/animations.md | 18 - modules/primer-utilities/docs/borders.md | 7 +- modules/primer-utilities/docs/margin.md | 4 +- modules/primer-utilities/docs/padding.md | 4 +- modules/primer-utilities/lib/animations.scss | 34 +- modules/primer-utilities/lib/borders.scss | 2 - modules/primer-utilities/package.json | 12 +- modules/primer-utilities/stories/Animation.js | 9 - modules/primer-utilities/stories/Borders.js | 9 - .../primer-utilities/stories/Typography.js | 2 +- modules/primer/LICENSE | 21 -- modules/primer/package.json | 67 ---- package.json | 6 +- script/check-imports | 8 +- script/get-release-version | 2 +- script/notify | 4 +- script/release | 4 - script/release-candidate | 12 +- script/release-pr | 4 - script/version | 2 +- tools/generator-primer-module/README.md | 10 +- tools/generator-primer-module/app/options.js | 4 +- .../app/templates/README.md | 10 +- .../app/templates/package.json | 6 +- tools/generator-primer-module/package.json | 12 +- .../test/generator.spec.js | 4 +- tools/stylelint-config-primer/README.md | 2 +- tools/stylelint-config-primer/package.json | 8 +- tools/stylelint-selector-no-utility/README.md | 6 +- .../package.json | 6 +- 139 files changed, 1193 insertions(+), 1725 deletions(-) delete mode 100644 modules/primer-base/stories.js rename modules/{primer-marketing-buttons => primer-css}/LICENSE (100%) rename modules/{primer => primer-css}/README.md (55%) rename modules/{primer => primer-css}/index.scss (93%) create mode 100644 modules/primer-css/package.json create mode 100644 modules/primer-dropdown/README.md create mode 100644 modules/primer-dropdown/index.scss create mode 100644 modules/primer-dropdown/lib/dropdown.scss create mode 100644 modules/primer-dropdown/package.json delete mode 100644 modules/primer-markdown/stories.js delete mode 100644 modules/primer-marketing-buttons/.npmignore delete mode 100644 modules/primer-marketing-buttons/README.md delete mode 100644 modules/primer-marketing-buttons/index.scss delete mode 100644 modules/primer-marketing-buttons/lib/button.scss delete mode 100644 modules/primer-marketing-buttons/package.json delete mode 100644 modules/primer-marketing-buttons/stories.js delete mode 100644 modules/primer-marketing-utilities/docs/layout.md delete mode 100644 modules/primer-marketing-utilities/lib/layout.scss delete mode 100644 modules/primer-marketing-utilities/stories.js delete mode 100644 modules/primer-navigation/lib/underline-nav.scss delete mode 100644 modules/primer-navigation/stories.js delete mode 100644 modules/primer-popover/LICENSE delete mode 100644 modules/primer-popover/README.md delete mode 100644 modules/primer-popover/index.scss delete mode 100644 modules/primer-popover/lib/popover.scss delete mode 100644 modules/primer-popover/package.json delete mode 100644 modules/primer-popover/stories.js delete mode 100644 modules/primer-utilities/stories/Animation.js delete mode 100644 modules/primer-utilities/stories/Borders.js delete mode 100644 modules/primer/LICENSE delete mode 100644 modules/primer/package.json diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 490070ea38..b417cf5fc7 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -2,7 +2,7 @@ [fork]: https://github.com/github/primer/fork [pr]: https://github.com/github/primer/compare -[style]: http://primer.github.io/guidelines/ +[style]: http://primercss.io/guidelines/ Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great. @@ -59,16 +59,16 @@ Good pull requestsβ€”patches, improvements, new featuresβ€”are a fantastic help. ### Updating Primer modules -Anyone can open a pull request on Primer. You do not need to work at GitHub or be a member of the org to open a pull request. +Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request. -1. Fork and clone [this repository](https://github.com/primer/primer). +1. Fork and clone [this repository](https://github.com/primer/primer-css). 2. Configure and install the dependencies: `npm install` 3. Check out the dev branch `git checkout dev` 3. Create a new branch from dev `git checkout -b my-branch-name` 4. Make your changes and commit them. 5. Push your branch and open a pull request against `dev`. Add a comment describing your proposed changes and request a review from `@primer/ds-core`. 6. Wait for CI tests to finish. - - If the tests pass, you should see a status check telling you which alpha version of primer you can install with npm to test your work in other projects. + - If the tests pass, you should see a status check telling you which alpha version of primer-css you can install with npm to test your work in other projects. - If the tests fail, review the logs and address any issues. - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted. 7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff. diff --git a/.gitignore b/.gitignore index c92f6eba03..d772cba81f 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,3 @@ node_modules build _site *.lerna_backup -.changelog diff --git a/.storybook/config.js b/.storybook/config.js index c0195d32c9..97c1c24eed 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,11 +1,11 @@ import React from 'react' import { configure, addDecorator } from '@storybook/react' import { setOptions } from '@storybook/addon-options' -import '../modules/primer/index.scss' +import '../modules/primer-css/index.scss' setOptions({ name: 'Primer', - url: 'http://primer.github.io/', + url: 'http://primercss.io/', showDownPanel: false, }) @@ -16,6 +16,7 @@ addDecorator(story => ( )) const contexts = [ + require.context('.', true, /\.js$/), require.context('../modules', true, /stories.*\.js$/), ] diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 72348f2f1f..440ddb67f2 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -4,23 +4,11 @@ import select from 'unist-util-select' import findBefore from 'unist-util-find-before' import htmlToReact from 'html-to-react' import parsePairs from 'parse-pairs' -import React from 'react' -import ReactDOMServer from 'react-dom/server' -import {Octicon} from '../Octicon' const htmlParser = new htmlToReact.Parser() -const railsOcticonToReact = (html) => { - // <%= octicon "tools" %> to - const octre = /<%= octicon ["']([a-z\-]+)["'][^%]*%>/gi - html = html.replace(octre, (match, name) => { - return ReactDOMServer.renderToStaticMarkup() - }) - return html -} - const nodeToStory = (node, file) => { - const html = railsOcticonToReact(node.value) + const html = node.value const element = htmlParser.parse(html) const pairs = node.lang.replace(/^html\s*/, '') const attrs = pairs.length ? parsePairs(pairs) : {} diff --git a/.travis.yml b/.travis.yml index 70254112bb..d666065e2c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,8 +8,6 @@ env: - secure: "EZewKKWQXmtCwPtYrPZq4OQblv2OyXR61qBIl3pOxGNVG2BCjD6VOgSaiYqkA9Qbt+ihfwQkiiLvTB68gbvRSiBFV9i+XLzKzt4S8CDI5RhTLAxZB3eQFVZRYzldchzWI4sdNhTvYS1kYXmsXQZD6vJmPSnFvOI/ddfzqvnNL4M=" # github - secure: "J+1oWjvvXjyrwkY/4IFWKdN/weFmQcPwlRuFG4R0Gb3rYe4nqtC9l68sJvmS8asc8dQMhOhcUZCH6sjvo7l2WD4NuK4umPSbs+rJNUsfbvH4pZjStQIj/3ll1OfQelGDWAYQWhIfciYY4F3Bp0ZWTfKOppLQ2AVIYu1fPVXDdlo=" - # github changelog - - secure: "KcGydAqL7ryDh2rTJJB4wU8NE5BRtnrRXDEcPBScSscO3zFsHXHBDvvO04B/9hFVatXzGYXmkn+FZ0P9QikhvebzdwwyqUG2SKFiHhMvbX0m0WtAhn5NqDuKU1r5qy5YQ18r/tiLfC9GSAlEpfLAH58pwpcn8srV3Mn/yKvlrfs=" script: - npm test @@ -17,8 +15,8 @@ script: after_success: # this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY - npm config set "//registry.npmjs.org/:_authToken=\${NPM_API_KEY}" - # copy the CHANGELOG.md primer for publishing - - cp CHANGELOG.md modules/primer + # copy the CHANGELOG.md primer-css for publishing + - cp CHANGELOG.md modules/primer-css - script/after_success deploy: diff --git a/CHANGELOG.md b/CHANGELOG.md index 291d14f8df..90c95b7b40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,50 +1,17 @@ -# 10.0.0 (2017-11-13) - -#### :boom: Breaking Change -* [#395](https://github.com/primer/primer/pull/395) Renaming primer-css to primer. ([@jonrohan](https://github.com/jonrohan)) -* [#379](https://github.com/primer/primer/pull/379) Deprecating primer-cards and form-cards. ([@jonrohan](https://github.com/jonrohan)) -* [#336](https://github.com/primer/primer/pull/336) Move `primer-breadcrumbs` from marketing to core ([@jonrohan]((https://github.com/jonrohan)) - -#### :rocket: Enhancement -* [#371](https://github.com/primer/primer/pull/371) Add .details-reset. ([@muan](https://github.com/muan)) -* [#375](https://github.com/primer/primer/pull/375) New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle. ([@sophshep](https://github.com/sophshep)) -* [#383](https://github.com/primer/primer/pull/383) Add 'Popover' component. ([@brandonrosage](https://github.com/brandonrosage)) -* [#377](https://github.com/primer/primer/pull/377) Refactor and add underline nav component. ([@ampinsk](https://github.com/ampinsk)) -* [#337](https://github.com/primer/primer/pull/337) Add marketing buttons to primer-marketing. ([@gladwearefriends](https://github.com/gladwearefriends)) -* [#342](https://github.com/primer/primer/pull/342) Add Subhead component. ([@shawnbot](https://github.com/shawnbot)) -* [#341](https://github.com/primer/primer/pull/341) Add branch-name component from github/github. ([@shawnbot](https://github.com/shawnbot)) - -#### :bug: Bug Fix -* [#360](https://github.com/primer/primer/pull/360) Remove ::before ::after padding hack on markdown. ([@jonrohan](https://github.com/jonrohan)) -* [#320](https://github.com/primer/primer/pull/320) Remove -webkit-text-decoration-skip override. ([@antons](https://github.com/antons)) -* [#359](https://github.com/primer/primer/pull/359) Change markdown li break to handle Safari 10.x user stylesheet bug. ([@feministy](https://github.com/feministy)) -* [#388](https://github.com/primer/primer/pull/388) Button border-radius fix to override Chroma 62. ([@broccolini](https://github.com/broccolini)) -* [#307](https://github.com/primer/primer/pull/307) Do not suppress opacity transition for tooltipped-no-delay. ([@astorije](https://github.com/astorije)) - -#### :house: Internal -* [#396](https://github.com/primer/primer/pull/396) Use lerna-changelog to generate a changelog. ([@jonrohan](https://github.com/jonrohan)) -* [#382](https://github.com/primer/primer/pull/382) Update Button docs. ([@JasonEtco](https://github.com/JasonEtco)) -* [#390](https://github.com/primer/primer/pull/390) Updating `storiesFromMarkdown` to read in rails Octicons helper and replace with react component. ([@jonrohan](https://github.com/jonrohan)) -* [#389](https://github.com/primer/primer/pull/389) Publish alpha release any time we're not on a release branch or master. ([@jonrohan](https://github.com/jonrohan)) -* [#384](https://github.com/primer/primer/pull/384) Add test to check for the current year in the license and source. ([@jonrohan](https://github.com/jonrohan)) -* [#374](https://github.com/primer/primer/pull/374) Improve Pull Request template. ([@agisilaos](https://github.com/agisilaos)) - -#### Committers: 13 -- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos)) -- Amanda Pinsker ([ampinsk](https://github.com/ampinsk)) -- Anton Sotkov ([antons](https://github.com/antons)) -- Brandon Rosage ([brandonrosage](https://github.com/brandonrosage)) -- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) -- Diana Mounter ([broccolini](https://github.com/broccolini)) -- Jason Etcovitch ([JasonEtco](https://github.com/JasonEtco)) -- Jon Rohan ([jonrohan](https://github.com/jonrohan)) -- JΓ©rΓ©mie Astori ([astorije](https://github.com/astorije)) -- Mu-An ✌️ Chiou ([muan](https://github.com/muan)) -- Shawn Allen ([shawnbot](https://github.com/shawnbot)) -- Sophie Shepherd ([sophshep](https://github.com/sophshep)) -- liz abinante! ([feministy](https://github.com/feministy)) - -**Special thanks to @shaharke for transferring ownership of the Primer npm package to us so that we could make the rename happen!** :heart: +# 10.0.0 + +### Added +- New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. +- Importing `.input-group` into `primer-forms` module. +- New module `primer-branch-name` "A nice, consistent way to display branch names." +- New module `primer-dropdown` "A lightweight context menu for navigation and actions." + +### Removed +- Removing `primer-cards` module. +- Removing `.form-cards` styles. + +### Changes +- Moving `primer-breadcrumb` from `primer-marketing` to `primer-core` # 9.6.0 @@ -72,7 +39,7 @@ - Add deprecation warnings for `primer-cards` and `primer-forms/lib/form-validation.scss` #347 (these will be removed in v10.0.0) ### Changes -- Update npm metadata for `primer`, `primer-core`, `primer-product`, and `primer-marketing` #328 +- Update npm metadata for `primer-css`, `primer-core`, `primer-product`, and `primer-marketing` #328 - Remove `HEAD` heading from the changelog #327 # 9.3.0 @@ -84,7 +51,7 @@ ## Changes - Removes `docs` from `gitignore` - Removes the `^` from all dependencies so that we can publish exact versions -- Consolidates release notes from various sources into one changelog located in `/modules/primer/CHANGELOG.md` +- Consolidates release notes from various sources into one changelog located in `/modules/primer-css/CHANGELOG.md` # 9.2.0 @@ -95,7 +62,7 @@ ## Changes - Remove per-module configurations (`.gitignore`, `.postcss.json`, `.stylelintrc.json`) and `CHANGELOG.md` files in #284 -- Replace most static `font-size`, `font-weight`, and `line-height` CSS property values with their [SCSS variable equivalents](https://github.com/primer/primer/blob/c9ea37316fbb73c4d9931c52b42bc197260c0bf6/modules/primer-support/lib/variables/typography.scss#L12-L33) in #252 +- Replace most static `font-size`, `font-weight`, and `line-height` CSS property values with their [SCSS variable equivalents](https://github.com/primer/primer-css/blob/c9ea37316fbb73c4d9931c52b42bc197260c0bf6/modules/primer-support/lib/variables/typography.scss#L12-L33) in #252 - Refactor CI scripts to use Travis conditional deployment for release candidate and final release publish steps in #290 # 9.1.1 @@ -142,7 +109,7 @@ This release also includes major improvements to our Travis build scripts to aut We discovered that `primer-core` specified and outdated version of `primer-base` in it's dependencies. The outdated version did not have `normalize.scss` included which could cause some issues. This has issue occurred during v7.0.0 when creating the new monorepo. Also fixes repo urls in `package.json` for individual packages. -See PR [#243](https://github.com/primer/primer/pull/243) +See PR [#243](https://github.com/primer/primer-css/pull/243) ## Changes @@ -187,7 +154,7 @@ See PR [#243](https://github.com/primer/primer/pull/243) # 8.0.0 - Imports -Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer/pull/239) +Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer-css/pull/239) ## Changes @@ -203,7 +170,7 @@ Fixes issues with the ordering of imports in each of our meta-packages. See PR [ # 7.0.0 - Monorepo -In an effort to improve our publishing workflow we turned Primer into a monorepo, made this repo the source of truth for Primer by removing Primer modules from GitHub, and setup Lerna for managing multiple packages and maintaining independent versioning for all our modules. +In an effort to improve our publishing workflow we turned Primer CSS into a monorepo, made this repo the source of truth for Primer by removing Primer modules from GitHub, and setup Lerna for managing multiple packages and maintaining independent versioning for all our modules. This is exciting because: @@ -212,7 +179,7 @@ This is exciting because: - we no longer have files like package.json, scripts, and readme's in the GitHub app that don't really belong there - **we can accept pull requests from external contributors** again! -See PR for more details on this change: https://github.com/primer/primer/pull/230 +See PR for more details on this change: https://github.com/primer/primer-css/pull/230 ## Other changes: diff --git a/README.md b/README.md index 2863a4fcd9..eaae719dea 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,29 @@ -# Primer +# Primer CSS -[![npm version](http://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) +[![npm version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -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. +Primer is the CSS framework that powers GitHub's front-end design. Primer CSS 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. ## Packages -The Primer repo is managed as a monorepo that is composed of many npm packages. +The Primer CSS repo is managed as a monorepo that is composed of many npm packages. ### Core 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-css](/modules/primer-css)**
Includes all 23 packages | [![npm](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.com/package/primer-css) | | [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) | ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command. +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command. ```sh -$ npm install --save primer +$ npm install --save primer-css ``` ## Usage @@ -31,7 +31,7 @@ $ npm install --save primer The source files included are written in [Sass][sass] (SCSS). After [installing](#install) with npm, you can add your project's `node_modules` directory to your Sass [include paths](https://github.com/sass/node-sass#includepaths) (AKA [load paths](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/) in Ruby), then import it like this: ```scss -@import "primer/index.scss"; +@import "primer-css/index.scss"; ``` You can import individual Primer modules by installing them with npm, for instance: @@ -46,10 +46,10 @@ Then, you would import the module with: @import "primer-navigation/index.scss"; ``` -Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`packages` directory](./packages) like so: +Or, while you're figuring out which modules you need, you can import them directly from the `primer-css` [`packages` directory](./packages) like so: ```scss -@import "primer/modules/primer-navigation/index.css"; +@import "primer-css/modules/primer-navigation/index.css"; ``` @@ -70,7 +70,7 @@ You can read more about primer in the [docs][docs]. [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/lerna.json b/lerna.json index c0e596e607..eb4467fe38 100644 --- a/lerna.json +++ b/lerna.json @@ -4,17 +4,5 @@ "modules/*", "tools/*" ], - "changelog": { - "repo": "primer/primer", - "labels": { - "Tag: Breaking Change": ":boom: Breaking Change", - "Tag: Enhancement": ":rocket: Enhancement", - "Tag: Bug Fix": ":bug: Bug Fix", - "Tag: Polish": ":nail_care: Polish", - "Tag: Documentation": ":memo: Documentation", - "Tag: Internal": ":house: Internal" - }, - "cacheDir": ".changelog" - }, "version": "independent" } diff --git a/modules/README.md b/modules/README.md index fb2ad7f799..4b22c24608 100644 --- a/modules/README.md +++ b/modules/README.md @@ -1,3 +1,3 @@ # Primer modules -Primer is monorepo composed of 23 packages which can be installed altogether or individually via npm. We group our packages into 3 meta-packages which you can install individually: [primer-core](primer-core), [primer-product](primer-product), and [primer-marketing](primer-marketing). Install [primer](primer) if you want to install all 23 packages. +Primer CSS is monorepo composed of 23 packages which can be installed altogether or individually via npm. We group our packages into 3 meta-packages which you can install individually: [primer-core](primer-core), [primer-product](primer-product), and [primer-marketing](primer-marketing). Install [primer-css](primer-css) if you want to install all 23 packages. diff --git a/modules/primer-alerts/README.md b/modules/primer-alerts/README.md index eba57bc1c6..a2688aa800 100644 --- a/modules/primer-alerts/README.md +++ b/modules/primer-alerts/README.md @@ -1,11 +1,11 @@ -# Primer Alerts +# Primer CSS Alerts [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -144,8 +144,8 @@ A flash message that is full width and removes border and border radius. [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-alerts/package.json b/modules/primer-alerts/package.json index 5d0b2cb265..d1864b212c 100644 --- a/modules/primer-alerts/package.json +++ b/modules/primer-alerts/package.json @@ -1,8 +1,8 @@ { - "version": "1.5.2", + "version": "1.5.1", "name": "primer-alerts", "description": "Flash messages, or alerts, inform users of successful or pending actions.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-alerts", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-alerts", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,7 +27,7 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "alerts", @@ -36,7 +36,7 @@ "flash", "github", "primer", - "design-system", + "primercss", "style" ] } diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md index c2e1d98c8b..d818dbcac5 100644 --- a/modules/primer-avatars/README.md +++ b/modules/primer-avatars/README.md @@ -1,11 +1,11 @@ -# Primer Avatars +# Primer CSS Avatars [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > 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. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -146,8 +146,8 @@ For specific cases where two badges or more need to be shown as related or conne [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-avatars/package.json b/modules/primer-avatars/package.json index 0557724c19..06edeff54d 100644 --- a/modules/primer-avatars/package.json +++ b/modules/primer-avatars/package.json @@ -1,8 +1,8 @@ { - "version": "1.4.2", + "version": "1.4.1", "name": "primer-avatars", "description": "Basic styles for user profile avatars.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-avatars", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-avatars", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,13 +27,13 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "avatars", "primer", "css", "github", - "design-system" + "primercss" ] } diff --git a/modules/primer-base/README.md b/modules/primer-base/README.md index c25b209ae2..2288512dfa 100644 --- a/modules/primer-base/README.md +++ b/modules/primer-base/README.md @@ -1,11 +1,11 @@ -# Primer Base +# Primer CSS Base [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > GitHub's CSS to reset the browsers default styles. Built on top of normalize.css -This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/) +This repository is a module of the full [primer-css][primer-css] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/) ## Install @@ -41,8 +41,8 @@ You can read more about base in the [docs][docs]. [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-base/lib/base.scss b/modules/primer-base/lib/base.scss index 32fb7b5b4b..88213a74aa 100644 --- a/modules/primer-base/lib/base.scss +++ b/modules/primer-base/lib/base.scss @@ -64,15 +64,4 @@ th { button { cursor: pointer; - // Remove border radius added by Chroma macOS - border-radius: 0; -} - -details { - summary { cursor: pointer; } - - &:not([open]) { - // Set details content hidden by default for browsers that don't do this - > *:not(summary) { display: none; } - } } diff --git a/modules/primer-base/lib/normalize.scss b/modules/primer-base/lib/normalize.scss index 8152aa3aed..bca298e757 100644 --- a/modules/primer-base/lib/normalize.scss +++ b/modules/primer-base/lib/normalize.scss @@ -89,11 +89,13 @@ template, /* 1 */ ========================================================================== */ /** - * Remove the gray background on active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** diff --git a/modules/primer-base/package.json b/modules/primer-base/package.json index 24ad2908e8..3b96ac7578 100644 --- a/modules/primer-base/package.json +++ b/modules/primer-base/package.json @@ -1,8 +1,8 @@ { - "version": "1.6.0", + "version": "1.5.1", "name": "primer-base", "description": "CSS to reset the browsers default styles", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-base", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-base", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,13 +27,13 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "primer", "css", "github", - "design-system", + "primercss", "base", "reset", "normalize" diff --git a/modules/primer-base/stories.js b/modules/primer-base/stories.js deleted file mode 100644 index 4597969ad6..0000000000 --- a/modules/primer-base/stories.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' - -storiesOf('Base', module) - .add('button', () => ( - -)) diff --git a/modules/primer-blankslate/README.md b/modules/primer-blankslate/README.md index 4a1c72db6f..d8bfaea79a 100644 --- a/modules/primer-blankslate/README.md +++ b/modules/primer-blankslate/README.md @@ -1,11 +1,11 @@ -# Primer Blankslate +# Primer CSS Blankslate [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > 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. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -131,8 +131,8 @@ Removes the `background-color` and `border`. [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-blankslate/package.json b/modules/primer-blankslate/package.json index d465928f3e..e602332878 100644 --- a/modules/primer-blankslate/package.json +++ b/modules/primer-blankslate/package.json @@ -1,8 +1,8 @@ { - "version": "1.4.2", + "version": "1.4.1", "name": "primer-blankslate", "description": "Blankslates are for when there is a lack of content within a page or section.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-blankslate", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-blankslate", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,13 +27,13 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "primer", "css", "github", - "design-system", + "primercss", "blankslate", "empty", "content" diff --git a/modules/primer-box/README.md b/modules/primer-box/README.md index 5f80962700..38bc28828a 100644 --- a/modules/primer-box/README.md +++ b/modules/primer-box/README.md @@ -1,11 +1,11 @@ -# Primer box +# Primer CSS box [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > 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. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -590,8 +590,8 @@ Box patterns can also be made with, and modified with [border utilities](../util [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json index 41d0dc027c..fd61735c87 100644 --- a/modules/primer-box/package.json +++ b/modules/primer-box/package.json @@ -1,8 +1,8 @@ { - "version": "2.5.2", + "version": "2.5.1", "name": "primer-box", "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-box", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-box", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,12 +27,12 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "primer", "css", "github", - "design-system" + "primercss" ] } diff --git a/modules/primer-branch-name/README.md b/modules/primer-branch-name/README.md index d4abd6ce2b..261e3924b7 100644 --- a/modules/primer-branch-name/README.md +++ b/modules/primer-branch-name/README.md @@ -1,11 +1,11 @@ -# Primer / Branch Name +# Primer CSS / Branch Name [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > A nice, consistent way to display branch names. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -62,8 +62,8 @@ You may also include an octicon before the branch name text: [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json index 86bf22555f..cf922745a3 100644 --- a/modules/primer-branch-name/package.json +++ b/modules/primer-branch-name/package.json @@ -1,8 +1,8 @@ { - "version": "1.0.0", + "version": "0.0.1", "name": "primer-branch-name", "description": "A nice, consistent way to display branch names.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "primer": { "category": "product", "module_type": "components" @@ -11,9 +11,9 @@ "license": "MIT", "style": "index.scss", "main": "build/index.js", - "repository": "https://github.com/primer/primer/tree/master/modules/primer-branch-name", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-branch-name", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "test-docs": "../../script/test-docs", @@ -23,7 +23,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "github", diff --git a/modules/primer-breadcrumb/README.md b/modules/primer-breadcrumb/README.md index 9f4b0589c2..640c779ba7 100644 --- a/modules/primer-breadcrumb/README.md +++ b/modules/primer-breadcrumb/README.md @@ -1,11 +1,11 @@ -# Primer Breadcrumb Navigation +# Primer CSS Breadcrumb Navigation [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Breadcrumb navigation for GitHub's pages with parents / grandparents. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer] repository. ## Documentation @@ -41,7 +41,7 @@ MIT © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer [primer-support]: https://github.com/primer/primer-support [support]: https://github.com/primer/primer-support -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json index b1a03d65b6..1f630f6027 100644 --- a/modules/primer-breadcrumb/package.json +++ b/modules/primer-breadcrumb/package.json @@ -1,8 +1,8 @@ { - "version": "1.4.2", + "version": "1.4.1", "name": "primer-breadcrumb", "description": "Breadcrumb navigation for pages with parents / grandparents.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "build/build.css", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-breadcrumb", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-breadcrumb", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "test-docs": "../../script/test-docs", @@ -28,7 +28,7 @@ "test": "../../script/npm-run-all build lint test-docs" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "breadcrumb", @@ -36,7 +36,7 @@ "github", "navigation", "primer", - "design-system", + "primercss", "style" ] } diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md index 6588ce0181..807b218181 100644 --- a/modules/primer-buttons/README.md +++ b/modules/primer-buttons/README.md @@ -1,11 +1,11 @@ -# Primer Buttons +# Primer CSS Buttons [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -42,9 +42,41 @@ status: Stable Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. -{:toc} +#### Buttons -## Default button +```html + + + + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + + +``` + +#### Default buttons Use the standardβ€”yet classyβ€”`.btn` for form actions and primary page actions. These are used extensively around the site. @@ -62,7 +94,7 @@ You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. ``` -## Primary button +#### Primary Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizesβ€”just add `.btn-primary`. @@ -71,7 +103,7 @@ Primary buttons are green and are used to indicate the *primary* action on a pag ``` -## Danger button +#### Danger Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. @@ -80,7 +112,7 @@ Danger buttons are red. They help reiterate that the intended action is importan ``` -## Outline button +#### Outline Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. @@ -89,32 +121,7 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt ``` -## Large button -Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections. - -[Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size. - -```html - -

- Large link button - -

- -``` - -Use `.btn-large` with a type scale utility to transform the text to a bigger size. - -```html - -

- Large link button - -

- -``` - -## Disabled state +#### Disabled state Disable `

``` -## Link button - -Create a button that looks like a link with `.btn-link`. Rather than using an `` to trigger JS, this style on a `

-``` - -## Button with counts +#### With counts You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button. @@ -199,7 +196,7 @@ You can also use the [counter](../../product/components/labels) component within ``` -## Button groups +#### Button groups Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically. @@ -236,7 +233,7 @@ Add `.BtnGroup-form` to `
`s within `.BtnGroup`s for proper spacing and rou
``` -## Hidden text button +#### Hidden text button Use `.hidden-text-expander` to indicate and toggle hidden text. @@ -249,7 +246,7 @@ Use `.hidden-text-expander` to indicate and toggle hidden text. You can also make the expander appear inline by adding `.inline`. -## Using button styles with the details summary element +#### Using button styles with the details summary element You can add `.btn` and `.btn-*` classes to any [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) @@ -273,8 +270,8 @@ element is open. [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-buttons/lib/button.scss b/modules/primer-buttons/lib/button.scss index a0d32a596f..d31cd625e3 100644 --- a/modules/primer-buttons/lib/button.scss +++ b/modules/primer-buttons/lib/button.scss @@ -202,12 +202,3 @@ } } } - -.details-reset { - // Remove marker added by the display: list-item browser default - > summary { list-style: none; } - // Remove marker added by details polyfill - > summary::before { display: none; } - // Remove marker added by Chrome - > summary::-webkit-details-marker { display: none; } -} diff --git a/modules/primer-buttons/package.json b/modules/primer-buttons/package.json index 1fe294e35c..24d2391cac 100644 --- a/modules/primer-buttons/package.json +++ b/modules/primer-buttons/package.json @@ -1,8 +1,8 @@ { - "version": "2.5.0", + "version": "2.4.1", "name": "primer-buttons", "description": "A collection of buttons used for primary and secondary actions.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-buttons", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-buttons", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -27,13 +27,13 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-support": "4.4.2" + "primer-support": "4.4.1" }, "keywords": [ "primer", "css", "github", - "design-system", + "primercss", "buttons", "styles" ] diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index bb443ddda0..ad3db07991 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -59,14 +59,3 @@ storiesOf('Button', module)
)) - .add('btn-large', () => ( -
- Large link button - -
- )) - .add('btn-link', () => ( -
- -
- )) diff --git a/modules/primer-core/README.md b/modules/primer-core/README.md index 5cf2b44d5d..238e3c1113 100644 --- a/modules/primer-core/README.md +++ b/modules/primer-core/README.md @@ -1,15 +1,15 @@ # Primer Core [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -> 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. +> Primer core is one of 3 meta-packages that belong to the Primer CSS framework. Primer core contains packages that are shared between GitHub product and marketing websites. -This repository is a compilation of [several CSS packages](https://github.com/primer/primer). You can break it down into smaller sections using npm. +This repository is a compilation of [several CSS packages](https://github.com/primer/primer-css). You can break it down into smaller sections using npm. ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** ``` $ npm install --save primer-core @@ -42,7 +42,7 @@ You can read more about primer in the [docs][docs]. [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-core/index.scss b/modules/primer-core/index.scss index 65637a515b..855188bacd 100644 --- a/modules/primer-core/index.scss +++ b/modules/primer-core/index.scss @@ -1,6 +1,6 @@ /*! * Primer-core - * http://primer.github.io + * http://primercss.io * * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index 735159dca4..1cd9799913 100644 --- a/modules/primer-core/package.json +++ b/modules/primer-core/package.json @@ -1,8 +1,8 @@ { - "version": "6.5.0", + "version": "6.4.1", "name": "primer-core", - "description": "Primer's core modules", - "homepage": "http://primer.github.io/", + "description": "Primer CSS's core modules", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "build/build.css", @@ -15,9 +15,9 @@ "index.scss", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-core", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-core", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -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.5.1", + "primer-box": "2.5.1", + "primer-breadcrumb": "1.4.1", + "primer-buttons": "2.4.1", + "primer-forms": "1.4.1", + "primer-layout": "1.4.1", + "primer-navigation": "1.4.1", + "primer-support": "4.4.1", + "primer-table-object": "1.4.1", + "primer-tooltips": "1.4.1", + "primer-truncate": "1.4.1", + "primer-utilities": "4.8.1" } } diff --git a/modules/primer-marketing-buttons/LICENSE b/modules/primer-css/LICENSE similarity index 100% rename from modules/primer-marketing-buttons/LICENSE rename to modules/primer-css/LICENSE diff --git a/modules/primer/README.md b/modules/primer-css/README.md similarity index 55% rename from modules/primer/README.md rename to modules/primer-css/README.md index 879707d4eb..ac381a03fb 100644 --- a/modules/primer/README.md +++ b/modules/primer-css/README.md @@ -1,18 +1,18 @@ -# Primer +# Primer CSS -[![npm version](http://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) +[![npm version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -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. +Primer is the CSS framework that powers GitHub's front-end design. Primer CSS 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. -The Primer repo is managed as a monorepo that is composed of many npm packages. +The Primer CSS repo is managed as a monorepo that is composed of many npm packages. ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command. +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `Primer-CSS` with this command. ``` -$ npm install --save primer +$ npm install --save primer-css ``` ## Usage @@ -20,7 +20,7 @@ $ npm install --save primer The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. ```scss -@import "primer/index.scss"; +@import "primer-css/index.scss"; ``` You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ @@ -42,7 +42,7 @@ You can read more about primer in the [docs][docs]. [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer/index.scss b/modules/primer-css/index.scss similarity index 93% rename from modules/primer/index.scss rename to modules/primer-css/index.scss index c3962c2d10..5adfaa7536 100644 --- a/modules/primer/index.scss +++ b/modules/primer-css/index.scss @@ -1,6 +1,6 @@ /*! * Primer - * http://primer.github.io + * http://primercss.io * * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ diff --git a/modules/primer-css/package.json b/modules/primer-css/package.json new file mode 100644 index 0000000000..4ef311f7a0 --- /dev/null +++ b/modules/primer-css/package.json @@ -0,0 +1,66 @@ +{ + "version": "9.6.0", + "name": "primer-css", + "description": "Primer is the CSS framework that powers GitHub's front-end design. Primer-css 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://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "build/build.css", + "primer": { + "module_type": "meta" + }, + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "build", + "CHANGELOG.md" + ], + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-css", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "build": "../../script/npm-run primer-module-build index.scss", + "prepare": "npm run build", + "lint": "../../script/lint-scss", + "test": "../../script/npm-run-all build lint" + }, + "dependencies": { + "primer-alerts": "1.5.1", + "primer-avatars": "1.4.1", + "primer-base": "1.5.1", + "primer-blankslate": "1.4.1", + "primer-box": "2.5.1", + "primer-branch-name": "0.0.1", + "primer-breadcrumb": "1.4.1", + "primer-buttons": "2.4.1", + "primer-core": "6.4.1", + "primer-dropdown": "0.1.0", + "primer-forms": "1.4.1", + "primer-labels": "1.5.1", + "primer-layout": "1.4.1", + "primer-markdown": "3.7.1", + "primer-marketing-support": "1.3.1", + "primer-marketing-type": "1.4.1", + "primer-marketing-utilities": "1.4.1", + "primer-marketing": "5.4.1", + "primer-navigation": "1.4.1", + "primer-page-headers": "1.4.1", + "primer-page-sections": "1.4.1", + "primer-product": "5.4.1", + "primer-subhead": "0.0.1", + "primer-support": "4.4.1", + "primer-table-object": "1.4.1", + "primer-tables": "1.4.1", + "primer-tooltips": "1.4.1", + "primer-truncate": "1.4.1", + "primer-utilities": "4.8.1" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/modules/primer-dropdown/README.md b/modules/primer-dropdown/README.md new file mode 100644 index 0000000000..e47d135b25 --- /dev/null +++ b/modules/primer-dropdown/README.md @@ -0,0 +1,312 @@ +# Primer CSS dropdown + +[![npm version](http://img.shields.io/npm/v/primer-dropdown.svg)](https://www.npmjs.org/package/primer-dropdown) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) + +This repository is a module of the full [primer-css][primer-css] repository. + +## Install + +This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-dropdown` with this command. + +``` +$ npm install --save primer-dropdown +``` + +## Usage + +The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. + +```scss +@import "primer-dropdown/index.scss"; +``` + +You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ + +## Build + +For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. + +``` +$ npm run build +``` + +## Documentation + + + +Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. + +{:toc} + +## Basic examples + +Dropdowns should be trigged by a ` + +
+ +
+
+``` + +Using a button customized with additional utilities: + + +```html +
+ + +
+ +
+
+``` + +## Options + +### Alignment + +Align the direction of dropdown menus and their arrows with modifier classes. + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +```html +
+ + +
+ +
+
+``` + +### Dividers + +```html +
+ + +
+ +
+
+``` + +### Headers + +```html +
+ + +
+
+
+ Dropdown header +
+ +
+
+
+``` + +### No overflow + +Use `dropdown-menu-no-overflow` modifier class to set the width of the dropdown +to `auto` and prevent hidden overflows on item contents and text. + +```html +
+ + +
+ +
+
+``` + +### Sign out button + +Use ` + +
+ +
+
+``` + + + +## License + +[MIT](./LICENSE) © [GitHub](https://github.com/) + +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ +[npm]: https://www.npmjs.com/ +[install-npm]: https://docs.npmjs.com/getting-started/installing-node +[sass]: http://sass-lang.com/ diff --git a/modules/primer-dropdown/index.scss b/modules/primer-dropdown/index.scss new file mode 100644 index 0000000000..513f094b6d --- /dev/null +++ b/modules/primer-dropdown/index.scss @@ -0,0 +1,2 @@ +@import "primer-support/index.scss"; +@import "./lib/dropdown.scss"; diff --git a/modules/primer-dropdown/lib/dropdown.scss b/modules/primer-dropdown/lib/dropdown.scss new file mode 100644 index 0000000000..ebad8a464a --- /dev/null +++ b/modules/primer-dropdown/lib/dropdown.scss @@ -0,0 +1,262 @@ +// TODO add some docs here + +.dropdown { + position: relative; + + &.active { + .dropdown-menu-content { + display: block; + pointer-events: all; + } + } +} + +.dropdown-caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + border: 4px solid; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; +} + +// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which +// way the menu should render from the element triggering it. +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 100; + width: 160px; + padding-top: 5px; + padding-bottom: 5px; + margin-top: 2px; + list-style: none; + background-color: $bg-white; + background-clip: padding-box; + border: 1px solid $black-fade-15; + border-radius: 4px; + box-shadow: 0 3px 12px $black-fade-15; + + &::before, + &::after { + position: absolute; + display: inline-block; + content: ""; + } + + &::before { + border: 8px solid transparent; + border-bottom-color: $black-fade-15; + } + + &::after { + border: 7px solid transparent; + border-bottom-color: $white; + } + + // stylelint-disable-next-line selector-max-type + > ul { + list-style: none; + } +} + +.dropdown-menu-no-overflow { + width: auto; + + .dropdown-item { + padding: 4px 15px; + overflow: visible; + text-overflow: inherit; + } +} + +// Dropdown items (can be links or buttons) +.dropdown-item { + display: block; + padding: 4px 10px 4px 15px; + overflow: hidden; + color: $text-gray-dark; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover, + &.zeroclipboard-is-hover { + color: $text-white; + text-decoration: none; + background-color: $bg-blue; + + > .octicon { + color: inherit; + opacity: 1; + } + } + + &.btn-link { + width: 100%; + text-align: left; + } +} + +.dropdown-signout { + width: 100%; + text-align: left; + background: none; + border: 0; +} + +.dropdown-divider { + height: 1px; + margin: 8px 1px; + background-color: $gray-200; +} + +.dropdown-header { + padding: 4px 15px; + font-size: 12px; + color: $text-gray; +} + +.dropdown-menu-content { + display: none; + + // stylelint-disable primer/selector-no-utility + &.anim-scale-in { + position: relative; + z-index: 100; + pointer-events: none; + } +} + +// Directional classes +// +// Move the menu and the caret attached to it. Requires at least one of these on +// the `.dropdown-menu` element. + +.dropdown-menu-w { + top: 0; + right: 100%; + left: auto; + width: auto; + margin-top: 0; + margin-right: 10px; + + &::before { + top: 10px; + right: -16px; + left: auto; + border-color: transparent; + border-left-color: $black-fade-15; + } + + &::after { + top: 11px; + right: -14px; + left: auto; + border-color: transparent; + border-left-color: $white; + } +} + +.dropdown-menu-e { + top: 0; + left: 100%; + width: auto; + margin-top: 0; + margin-left: 10px; + + &::before { + top: 10px; + left: -16px; + border-color: transparent; + border-right-color: $black-fade-15; + } + + &::after { + top: 11px; + left: -14px; + border-color: transparent; + border-right-color: $white; + } +} + +.dropdown-menu-ne { + top: auto; + bottom: 100%; + left: 0; + margin-bottom: 3px; + + &::before, + &::after { + top: auto; + right: auto; + } + + &::before { + bottom: -8px; + left: 9px; + border-top: 8px solid $black-fade-15; + border-right: 8px solid transparent; + border-bottom: 0; + border-left: 8px solid transparent; + } + + &::after { + bottom: -7px; + left: 10px; + border-top: 7px solid $white; + border-right: 7px solid transparent; + border-bottom: 0; + border-left: 7px solid transparent; + } +} + +.dropdown-menu-s { + right: 50%; + left: auto; + transform: translateX(50%); + + &::before { + top: -16px; + right: 50%; + transform: translateX(50%); + } + + &::after { + top: -14px; + right: 50%; + transform: translateX(50%); + } +} + +.dropdown-menu-sw { + right: 0; + left: auto; + + &::before { + top: -16px; + right: 9px; + left: auto; + } + + &::after { + top: -14px; + right: 10px; + left: auto; + } +} + +.dropdown-menu-se { + &::before { + top: -16px; + left: 9px; + } + + &::after { + top: -14px; + left: 10px; + } +} diff --git a/modules/primer-dropdown/package.json b/modules/primer-dropdown/package.json new file mode 100644 index 0000000000..f5060cc01f --- /dev/null +++ b/modules/primer-dropdown/package.json @@ -0,0 +1,39 @@ +{ + "version": "0.1.0", + "name": "primer-dropdown", + "description": "A lightweight context menu for navigation and actions.", + "homepage": "http://primercss.io/", + "author": "GitHub, Inc.", + "license": "MIT", + "style": "index.scss", + "main": "build/index.js", + "primer": { + "category": "product", + "module_type": "components" + }, + "files": [ + "index.scss", + "lib", + "build" + ], + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-dropdown", + "bugs": { + "url": "https://github.com/primer/primer-css/issues" + }, + "scripts": { + "test-docs": "ava --verbose ../../tests/modules/test-*.js", + "build": "primer-module-build index.scss", + "prepare": "npm run build", + "lint": "stylelint **/*.scss -s scss", + "test": "npm-run-all -s build lint test-docs" + }, + "dependencies": { + "primer-support": "4.4.1" + }, + "keywords": [ + "primer", + "css", + "github", + "primercss" + ] +} diff --git a/modules/primer-forms/README.md b/modules/primer-forms/README.md index c210f3c529..8ff8b153a9 100644 --- a/modules/primer-forms/README.md +++ b/modules/primer-forms/README.md @@ -1,11 +1,11 @@ -# Primer Forms +# Primer CSS Forms [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Style individual form controls and utilize common layouts. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -42,9 +42,6 @@ status: Stable Style individual form controls and utilize common layouts. -{:toc} - -Overview: - We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `
`s, WebKit validation bubbles, and most textual ``s. - Specific types of textual ``s are styled automatically, but `.form-control` is available should you need it. - Always declare a `type` on your ` -``` - -## Outline button colors - -The `btn-outline` has also been extended with orange, purple, and green. - -```html - -Link button - -``` - -## Transparent button - -A button can also be transparent and displayed with a white border with `btn-transparent`. - -```html -
- -
-``` - - - -## Install - -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-marketing-buttons` with this command. - -``` -$ npm install --save primer-marketing-buttons -``` - -## Usage - -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. - -```scss -@import "primer-marketing-buttons/index.scss"; -``` - -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - -## Build - -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` - -``` -$ npm run build -``` - -## License - -MIT © [GitHub](https://github.com/) - -[primer]: https://github.com/primer/primer -[primer-support]: https://github.com/primer/primer-support -[support]: https://github.com/primer/primer-support -[docs]: http://primer.github.io/ -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ diff --git a/modules/primer-marketing-buttons/index.scss b/modules/primer-marketing-buttons/index.scss deleted file mode 100644 index 9ba7d96520..0000000000 --- a/modules/primer-marketing-buttons/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -// support files -@import "primer-support/index.scss"; -@import "./lib/button.scss"; diff --git a/modules/primer-marketing-buttons/lib/button.scss b/modules/primer-marketing-buttons/lib/button.scss deleted file mode 100644 index 930de9e9d9..0000000000 --- a/modules/primer-marketing-buttons/lib/button.scss +++ /dev/null @@ -1,24 +0,0 @@ -.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); } - -.btn-outline-purple { @include btn-outline($purple); } -.btn-outline-orange { @include btn-outline($orange); } -.btn-outline-green { @include btn-outline($green); } - -@mixin btn-transparent-active { - color: $gray-800; - background-color: $white; - background-image: none; - border-color: $white; -} - -.btn-transparent { - color: $white; - background-color: transparent; - background-image: none; - border: $border-width $border-style $white-fade-50; - - &:hover, - &:active { - @include btn-transparent-active; - } -} diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json deleted file mode 100644 index 24cd42d105..0000000000 --- a/modules/primer-marketing-buttons/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "version": "1.0.0", - "name": "primer-marketing-buttons", - "description": "Buttons for marketing websites at GitHub", - "homepage": "http://primer.github.io/", - "author": "GitHub, Inc.", - "license": "MIT", - "style": "build/build.css", - "main": "build/index.js", - "primer": { - "category": "marketing", - "module_type": "components" - }, - "files": [ - "index.scss", - "lib", - "build" - ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-buttons", - "bugs": { - "url": "https://github.com/primer/primer/issues" - }, - "scripts": { - "test-docs": "../../script/test-docs", - "build": "../../script/npm-run primer-module-build index.scss", - "prepare": "npm run build", - "lint": "../../script/lint-scss", - "test": "../../script/npm-run-all build lint test-docs" - }, - "dependencies": { - "primer-support": "4.4.2" - }, - "peerDependencies": { - "primer-buttons": "2.4.1" - }, - "keywords": [ - "css", - "github", - "primer", - "design-system", - "style", - "buttons" - ] -} diff --git a/modules/primer-marketing-buttons/stories.js b/modules/primer-marketing-buttons/stories.js deleted file mode 100644 index f84d0241fb..0000000000 --- a/modules/primer-marketing-buttons/stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' - -storiesOf('Marketing buttons', module) - .add('Button colors', () => ( -
- -
- )) - .add('Outline colors', () => ( -
- - Link button - -
- )) - .add('Transparent button', () => ( -
- -
- )) diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index e09df57a89..f04feac035 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -1,13 +1,13 @@ -# Primer Marketing Support +# Primer CSS Marketing Support [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > 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. > > Most of the time to include these you'll only need to add `@import "./primer-marketing-support";` to the top of your bundle. If you want only a specific partial you can import them separately. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer] repository. ## Documentation @@ -43,7 +43,7 @@ You can also import specific portions of the module by importing those partials MIT © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-marketing-support/package.json b/modules/primer-marketing-support/package.json index 3dfe6f5ab4..e60ef75356 100644 --- a/modules/primer-marketing-support/package.json +++ b/modules/primer-marketing-support/package.json @@ -1,8 +1,8 @@ { - "version": "1.3.2", + "version": "1.3.1", "name": "primer-marketing-support", "description": "Sass variables, mixins, and functions for use in our components.", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -14,9 +14,9 @@ "index.scss", "lib" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-support", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "lint": "../../script/lint-scss", @@ -27,7 +27,7 @@ "primer", "css", "github", - "design-system", + "primercss", "mixins", "functions", "variables", diff --git a/modules/primer-marketing-type/README.md b/modules/primer-marketing-type/README.md index 6b08af75f5..48d63c58a1 100644 --- a/modules/primer-marketing-type/README.md +++ b/modules/primer-marketing-type/README.md @@ -1,11 +1,11 @@ # Primer Marketing CSS Typography [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer] repository. ## Documentation @@ -85,7 +85,7 @@ MIT © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer [primer-support]: https://github.com/primer/primer-support [support]: https://github.com/primer/primer-support -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-marketing-type/package.json b/modules/primer-marketing-type/package.json index 08b62406a8..3fa2f2969f 100644 --- a/modules/primer-marketing-type/package.json +++ b/modules/primer-marketing-type/package.json @@ -1,8 +1,8 @@ { - "version": "1.4.2", + "version": "1.4.1", "name": "primer-marketing-type", "description": "Typography for marketing websites at GitHub", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "build/build.css", @@ -16,9 +16,9 @@ "lib", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-type", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-marketing-type", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "test-docs": "../../script/test-docs", @@ -28,14 +28,14 @@ "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.1", + "primer-support": "4.4.1" }, "keywords": [ "css", "github", "primer", - "design-system", + "primercss", "style", "type", "typography" diff --git a/modules/primer-marketing-utilities/README.md b/modules/primer-marketing-utilities/README.md index c67a80fc9a..16e247a335 100644 --- a/modules/primer-marketing-utilities/README.md +++ b/modules/primer-marketing-utilities/README.md @@ -1,7 +1,7 @@ # Primer Marketing CSS Utilities [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) This repository is a module of the full [primer-marketing-css][primer-marketing-css] repository. @@ -33,14 +33,14 @@ $ npm run build ## Documentation -You can read more about utilities in the [docs folder](./docs/) + ## License [MIT](./LICENSE) © [GitHub](https://github.com/) -[primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[primer-css]: https://github.com/primer/primer +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md index 8f4e1b83d3..4f50741df1 100644 --- a/modules/primer-marketing-utilities/docs/borders.md +++ b/modules/primer-marketing-utilities/docs/borders.md @@ -1,6 +1,7 @@ --- title: Borders status: New release +status_issue: https://github.com/github/design-systems/issues/325 --- The following border utilities are meant to used in addition to those within primer-core. @@ -16,22 +17,3 @@ Top, right, bottom, and left border utilities are can be used responsively to ad .border-top-0
``` - -## Border Colors - -### White border with alpha transparency - -Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors). - -```html -
- - .border-white-fade .bg-gray-dark - -
-
- - .border-white-fade .bg-blue - -
-``` diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md deleted file mode 100644 index 69adc135da..0000000000 --- a/modules/primer-marketing-utilities/docs/layout.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Layout -status: New release ---- - -Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning. - -{:toc} - -## Responsive position - -Use responsive position utilities to adjust the position of an element at different breakpoints. - -```html -
-
- .position-md-absolute -
-
- -
- default -
-
- .position-lg-relative -
-
- default -
-
- default -
-``` diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index 67a7d638fb..e605a72bcd 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/modules/primer-marketing-utilities/index.scss @@ -2,4 +2,3 @@ // utilities @import "./lib/filters.scss"; @import "./lib/borders.scss"; -@import "./lib/layout.scss"; diff --git a/modules/primer-marketing-utilities/lib/borders.scss b/modules/primer-marketing-utilities/lib/borders.scss index e4cb76576e..12ed39167a 100644 --- a/modules/primer-marketing-utilities/lib/borders.scss +++ b/modules/primer-marketing-utilities/lib/borders.scss @@ -15,6 +15,3 @@ .border-#{$breakpoint}-left-0 { border-left: 0 !important; } } } - -/* Use with .border to turn the border rgba white 0.15 */ -.border-white-fade { border-color: $white-fade-15 !important; } diff --git a/modules/primer-marketing-utilities/lib/layout.scss b/modules/primer-marketing-utilities/lib/layout.scss deleted file mode 100644 index e2a24923b1..0000000000 --- a/modules/primer-marketing-utilities/lib/layout.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Layout utilities -// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before - -// Responsive position utilities - -@each $breakpoint in map-keys($breakpoints) { - @include breakpoint($breakpoint) { - /* Set position to relative */ - .position-#{$breakpoint}-relative { position: relative !important; } - /* Set position to absolute */ - .position-#{$breakpoint}-absolute { position: absolute !important; } - /* Set position to fixed */ - .position-#{$breakpoint}-fixed { position: fixed !important; } - } -} diff --git a/modules/primer-marketing-utilities/package.json b/modules/primer-marketing-utilities/package.json index af27265c7f..f13f247e91 100644 --- a/modules/primer-marketing-utilities/package.json +++ b/modules/primer-marketing-utilities/package.json @@ -1,8 +1,8 @@ { - "version": "1.5.0", + "version": "1.4.1", "name": "primer-marketing-utilities", "description": "Marketing specific immutable, atomic CSS classes", - "homepage": "http://primer.github.io/", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "index.scss", @@ -17,9 +17,9 @@ "build", "docs" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-utilities", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-marketing-utilities", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -28,13 +28,13 @@ "test": "../../script/npm-run-all build lint" }, "dependencies": { - "primer-marketing-support": "1.3.2", - "primer-support": "4.4.2" + "primer-marketing-support": "1.3.1", + "primer-support": "4.4.1" }, "keywords": [ "primer", "css", "github", - "design-system" + "primercss" ] } diff --git a/modules/primer-marketing-utilities/stories.js b/modules/primer-marketing-utilities/stories.js deleted file mode 100644 index cc8ee4c2d4..0000000000 --- a/modules/primer-marketing-utilities/stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' - -storiesOf('Marketing utilities', module) -.add('Responsive borders', () => ( -
.border-top-0
-)) -.add('border-white-fade', () => ( -
- - .border-white-fade - -
-)) -.add('Responsive position', () => ( -
-
- .position-md-absolute -
-
-)) diff --git a/modules/primer-marketing/README.md b/modules/primer-marketing/README.md index 38ef65745f..0a7499b3d7 100755 --- a/modules/primer-marketing/README.md +++ b/modules/primer-marketing/README.md @@ -1,15 +1,15 @@ # Primer marketing [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) -> 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. +> Primer marketing is one of 3 meta-packages that belong to the Primer CSS framework. Primer marketing contains packages that are used on GitHub marketing websites. -This repository is a compilation of [several CSS packages](https://github.com/primer/primer). You can break it down into smaller sections using npm. +This repository is a compilation of [several CSS packages](https://github.com/primer/primer-css). You can break it down into smaller sections using npm. ## Install -This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** +This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths** ``` $ npm install --save primer-marketing @@ -42,7 +42,7 @@ You can read more about primer in the [docs][docs]. [MIT](./LICENSE) © [GitHub](https://github.com/) [primer]: https://github.com/primer/primer -[docs]: http://primer.github.io/ +[docs]: http://primercss.io/ [npm]: https://www.npmjs.com/ [install-npm]: https://docs.npmjs.com/getting-started/installing-node [sass]: http://sass-lang.com/ diff --git a/modules/primer-marketing/index.scss b/modules/primer-marketing/index.scss index 5f2e503d95..93c2d0b4ab 100755 --- a/modules/primer-marketing/index.scss +++ b/modules/primer-marketing/index.scss @@ -1,6 +1,6 @@ /*! * Primer-marketing - * http://primer.github.io + * http://primercss.io * * Released under MIT license. Copyright (c) 2017 GitHub Inc. */ @@ -16,7 +16,6 @@ // marketing specific css modules @import "primer-marketing-type/index.scss"; -@import "primer-marketing-buttons/index.scss"; @import "primer-page-headers/index.scss"; @import "primer-page-sections/index.scss"; @import "primer-tables/index.scss"; diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json index 9e43d94395..3829928ac2 100644 --- a/modules/primer-marketing/package.json +++ b/modules/primer-marketing/package.json @@ -1,8 +1,8 @@ { - "version": "6.0.0", + "version": "5.4.1", "name": "primer-marketing", - "description": "Primer marketing packages", - "homepage": "http://primer.github.io/", + "description": "Primer CSS marketing packages", + "homepage": "http://primercss.io/", "author": "GitHub, Inc.", "license": "MIT", "style": "build/build.css", @@ -15,9 +15,9 @@ "index.scss", "build" ], - "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing", + "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-marketing", "bugs": { - "url": "https://github.com/primer/primer/issues" + "url": "https://github.com/primer/primer-css/issues" }, "scripts": { "build": "../../script/npm-run primer-module-build index.scss", @@ -26,13 +26,12 @@ "lint": "../../script/lint-scss" }, "dependencies": { - "primer-marketing-buttons": "1.0.0", - "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-support": "1.3.1", + "primer-marketing-type": "1.4.1", + "primer-marketing-utilities": "1.4.1", + "primer-page-headers": "1.4.1", + "primer-page-sections": "1.4.1", + "primer-support": "4.4.1", + "primer-tables": "1.4.1" } } diff --git a/modules/primer-navigation/README.md b/modules/primer-navigation/README.md index b0c9107b8d..6f951d310d 100644 --- a/modules/primer-navigation/README.md +++ b/modules/primer-navigation/README.md @@ -1,11 +1,11 @@ -# Primer Navigation +# Primer CSS Navigation [![npm version](http://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) +[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) > Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently. -This repository is a module of the full [primer][primer] repository. +This repository is a module of the full [primer-css][primer-css] repository. ## Install @@ -48,7 +48,7 @@ Primer comes with several navigation components. Some were designed with singula The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`. -```html title="Menu" +```html