From a92c9ef1fccf12cd7fa192c62384062aa670a065 Mon Sep 17 00:00:00 2001
From: wanxiankai <xiankai.wan@gmail.com>
Date: Mon, 20 Jul 2026 11:55:52 +0800
Subject: [PATCH 1/2] fix: prevent avatar shrink in min-content slots

---
 .changeset/green-avatars-stand.md           |  5 ++++
 packages/react/src/Avatar/Avatar.module.css |  4 +++
 packages/react/src/Avatar/Avatar.test.tsx   | 29 +++++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 .changeset/green-avatars-stand.md

diff --git a/.changeset/green-avatars-stand.md b/.changeset/green-avatars-stand.md
new file mode 100644
index 00000000000..144799e2228
--- /dev/null
+++ b/.changeset/green-avatars-stand.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Prevent `Avatar` from shrinking in min-content slots such as `Button` leading visuals.
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);
     }
   }
diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx
index ba816856822..e73525a1367 100644
--- a/packages/react/src/Avatar/Avatar.test.tsx
+++ b/packages/react/src/Avatar/Avatar.test.tsx
@@ -4,6 +4,24 @@ import Avatar from '../Avatar'
 import {implementsClassName} from '../utils/testing'
 import classes from './Avatar.module.css'
 
+function getCSSRules(selector: string): Array<CSSStyleRule> {
+  function getRules(rules: CSSRuleList): Array<CSSStyleRule> {
+    return Array.from(rules).flatMap(rule => {
+      if (rule instanceof CSSStyleRule) {
+        return rule.selectorText === selector ? [rule] : []
+      }
+
+      if ('cssRules' in rule) {
+        return getRules(rule.cssRules)
+      }
+
+      return []
+    })
+  }
+
+  return Array.from(document.styleSheets).flatMap(sheet => getRules(sheet.cssRules))
+}
+
 describe('Avatar', () => {
   implementsClassName(Avatar, classes.Avatar)
 
@@ -30,6 +48,17 @@ describe('Avatar', () => {
     expect(avatar).toHaveAttribute('height', '40')
   })
 
+  it('sets min-width from its size variable so it cannot shrink in min-content slots', () => {
+    render(<Avatar src="primer.png" data-testid="avatar" />)
+
+    const rules = getCSSRules(`:where(.${classes.Avatar})`)
+    const hasMinWidthDeclaration = rules.some(rule => {
+      return rule.style.minWidth === 'var(--avatarSize-regular)'
+    })
+
+    expect(hasMinWidthDeclaration).toBe(true)
+  })
+
   it('passes through the src prop', () => {
     render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
     const avatar = screen.getByTestId('avatar')

From 4e6b284dd49e8c05451e4a551c76795272e26fdc Mon Sep 17 00:00:00 2001
From: wanxiankai <xiankai.wan@gmail.com>
Date: Wed, 22 Jul 2026 15:23:58 +0800
Subject: [PATCH 2/2] fix: type nested avatar css rules

---
 packages/react/src/Avatar/Avatar.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx
index e73525a1367..f157ff4e041 100644
--- a/packages/react/src/Avatar/Avatar.test.tsx
+++ b/packages/react/src/Avatar/Avatar.test.tsx
@@ -12,7 +12,7 @@ function getCSSRules(selector: string): Array<CSSStyleRule> {
       }
 
       if ('cssRules' in rule) {
-        return getRules(rule.cssRules)
+        return getRules(rule.cssRules as CSSRuleList)
       }
 
       return []