-
Notifications
You must be signed in to change notification settings - Fork 14
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
Added Avatar image prop #287
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A couple of comments inline, plus:
- can we add a story for the "fallback" case? (e.g. with a broken url which doesn't load)
- I think we need to clip the image (e.g. try with a squared image, I would expect it not to overflow)
<img | ||
style={{ display: imageAvailable ? "block" : "none" }} | ||
src={imageSrc} | ||
className={avatarImage({})} | ||
onLoad={handleImageLoaded} | ||
onError={handleImageErrored} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I propose we use <Box as="img">
here, which also gives you the ability to use display
directly (<Box display={imageAvailable ? "block" : "none"} />
)
export const avatarImage = strictRecipe({ | ||
base: bentoSprinkles({ | ||
width: "full", | ||
}), | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no need to use a recipe here, you can directly use bentoSprinkles
.
bc532aa
to
74948aa
Compare
Pull request was closed
No description provided.