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..f157ff4e041 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 { + function getRules(rules: CSSRuleList): Array { + 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() + + 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() const avatar = screen.getByTestId('avatar')