refactor: replace and remove deprecated Avatar component #15930
Conversation
|
During the refactor, I noticed that ShadCN adds some boilerplate to the Avatar component. Since we already have a well-established usage of this component across the codebase, I’m wondering if we could simplify it to the following: Instead of: <Avatar>
<Avatar src="..." />
<AvatarFallback>{avatarLetter("Bruno Quaresma")}</AvatarFallback>
</Avatar>It could be: <Avatar src="..." alt="Bruno Quaresma" />@jaaydenh wdyt? |
|
@BrunoQuaresma Are you proposing alt gets converted internally to the AvatarFallback? or not using the AvatarFallback? It feels like Avatar should have 3 props, src, alt and fallback. I definitely can see a benefit to simplifying the usage from 4 lines to 1 since Avatar is used in so many places. |
Yes, I was initially thinking of using |
|
@jaaydenh it is ready for review! 👍 |
| /> | ||
| {fallback && ( | ||
| <AvatarPrimitive.Fallback className="flex h-full w-full items-center justify-center rounded-full"> | ||
| {fallback.charAt(0).toUpperCase()} |
There was a problem hiding this comment.
This could be a separate PR but it would be nice if we started using 2 letters for the fallback case. For example, the first letter of the first 2 words in display name. For example, if you look at the users page on dev.coder.com there are many duplicated avatars for the letters A and B that it doesn't serve much purpose as a identifier.
There was a problem hiding this comment.
Yes, I was planning to address this in another PR if necessary. Since we don’t control the name or display name, we can’t enforce them to have at least two words to display two letters. In such cases, we would display only one letter, correct? Since this involves some logic and could slightly impact the design, I left it out of the scope for this PR.
| @@ -35,7 +35,6 @@ export const UserDropdown: FC<UserDropdownProps> = ({ | |||
| <div css={styles.badgeContainer}> | |||
| <Badge overlap="circular"> | |||
| <UserAvatar | |||
| css={styles.avatar} | |||
| username={user.username} | |||
There was a problem hiding this comment.
based on the designs for the topbar navigation, https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=ZPGincsj3IkIlTun-1
The size for the UserAvatar should be size="lg"
| /> | ||
| ); | ||
| export const TopbarAvatar: FC<{ src: string }> = ({ src }) => { | ||
| return <Avatar variant="icon" size="sm" src={src} />; |
There was a problem hiding this comment.
the TopbarAvatar needs the fallback prop
| default: "h-6 w-6 text-2xs", | ||
| sm: "h-[18px] w-[18px] text-[8px]", | ||
| lg: "h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium", | ||
| default: "h-[--avatar-default] w-[--avatar-default] text-2xs", |
There was a problem hiding this comment.
Just to confirm, do you think default is being used alot more than lg and sm? otherwise I would name this "md"
There was a problem hiding this comment.
For example, I used "default" and "sm" for Button.tsx because I imagined default would be used most of the time.
There was a problem hiding this comment.
As I think about this more, I feel default makes alot more sense for a variant than it does for a size
There was a problem hiding this comment.
Makes sense. I think we can use md instead.
|
@BrunoQuaresma one general comment is that I noticed you are not currently using the alt prop on the Avatar component. |
|
|
Good point. I think we can just remove it for now since the |
I’ll take a look, but that makes sense. |
I think though the alt prop gets passed to the underlying radix avatar component and is used as the alt prop for the image if the image doesn't load for some reason |
Yep, but honestly, in this case, alt doesn’t add much value since we already use the avatar alongside other text or inside a button with a label (or aria-label). Since the avatar is more of a presentational element, I wouldn’t worry too much about it. That said, let’s involve @Parkreiner to see if it makes sense from a usability perspective. |
|
@jaaydenh I think this PR is ready to merge. Regarding this comment, I think we can circle back to it later if needed. What do you think? |
Close #14997