AvatarStack: Prevent border styles from applying to non-avatar components

.changeset/bitter-cougars-deny.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AvatarStack: Border was incorrectly applying to elements that were not `Avatar` children.

.changeset/evil-zebras-train.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AvatarStack: The square prop was not applying to individual `Avatar` components.

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', () => {

packages/react/src/AvatarStack/AvatarStack.features.stories.tsx

@@ -62,6 +62,15 @@ export const CustomSizeOnChildren = () => (
   </AvatarStack>
 )
 
+export const WithSquareAvatars = () => (
+  <AvatarStack shape="square">
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </AvatarStack>
+)
+
 // the smallest size of the children avatars will be used at each breakpoint
 export const CustomSizeOnChildrenResponsive = () => (
   <AvatarStack>

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

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),
     })
   })