[Avatar] Add avatar component #1210
Conversation
acomanescu
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
Netlify deploy preview |
|
Hey @acomanescu thanks for the contribution. We will be working soon on the roadmap for Base UI, where we will share the next components we have in the pipeline. As of now, the Avatar component is not planned, but please keep an eye on the GH Roadmap/issues if you want to contribute with something else. If you are interested in Base UI introducing an Avatar component, please create an issue for it. Thank you! |
|
Hi @mnajdova, thank you for your response. I am closing this PR. |
zannager
added
the
component: avatar
|
I've created an issue for Avatar and added it to the current cycle. I'll reopen this PR and take a look soon. Thanks @acomanescu! |
github-actions
bot
added
the
PR: out-of-date
| /** | ||
| * Time in milliseconds to wait before showing the fallback. | ||
| */ | ||
| delayMs: PropTypes.number, |
There was a problem hiding this comment.
| /** | |
| * Time in milliseconds to wait before showing the fallback. | |
| */ | |
| delayMs: PropTypes.number, | |
| /** | |
| * How long to wait before showing the fallback. Specified in milliseconds. | |
| */ | |
| delay: PropTypes.number, |
To be consistent with the other components.
| const { className, render, delayMs, ...otherProps } = props; | ||
|
|
||
| const context = useAvatarRootContext(); | ||
| const [canRender, setCanRender] = React.useState(delayMs === undefined); |
There was a problem hiding this comment.
| const [canRender, setCanRender] = React.useState(delayMs === undefined); | |
| const [delayPassed, setDelayPassed] = React.useState(delayMs === undefined); |
| extraProps: otherProps, | ||
| }); | ||
|
|
||
| return canRender && context.imageLoadingStatus !== 'loaded' ? renderElement() : null; |
There was a problem hiding this comment.
| return canRender && context.imageLoadingStatus !== 'loaded' ? renderElement() : null; | |
| const canRender = delayPassed && context.imageLoadingStatus !== 'loaded' ; | |
| return canRender ? renderElement() : null; |
To improve readability a bit.
|
|
||
| export default function ExampleAvatar() { | ||
| return ( | ||
| <Avatar.Root className={styles.Root}> |
There was a problem hiding this comment.
We can extend the hero demo so also show an Avatar with initials only, something like:
<Avatar.Root>
MN
</Avatar.Root>
There was a problem hiding this comment.
Also, I would make the avatars a bit smaller :)
| describeConformance(<Avatar.Root />, () => ({ | ||
| render, | ||
| refInstanceof: window.HTMLSpanElement, | ||
| })); |
There was a problem hiding this comment.
Let's add more tests to make sure the fallback behavior is working as expected.
|
@acomanescu Good work 🙏
|
This PR adds the Avatar component. I wasn't able to run the tests due to some Mocha run errors that happen even when I run the tests on a fresh clone.