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.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.tsx b/src/AvatarStack/AvatarStack.tsx index e712a90ed98..b5243c533dd 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,7 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px ${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; }