From 2f1a72f4a35af7b63a5e3be3cc8ce61c7dc1f9a2 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Fri, 27 Oct 2017 15:07:17 -0500 Subject: [PATCH 01/33] 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 02/33] 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 03/33] 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 04/33] 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 05/33] 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 06/33] 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 07/33] 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 08/33] 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 09/33] 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 10/33] 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 11/33] 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 12/33] 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 13/33] 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 14/33] 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 e374740f0c3c752f74aa2094adb140a09a61cc2d Mon Sep 17 00:00:00 2001 From: Joel Califa Date: Thu, 2 Nov 2017 15:27:31 -0400 Subject: [PATCH 15/33] 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 16/33] 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 17/33] 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 18/33] 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 19/33] 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 20/33] 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 21/33] 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 22/33] 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 23/33] 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 24/33] 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 25/33] 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 26/33] 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 27/33] 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 28/33] 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 29/33] 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 30/33] 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 31/33] 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 32/33] 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 33/33] 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 +
```