From 37925dd7fc218eded5b4c2af0e2cccf640509029 Mon Sep 17 00:00:00 2001 From: David Strack Date: Tue, 7 Nov 2023 11:41:50 -0600 Subject: [PATCH 1/3] use default avatar border color when one avatar is in a stack --- .changeset/tame-rockets-compete.md | 5 +++++ src/AvatarStack/AvatarStack.stories.tsx | 6 ++++++ src/AvatarStack/AvatarStack.tsx | 6 ++++-- 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 .changeset/tame-rockets-compete.md diff --git a/.changeset/tame-rockets-compete.md b/.changeset/tame-rockets-compete.md new file mode 100644 index 00000000000..ef9d2c63495 --- /dev/null +++ b/.changeset/tame-rockets-compete.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix inconsistent border treatment when there is one avatar in an AvatarStack diff --git a/src/AvatarStack/AvatarStack.stories.tsx b/src/AvatarStack/AvatarStack.stories.tsx index 5be96557331..1137f445143 100644 --- a/src/AvatarStack/AvatarStack.stories.tsx +++ b/src/AvatarStack/AvatarStack.stories.tsx @@ -25,6 +25,12 @@ export const Default = () => ( ) +export const WithSingleAvatar = () => ( + + + +) + export const Playground: Story = args => ( diff --git a/src/AvatarStack/AvatarStack.tsx b/src/AvatarStack/AvatarStack.tsx index e712a90ed98..7ecb436da44 100644 --- a/src/AvatarStack/AvatarStack.tsx +++ b/src/AvatarStack/AvatarStack.tsx @@ -46,7 +46,8 @@ const AvatarStackWrapper = styled.span` flex-shrink: 0; height: var(--avatar-stack-size); width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) ${get('colors.canvas.default')}; + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; overflow: hidden; @@ -136,7 +137,8 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px ${get('colors.canvas.default')}; + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, From f3d6e4f3026756a186123b4a20c22074c832cadf Mon Sep 17 00:00:00 2001 From: David Strack Date: Tue, 7 Nov 2023 11:58:37 -0600 Subject: [PATCH 2/3] use fixed border on hover --- src/AvatarStack/AvatarStack.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/AvatarStack/AvatarStack.tsx b/src/AvatarStack/AvatarStack.tsx index 7ecb436da44..5ca535c63af 100644 --- a/src/AvatarStack/AvatarStack.tsx +++ b/src/AvatarStack/AvatarStack.tsx @@ -137,8 +137,7 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + box-shadow: 0 0 0 4px ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, From 8b0942279c771c5c398856d0f7c401df3880661d Mon Sep 17 00:00:00 2001 From: David Strack Date: Tue, 7 Nov 2023 17:56:29 -0600 Subject: [PATCH 3/3] don't expand border on hover when there's one item --- src/AvatarStack/AvatarStack.features.stories.tsx | 6 ++++++ src/AvatarStack/AvatarStack.stories.tsx | 6 ------ src/AvatarStack/AvatarStack.tsx | 2 +- src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 10 ++++++++-- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/AvatarStack/AvatarStack.features.stories.tsx b/src/AvatarStack/AvatarStack.features.stories.tsx index ce72117620d..cd4e6bdef23 100644 --- a/src/AvatarStack/AvatarStack.features.stories.tsx +++ b/src/AvatarStack/AvatarStack.features.stories.tsx @@ -88,3 +88,9 @@ export const CustomSizeOnChildrenResponsive = () => ( /> ) + +export const WithSingleAvatar = () => ( + + + +) diff --git a/src/AvatarStack/AvatarStack.stories.tsx b/src/AvatarStack/AvatarStack.stories.tsx index 1137f445143..5be96557331 100644 --- a/src/AvatarStack/AvatarStack.stories.tsx +++ b/src/AvatarStack/AvatarStack.stories.tsx @@ -25,12 +25,6 @@ export const Default = () => ( ) -export const WithSingleAvatar = () => ( - - - -) - export const Playground: Story = args => ( diff --git a/src/AvatarStack/AvatarStack.tsx b/src/AvatarStack/AvatarStack.tsx index 5ca535c63af..b5243c533dd 100644 --- a/src/AvatarStack/AvatarStack.tsx +++ b/src/AvatarStack/AvatarStack.tsx @@ -137,7 +137,7 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + ${props => (props.count === 1 ? '' : `box-shadow: 0 0 0 4px ${get('colors.canvas.default')};`)} transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, diff --git a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index a6da88bd8c9..f4130e8cca4 100644 --- a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -122,11 +122,14 @@ exports[`Avatar renders consistently 1`] = ` margin-left: 4px; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px #ffffff; -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; 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; } +.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:0 0 0 4px function (props) { + return: (0,_core.get)(props.theme,path,fallback); +} + .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child { margin-left: 0; } @@ -284,11 +287,14 @@ exports[`Avatar respects alignRight props 1`] = ` margin-left: 4px; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px #ffffff; -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; 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; } +.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:0 0 0 4px function (props) { + return: (0,_core.get)(props.theme,path,fallback); +} + .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child { margin-left: 0; }