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