From cab2e88c42f5b178e7a4c0591b77f3c23a8c1f68 Mon Sep 17 00:00:00 2001 From: Tara Nelson <6740550+talune@users.noreply.github.com> Date: Fri, 17 Dec 2021 19:24:35 +0000 Subject: [PATCH 1/3] Move z-index into AvatarStackWrapper styles .pc-AvatarItem elements need both opacity and z-index styles in order to display properly. Since children of AvatarStack are not guaranteed to have an sx prop, it can't reliably enforce these rules. Instead, AvatarStackWrapper can define the styles. --- src/AvatarStack.tsx | 82 ++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 46 deletions(-) diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index e97063f6f00..a0224062dc1 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -20,7 +20,6 @@ const AvatarStackWrapper = styled.span` height: 20px; width: 20px; box-shadow: 0 0 0 1px ${get('colors.canvas.default')}; - margin-left: -11px; position: relative; overflow: hidden; transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, @@ -28,55 +27,60 @@ const AvatarStackWrapper = styled.span` &:first-child { margin-left: 0; + z-index: 10; } + + &:nth-child(n + 2) { + margin-left: -11px; + z-index: 9; + } + + &:nth-child(n + 3) { + margin-left: -17px; + opacity: ${100 - 3 * 15}%; + z-index: 8; + } + &:nth-child(n + 4) { - display: none; + opacity: ${100 - 4 * 15}%; + z-index: 7; + } + + &:nth-child(n + 5) { + opacity: ${100 - 5 * 15}%; + z-index: 6; + } + + &:nth-child(n + 6) { + opacity: 0; + visibility: hidden; } } &.pc-AvatarStack--two { min-width: 30px; - .pc-AvatarItem { - &:nth-child(n + 3) { - display: none; - } - } } &.pc-AvatarStack--three-plus { min-width: 38px; - .pc-AvatarItem { - &:nth-child(3) { - opacity: ${100 - 3 * 15}%; - margin-left: -17px; - } - &:nth-child(4) { - opacity: ${100 - 4 * 15}%; - margin-left: -17px; - } - &:nth-child(5) { - opacity: ${100 - 5 * 15}%; - margin-left: -17px; - } - &:nth-child(n + 4) { - display: block; - } - &:nth-child(n + 6) { - opacity: 0; - visibility: hidden; - } - } } &.pc-AvatarStack--right { justify-content: flex-end; .pc-AvatarItem { margin-left: 0 !important; - margin-right: -11px; &:first-child { margin-right: 0; } + + &:nth-child(n + 2) { + margin-right: -11px; + } + + &:nth-child(n + 3) { + margin-right: -17px; + } } .pc-AvatarStackBody { @@ -95,20 +99,6 @@ const AvatarStackWrapper = styled.span` } } - &.pc-AvatarStack--three-plus.pc-AvatarStack--right { - .pc-AvatarItem { - &:nth-child(3) { - margin-right: -17px; - } - &:nth-child(4) { - margin-right: -17px; - } - &:nth-child(5) { - margin-right: -17px; - } - } - } - .pc-AvatarStackBody:hover { width: auto; @@ -126,11 +116,11 @@ const AvatarStackWrapper = styled.span` ${sx}; ` const transformChildren = (children: React.ReactNode) => { - return React.Children.map(children, (child, index) => { + return React.Children.map(children, child => { if (!React.isValidElement(child)) return child return React.cloneElement(child, { - className: classnames(child.props.className, 'pc-AvatarItem'), - sx: {zIndex: 10 - index, ...child.props.sx} + ...child.props, + className: classnames(child.props.className, 'pc-AvatarItem') }) }) } From 9b93d12ba1abaaefbed62c5227ad62ded449d593 Mon Sep 17 00:00:00 2001 From: Tara Nelson <6740550+talune@users.noreply.github.com> Date: Fri, 17 Dec 2021 19:49:40 +0000 Subject: [PATCH 2/3] Update snapshot to capture new styles --- .../__snapshots__/AvatarStack.test.tsx.snap | 174 ++++++------------ 1 file changed, 56 insertions(+), 118 deletions(-) diff --git a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index 1ad913e36db..0dd78a0d56e 100644 --- a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -27,7 +27,6 @@ exports[`Avatar renders consistently 1`] = ` height: 20px; width: 20px; box-shadow: 0 0 0 1px #ffffff; - margin-left: -11px; position: relative; overflow: hidden; -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out; @@ -36,48 +35,43 @@ exports[`Avatar renders consistently 1`] = ` .c0 .pc-AvatarItem:first-child { margin-left: 0; + z-index: 10; } -.c0 .pc-AvatarItem:nth-child(n + 4) { - display: none; -} - -.c0.pc-AvatarStack--two { - min-width: 30px; -} - -.c0.pc-AvatarStack--two .pc-AvatarItem:nth-child(n + 3) { - display: none; -} - -.c0.pc-AvatarStack--three-plus { - min-width: 38px; +.c0 .pc-AvatarItem:nth-child(n + 2) { + margin-left: -11px; + z-index: 9; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(3) { - opacity: 55%; +.c0 .pc-AvatarItem:nth-child(n + 3) { margin-left: -17px; + opacity: 55%; + z-index: 8; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(4) { +.c0 .pc-AvatarItem:nth-child(n + 4) { opacity: 40%; - margin-left: -17px; + z-index: 7; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(5) { +.c0 .pc-AvatarItem:nth-child(n + 5) { opacity: 25%; - margin-left: -17px; -} - -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 4) { - display: block; + z-index: 6; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 6) { +.c0 .pc-AvatarItem:nth-child(n + 6) { opacity: 0; visibility: hidden; } +.c0.pc-AvatarStack--two { + min-width: 30px; +} + +.c0.pc-AvatarStack--three-plus { + min-width: 38px; +} + .c0.pc-AvatarStack--right { -webkit-box-pack: end; -webkit-justify-content: flex-end; @@ -87,13 +81,20 @@ exports[`Avatar renders consistently 1`] = ` .c0.pc-AvatarStack--right .pc-AvatarItem { margin-left: 0 !important; - margin-right: -11px; } .c0.pc-AvatarStack--right .pc-AvatarItem:first-child { margin-right: 0; } +.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 2) { + margin-right: -11px; +} + +.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 3) { + margin-right: -17px; +} + .c0.pc-AvatarStack--right .pc-AvatarStackBody { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; @@ -109,18 +110,6 @@ exports[`Avatar renders consistently 1`] = ` margin-right: 0 !important; } -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(3) { - margin-right: -17px; -} - -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(4) { - margin-right: -17px; -} - -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(5) { - margin-right: -17px; -} - .c0 .pc-AvatarStackBody:hover { width: auto; } @@ -148,41 +137,21 @@ exports[`Avatar renders consistently 1`] = ` alt="" className="pc-AvatarItem" src="https://avatars.githubusercontent.com/primer" - sx={ - Object { - "zIndex": 10, - } - } /> @@ -215,7 +184,6 @@ exports[`Avatar respects alignRight props 1`] = ` height: 20px; width: 20px; box-shadow: 0 0 0 1px #ffffff; - margin-left: -11px; position: relative; overflow: hidden; -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out; @@ -224,48 +192,43 @@ exports[`Avatar respects alignRight props 1`] = ` .c0 .pc-AvatarItem:first-child { margin-left: 0; + z-index: 10; } -.c0 .pc-AvatarItem:nth-child(n + 4) { - display: none; -} - -.c0.pc-AvatarStack--two { - min-width: 30px; -} - -.c0.pc-AvatarStack--two .pc-AvatarItem:nth-child(n + 3) { - display: none; -} - -.c0.pc-AvatarStack--three-plus { - min-width: 38px; +.c0 .pc-AvatarItem:nth-child(n + 2) { + margin-left: -11px; + z-index: 9; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(3) { - opacity: 55%; +.c0 .pc-AvatarItem:nth-child(n + 3) { margin-left: -17px; + opacity: 55%; + z-index: 8; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(4) { +.c0 .pc-AvatarItem:nth-child(n + 4) { opacity: 40%; - margin-left: -17px; + z-index: 7; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(5) { +.c0 .pc-AvatarItem:nth-child(n + 5) { opacity: 25%; - margin-left: -17px; -} - -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 4) { - display: block; + z-index: 6; } -.c0.pc-AvatarStack--three-plus .pc-AvatarItem:nth-child(n + 6) { +.c0 .pc-AvatarItem:nth-child(n + 6) { opacity: 0; visibility: hidden; } +.c0.pc-AvatarStack--two { + min-width: 30px; +} + +.c0.pc-AvatarStack--three-plus { + min-width: 38px; +} + .c0.pc-AvatarStack--right { -webkit-box-pack: end; -webkit-justify-content: flex-end; @@ -275,13 +238,20 @@ exports[`Avatar respects alignRight props 1`] = ` .c0.pc-AvatarStack--right .pc-AvatarItem { margin-left: 0 !important; - margin-right: -11px; } .c0.pc-AvatarStack--right .pc-AvatarItem:first-child { margin-right: 0; } +.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 2) { + margin-right: -11px; +} + +.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 3) { + margin-right: -17px; +} + .c0.pc-AvatarStack--right .pc-AvatarStackBody { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; @@ -297,18 +267,6 @@ exports[`Avatar respects alignRight props 1`] = ` margin-right: 0 !important; } -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(3) { - margin-right: -17px; -} - -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(4) { - margin-right: -17px; -} - -.c0.pc-AvatarStack--three-plus.pc-AvatarStack--right .pc-AvatarItem:nth-child(5) { - margin-right: -17px; -} - .c0 .pc-AvatarStackBody:hover { width: auto; } @@ -336,41 +294,21 @@ exports[`Avatar respects alignRight props 1`] = ` alt="" className="pc-AvatarItem" src="https://avatars.githubusercontent.com/primer" - sx={ - Object { - "zIndex": 10, - } - } /> From 46e72502abe7095596b3ccede9705f19743dc3c0 Mon Sep 17 00:00:00 2001 From: Rez Date: Tue, 21 Dec 2021 14:26:24 +0000 Subject: [PATCH 3/3] Create two-peas-exercise.md --- .changeset/two-peas-exercise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/two-peas-exercise.md diff --git a/.changeset/two-peas-exercise.md b/.changeset/two-peas-exercise.md new file mode 100644 index 00000000000..12b7ce69853 --- /dev/null +++ b/.changeset/two-peas-exercise.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix AvatarStack opacity for children without sx prop