Skip to content

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Sep 17, 2025

Description

This PR corrects the changelog entries to accurately reflect what was shipped in each release and includes a fix for Avatar components shrinking in flex layouts. The avatar flex layout issue was merged into release/14 (v0.4.0) when main was merged but the changelogs were not updated, so the changelog has been updated to reflect the actual shipping timeline. Additionally, this includes the technical fix that changes the CSS class from flex-shrink-0 to shrink-0 in the AvatarBase component. Both classnames work but shrink-0 is more accurate and aligns with tailwind docs

Related issues

Fixes: N/A

Manual testing steps

  1. Pull and build the branch locally
  2. Verify the changelog entries now accurately reflect release contents:
  3. Test Avatar components in various flex layouts to ensure they no longer shrink
  4. Run yarn build to ensure all packages build successfully
  5. Verify that all avatar components (AvatarAccount, AvatarIcon, AvatarNetwork, etc.) maintain their intended size in flex containers

Screenshots/Recordings

Not applicable - this is primarily a changelog correction with a minor CSS class fix.

Before

  • Changelog incorrectly listed avatar fix in v0.4.1 instead of v0.4.0
  • Avatar components could shrink unexpectedly in flex layouts

After

  • Changelog accurately reflects release contents
  • Avatar components maintain consistent sizing in flex layouts

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Copy link
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall self-assigned this Sep 17, 2025

### Fixed

- Fixed Avatar components shrinking in flex layouts ([#825](https://github.com/MetaMask/metamask-design-system/pull/825))
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR was included in the 0.4.0 release when main was merged into the release branch

Screenshot 2025-09-17 at 8 44 40 AM

const mergedClassName = twMerge(
// Base styles
'inline-flex flex-shrink-0 items-center justify-center overflow-hidden bg-section',
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both classnames work but this aligns more with tailwind docs

@georgewrmarshall georgewrmarshall marked this pull request as ready for review September 17, 2025 15:45
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner September 17, 2025 15:45
@georgewrmarshall georgewrmarshall merged commit 0870490 into main Sep 17, 2025
42 checks passed
@georgewrmarshall georgewrmarshall deleted the changelog-fixes branch September 17, 2025 21:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants