Prevent Avatar from shrinking in Button visuals

.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.

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

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 as CSSRuleList)
+      }
+
+      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')