From 6166c2cc0dc56a0765fa184414fc5e2607473b1b Mon Sep 17 00:00:00 2001 From: Naveed Sajjad <88137903+naveedsajjdawan@users.noreply.github.com> Date: Thu, 15 Oct 2026 13:34:54 +0500 Subject: [PATCH 1/6] fix(Avatar): prevent avatar image from shrinking --- packages/react/src/Avatar/Avatar.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index fc67531b9a7..d34dad774a9 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,6 +1,7 @@ :where(.Avatar) { display: inline-block; width: var(--avatarSize-regular); + min-width: var(--avatarSize-regular); height: var(--avatarSize-regular); overflow: hidden; /* Ensure page layout in Firefox should images fail to load */ /* stylelint-disable-next-line primer/typography */ @@ -18,16 +19,19 @@ &:where([data-responsive]) { @media screen and (--viewportRange-narrow) { width: var(--avatarSize-narrow); + min-width: var(--avatarSize-narrow); height: var(--avatarSize-narrow); } @media screen and (--viewportRange-regular) { width: var(--avatarSize-regular); + min-width: var(--avatarSize-regular); height: var(--avatarSize-regular); } @media screen and (--viewportRange-wide) { width: var(--avatarSize-wide); + min-width: var(--avatarSize-wide); height: var(--avatarSize-wide); } } From 99b3a568eb498da4202b4b330f0a0c56d4a82d01 Mon Sep 17 00:00:00 2001 From: Naveed Sajjad <88137903+naveedsajjdawan@users.noreply.github.com> Date: Thu, 15 Oct 2026 13:34:58 +0500 Subject: [PATCH 2/6] chore: add Avatar sizing changeset --- .changeset/bright-avatars-shrink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bright-avatars-shrink.md diff --git a/.changeset/bright-avatars-shrink.md b/.changeset/bright-avatars-shrink.md new file mode 100644 index 00000000000..5920620c3c5 --- /dev/null +++ b/.changeset/bright-avatars-shrink.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Avatar: prevent avatar images from shrinking below their configured size in constrained layouts. From 666c8f4ce5df3dc09af3cf7a5f8ec0cd907fc138 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Thu, 15 Oct 2026 15:16:36 -0700 Subject: [PATCH 3/6] test(Avatar): cover CSS size override regression Add browser coverage that verifies consumer sizing overrides remain square, guarding against the regression exposed by #8550. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- e2e/components/Avatar.test.ts | 11 +++++++++++ packages/react/src/Avatar/Avatar.dev.stories.tsx | 10 ++++++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/react/src/Avatar/Avatar.dev.stories.tsx diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts index 00d706cc0e1..ac1e07f985e 100644 --- a/e2e/components/Avatar.test.ts +++ b/e2e/components/Avatar.test.ts @@ -11,6 +11,11 @@ const stories = [ title: 'Size', id: 'components-avatar-features--size', }, + { + title: 'CSS Size Override Regression', + id: 'components-avatar-dev--css-size-override-regression', + expectedSize: 16, + }, { title: 'Size Responsive', id: 'components-avatar-features--size-responsive', @@ -34,6 +39,12 @@ test.describe('Avatar', () => { }, }) + if ('expectedSize' in story) { + const avatar = page.getByRole('img') + await expect(avatar).toHaveCSS('width', `${story.expectedSize}px`) + await expect(avatar).toHaveCSS('height', `${story.expectedSize}px`) + } + // Default state await expect(page).toHaveScreenshot(`Avatar.${story.title}.${theme}.png`) }) diff --git a/packages/react/src/Avatar/Avatar.dev.stories.tsx b/packages/react/src/Avatar/Avatar.dev.stories.tsx new file mode 100644 index 00000000000..5d9b9d5dec7 --- /dev/null +++ b/packages/react/src/Avatar/Avatar.dev.stories.tsx @@ -0,0 +1,10 @@ +import Avatar from './Avatar' + +export default { + title: 'Components/Avatar/Dev', +} + +// Regression fixture for consumer style overrides. Use the size prop for supported sizing. +export const CSSSizeOverrideRegression = () => ( + +) From 4683731a41dfd5f4f235dbd6125b10797fdd6c36 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Thu, 15 Oct 2026 16:43:05 -0700 Subject: [PATCH 4/6] test(Avatar): make CSS override check assertion-only Avoid screenshot baselines for the development-only regression fixture so the test fails only when computed dimensions change. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- e2e/components/Avatar.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts index ac1e07f985e..e2e498eed80 100644 --- a/e2e/components/Avatar.test.ts +++ b/e2e/components/Avatar.test.ts @@ -43,10 +43,10 @@ test.describe('Avatar', () => { const avatar = page.getByRole('img') await expect(avatar).toHaveCSS('width', `${story.expectedSize}px`) await expect(avatar).toHaveCSS('height', `${story.expectedSize}px`) + } else { + // Default state + await expect(page).toHaveScreenshot(`Avatar.${story.title}.${theme}.png`) } - - // Default state - await expect(page).toHaveScreenshot(`Avatar.${story.title}.${theme}.png`) }) }) } From c948518e0a42f99d19549b510bcb6b31007228a2 Mon Sep 17 00:00:00 2001 From: Naveed Sajjad <88137903+naveedsajjdawan@users.noreply.github.com> Date: Mon, 19 Oct 2026 15:07:28 +0500 Subject: [PATCH 5/6] fix(Avatar): preserve custom CSS dimensions --- packages/react/src/Avatar/Avatar.module.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index d34dad774a9..3f92e98f2a9 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/packages/react/src/Avatar/Avatar.module.css @@ -1,7 +1,7 @@ :where(.Avatar) { display: inline-block; width: var(--avatarSize-regular); - min-width: var(--avatarSize-regular); + flex-shrink: 0; height: var(--avatarSize-regular); overflow: hidden; /* Ensure page layout in Firefox should images fail to load */ /* stylelint-disable-next-line primer/typography */ @@ -19,19 +19,16 @@ &:where([data-responsive]) { @media screen and (--viewportRange-narrow) { width: var(--avatarSize-narrow); - min-width: var(--avatarSize-narrow); height: var(--avatarSize-narrow); } @media screen and (--viewportRange-regular) { width: var(--avatarSize-regular); - min-width: var(--avatarSize-regular); height: var(--avatarSize-regular); } @media screen and (--viewportRange-wide) { width: var(--avatarSize-wide); - min-width: var(--avatarSize-wide); height: var(--avatarSize-wide); } } From 2930dbc00f0f238efdd2ec92a10d190fee8ee07b Mon Sep 17 00:00:00 2001 From: Naveed Sajjad <88137903+naveedsajjdawan@users.noreply.github.com> Date: Tue, 20 Oct 2026 16:33:21 +0500 Subject: [PATCH 6/6] test(Avatar): cover custom sizing in constrained flex layout --- packages/react/src/Avatar/Avatar.dev.stories.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.dev.stories.tsx b/packages/react/src/Avatar/Avatar.dev.stories.tsx index 5d9b9d5dec7..cd9e2e0401a 100644 --- a/packages/react/src/Avatar/Avatar.dev.stories.tsx +++ b/packages/react/src/Avatar/Avatar.dev.stories.tsx @@ -4,7 +4,16 @@ export default { title: 'Components/Avatar/Dev', } -// Regression fixture for consumer style overrides. Use the size prop for supported sizing. +// Regression fixture: consumer CSS overrides must remain exact in constrained flex layouts. export const CSSSizeOverrideRegression = () => ( - +
+ +
)