Repository: heroui-inc/heroui (TypeScript)

Issue:
[BUG] - avatar icon not shown in User component
### 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

```tsx
<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](https://github.com/nextui-org/nextui/assets/35857179/38caab76-9618-41af-89e5-6c3c137dbae3)

### 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


Discussion:
<p><a href="https://linear.app/nextui-inc/issue/ENG-1075/[bug]-avatar-icon-not-shown-in-user-component">ENG-1075 [BUG] - avatar icon not shown in User component</a></p>
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,
}
```
> 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!



Patch:
diff --git a/.changeset/real-falcons-care.md b/.changeset/real-falcons-care.md
new file mode 100644
index 0000000000..f989a4e360
--- /dev/null
+++ b/.changeset/real-falcons-care.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/user": patch
+---
+
+removed `name` from `avatarProps` in `use-user.ts` (#3369)
diff --git a/packages/components/user/src/use-user.ts b/packages/components/user/src/use-user.ts
index 2d481e7686..a7782aece7 100644
--- a/packages/components/user/src/use-user.ts
+++ b/packages/components/user/src/use-user.ts
@@ -66,7 +66,6 @@ export function useUser(props: UseUserProps) {
 
   const avatarProps = {
     isFocusable: false,
-    name: typeof name === "string" ? name : undefined,
     ...userAvatarProps,
   };
 


Test patch:
diff --git a/packages/components/user/__tests__/user.test.tsx b/packages/components/user/__tests__/user.test.tsx
index 702fa0404f..932fcbb523 100644
--- a/packages/components/user/__tests__/user.test.tsx
+++ b/packages/components/user/__tests__/user.test.tsx
@@ -3,6 +3,7 @@ import {render} from "@testing-library/react";
 import {Link} from "@nextui-org/link";
 
 import {User} from "../src";
+import {AvatarIcon} from "../../avatar/src";
 
 describe("User", () => {
   it("should render correctly", () => {
@@ -20,9 +21,11 @@ describe("User", () => {
 
   it("should have the passed name", () => {
     const {container} = render(<User name="Test" />);
-    const name = container.querySelector("span");
+    const spans = container.querySelectorAll("span");
 
-    expect(name).toHaveTextContent("Test");
+    expect(spans).toHaveLength(4);
+
+    expect(spans[2]).toHaveTextContent("Test");
   });
 
   it("should have the passed description", () => {
@@ -72,4 +75,31 @@ describe("User", () => {
 
     expect(wrapper.getByTestId("test-user-link")).toBeInTheDocument();
   });
+
+  it("should render avatar icon", () => {
+    const {container} = render(
+      <User
+        avatarProps={{
+          icon: <AvatarIcon />,
+        }}
+        name="test"
+      />,
+    );
+
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("should display initials in avatar if name is specified", () => {
+    const {getByRole} = render(
+      <User
+        avatarProps={{
+          icon: <AvatarIcon />,
+          name: "WK",
+        }}
+        name="test"
+      />,
+    );
+
+    expect(getByRole("img")).toHaveTextContent("WK");
+  });
 });