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;
}