diff --git a/.changeset/bitter-cougars-deny.md b/.changeset/bitter-cougars-deny.md
new file mode 100644
index 00000000000..92d445b2541
--- /dev/null
+++ b/.changeset/bitter-cougars-deny.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AvatarStack: Border was incorrectly applying to elements that were not `Avatar` children.
\ No newline at end of file
diff --git a/.changeset/evil-zebras-train.md b/.changeset/evil-zebras-train.md
new file mode 100644
index 00000000000..826567afec7
--- /dev/null
+++ b/.changeset/evil-zebras-train.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AvatarStack: The square prop was not applying to individual `Avatar` components.
\ No newline at end of file
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png
index 90eb690a62d..86c185f36ac 100644
Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png
index 259c1323df3..a6e828ef2f8 100644
Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png
index 0812851cc87..73ce393f601 100644
Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png
index 259c1323df3..a6e828ef2f8 100644
Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png
index 259c1323df3..a6e828ef2f8 100644
Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png
new file mode 100644
index 00000000000..e58d2543331
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png
new file mode 100644
index 00000000000..db54a67910b
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..35981cccadc
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png
new file mode 100644
index 00000000000..e58d2543331
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..e58d2543331
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png
new file mode 100644
index 00000000000..79044ca85e2
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png
new file mode 100644
index 00000000000..79044ca85e2
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png
new file mode 100644
index 00000000000..79044ca85e2
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png
new file mode 100644
index 00000000000..79044ca85e2
Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Square-Avatars-light-tritanopia-linux.png differ
diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts
index c66e4bf22d7..273f4946c98 100644
--- a/e2e/components/AvatarStack.test.ts
+++ b/e2e/components/AvatarStack.test.ts
@@ -43,6 +43,10 @@ const stories: Array<{title: string; id: string}> = [
title: 'With Link Wrappers',
id: 'components-avatarstack-dev--with-link-wrappers',
},
+ {
+ title: 'With Square Avatars',
+ id: 'components-avatarstack-features--with-square-avatars',
+ },
]
test.describe('AvatarStack', () => {
diff --git a/packages/react/src/AvatarStack/AvatarStack.features.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.features.stories.tsx
index 9141f2665b3..968161e1e68 100644
--- a/packages/react/src/AvatarStack/AvatarStack.features.stories.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.features.stories.tsx
@@ -62,6 +62,15 @@ export const CustomSizeOnChildren = () => (
)
+export const WithSquareAvatars = () => (
+
+
+
+
+
+
+)
+
// the smallest size of the children avatars will be used at each breakpoint
export const CustomSizeOnChildrenResponsive = () => (
diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css
index a5e1bc3a9a9..b455ec447c8 100644
--- a/packages/react/src/AvatarStack/AvatarStack.module.css
+++ b/packages/react/src/AvatarStack/AvatarStack.module.css
@@ -36,7 +36,7 @@
}
&:where([data-avatar-count='1'][data-shape='circle']) {
- .AvatarItem {
+ .AvatarItem:where([data-component='Avatar']) {
/* stylelint-disable-next-line primer/box-shadow */
box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);
}
@@ -143,6 +143,10 @@
box-shadow: 0 0 0 var(--avatar-border-width) transparent;
}
+ &:not([data-component='Avatar']):not(:has([data-square])) {
+ border-radius: 50%;
+ }
+
.AvatarStack:where([data-shape='square']) &:is(img) {
/* stylelint-disable-next-line primer/box-shadow */
box-shadow: 1px 0 rgb(255, 255, 255, 1);
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
index 9661161a24c..ae400a90876 100644
--- a/packages/react/src/AvatarStack/AvatarStack.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -13,7 +13,7 @@ const transformChildren = (children: React.ReactNode, shape: AvatarStackProps['s
if (!React.isValidElement(child)) return child
return React.cloneElement(child, {
...child.props,
- square: shape === 'square' ? true : undefined,
+ square: (shape === 'square' ? true : undefined) || child.props.square,
className: clsx(child.props.className, 'pc-AvatarItem', classes.AvatarItem),
})
})