Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes display of avatar in flex container #16047

Merged
merged 1 commit into from
Oct 3, 2022

Conversation

georgewrmarshall
Copy link
Contributor

Explanation

Currently, the BaseAvatar breaks if the flex container is smaller than the children and will try to squeeze the avatar into the space available.

This is a problem because the BaseAvatar should always be the same ratio

In order to solve this problem, this pull request add flex property to the BaseAvatar to fix this

Screenshots/Screencaps

Before

avatar.broken.mov

After

avatar.fix.mov

Manual Testing Steps

  • Go to the latest build of storybook in this PR
  • Search for AvatarTokem and find the Size story
  • Resize the browser so it is smaller than the Avatars

@georgewrmarshall georgewrmarshall self-assigned this Sep 30, 2022
@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@georgewrmarshall georgewrmarshall added the area-UI Relating to the user interface. label Sep 30, 2022
@georgewrmarshall georgewrmarshall marked this pull request as ready for review September 30, 2022 22:08
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner September 30, 2022 22:08
@georgewrmarshall georgewrmarshall changed the title Fixes display of avatar is flex container Fixes display of avatar in flex container Sep 30, 2022
@metamaskbot
Copy link
Collaborator

Builds ready [e30f0d7]
Page Load Metrics (2107 ± 89 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint86126104115
domContentLoaded14952371207620197
load15682371210718689
domInteractive14952371207620197

highlights:

storybook

Copy link
Contributor

@ryanml ryanml left a comment

Choose a reason for hiding this comment

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

lgtm!

@georgewrmarshall georgewrmarshall merged commit 5cc4119 into develop Oct 3, 2022
@georgewrmarshall georgewrmarshall deleted the some-avatar-fixes branch October 3, 2022 18:01
@github-actions github-actions bot locked and limited conversation to collaborators Oct 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-UI Relating to the user interface.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants