Avatar: add min-width to prevent collapse in min-content containers#8121
Draft
adierkens wants to merge 1 commit into
Draft
Avatar: add min-width to prevent collapse in min-content containers#8121adierkens wants to merge 1 commit into
adierkens wants to merge 1 commit into
Conversation
Passing an Avatar into the Button leadingVisual slot collapsed the image
because the global `img { max-width: 100% }` rule resolves against the
`min-content` grid track. Add a matching `min-width` alongside every
`width` declaration (base regular + responsive narrow/regular/wide) so the
avatar cannot be shrunk below its intended size.
Also adds a Button + Avatar leadingVisual dev story as a VRT anchor.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 1a0bd43 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
Contributor
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #7974
Passing an
Avatarinto the ButtonleadingVisualslot rendered the image at the wrong width (collapsed to0). The cause is a collision between the globalimg { max-width: 100% }rule and Avatar's less-specificwidth: var(--avatarSize-regular). Because Button sizes theleadingVisualgrid area withmin-content,max-widthcan resolve to0and the image collapses.This adds a matching
min-widthalongside everywidthdeclaration inAvatar.module.css(base regular + responsive narrow/regular/wide; the[data-square]variant inherits the base).min-widthonly sets a floor, so rendered size in normal usage is unchanged — the avatar simply can no longer be shrunk below its intended size by an ancestor'smin-contentsizing or a globalimgmax-width rule.Changelog
New
LeadingVisualAvatarButton dev story (Button + AvatarleadingVisualacross variants/sizes) as a visual-regression anchor.Changed
Avatarnow setsmin-widthmatching itswidthfor all size variants, preventing the image from collapsing insidemin-contentcontainers such as the ButtonleadingVisualslot.Removed
Rollout strategy
Testing & Reviewing
Open the Components/Button/Dev → Leading Visual Avatar story in Storybook and confirm the avatar renders at its intended size (20px default, 16px small, 24px large) rather than collapsing.
Verified locally: avatars measure 20/16/24px in-browser. A counterfactual (forcing
min-width: 0+max-width: 100%in themin-contenttrack) collapses the avatar to0px, confirmingmin-widthis what resolves the bug. Existing Avatar unit tests (6/6) and the Storybook smoke test (313/313, including the new story) pass;tsc --noEmit, stylelint, and eslint are clean.Merge checklist