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.

Sign up for GitHub

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

Jump to bottom

[BUG] - avatar icon not shown in User component #3369

Closed
wingkwong opened this issue Jun 30, 2024 · 3 comments · Fixed by #3387
Closed

[BUG] - avatar icon not shown in User component #3369

wingkwong opened this issue Jun 30, 2024 · 3 comments · Fixed by #3387
Assignees
@wingkwong
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@wingkwong
Copy link
Member

wingkwong commented Jun 30, 2024 •
edited
Loading

NextUI Version

2.4.2

Describe the bug

In User component, we can pass icon to avatarProps. However, there is name defined in User, this will pass to Avatar causing to show the initial instead of icon.

Need to double check why we pass name to Avatar instead of not taking from avatarProps.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<User
    avatarProps={{
        radius: "full",
        size: "sm",
        icon: <AvatarIcon />,
        classNames: {
            base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
            icon: "text-black/80",
        }
    }}
    name="test"
/>

image

Expected behavior

If name doesn't pass to avatarProps, initial shouldn't be shown.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome
@linear Linear
Copy link

linear bot commented Jun 30, 2024

ENG-1075 [BUG] - avatar icon not shown in User component

@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components labels Jun 30, 2024
@wingkwong
Copy link
Member Author

Here's a workaround:

avatarProps: {
  radius: "full",
  size: "sm",
  icon: <AvatarIcon />,
  classNames: {
    base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
    icon: "text-black/80",
  },
  name: undefined,
}

@oebh2408
Copy link

Here's a workaround:

avatarProps: {
  radius: "full",
  size: "sm",
  icon: <AvatarIcon />,
  classNames: {
    base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
    icon: "text-black/80",
  },
  name: undefined,
}

Thank you for the workaround!

This was referenced Jun 30, 2024
Closed
Closed
@wingkwong wingkwong self-assigned this Jul 1, 2024
@wingkwong wingkwong mentioned this issue Jul 1, 2024
Merged
@github-actions github-actions bot mentioned this issue Jul 6, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wingkwong wingkwong

Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@wingkwong @oebh2408