[BUG] - Avatar

[Heisen-erg]

NextUI Version

2.4.0

Describe the bug

isbordered property and color property not working properly

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

use isbordered property of avatar component in Next.js

Expected behavior

border should be visible when giving true to isbordered property

Screenshots or Videos

No response

Operating System Version

windows

Browser

Chrome

[linear[bot]]

ENG-1498 [BUG] - Avatar

[ShrinidhiUpadhyaya]

Couldn't reproduce, can you please provide a sandbox.

[wingkwong]

please try latest version.

[dilonhenrique]

Hi there!

Same happened to me and I was trying to reproduce in a sandbox. While testing, I discovered I had this part of code in my tailwind.config:

theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },

Just removed this colors vars and solved my problem. Hope this helps @Heisen-erg

[elartix]

Avatar component will throw error does not recognize the 'disableAnimation' when applied next.js Image component for ImgComponent or fallback.

Warning: React does not recognize the 'disableAnimation' prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase 'disableanimation' instead. 
If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at eval (webpack-internal:///(ssr)/./node_modules/next/dist/client/image-component.js:133:11)
    at eval (webpack-internal:///(ssr)/./node_modules/next/dist/client/image-component.js:242:47)
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/avatar/dist/chunk-QXREVWCS.mjs:17:369)
    at button
    at ot (webpack-internal:///(ssr)/./node_modules/@headlessui/react/dist/components/menu/menu.js:283:57)

Steps to Reproduce the Bug or Issue

import Image from 'next/image';

import userAvatarImg from '@/assets/images/user-default.svg';

export const BaseUserProfileAvatar = memo(function BaseUserProfileAvatar ({ user }: BaseUserProfileAvatarProps) {
  const userFullName = `${user?.firstName} ${user?.lastName}`;
  const userAvatarUrl = _.get(user, 'profile.avatarUrl', '');

  return <Avatar
    as="div"
    radius="full"
    showFallback
    alt={userFullName}
    src={userAvatarUrl}
    name={userFullName}
    ImgComponent={Image}
    imgProps={{
      width: 32,
      height: 32,
    }}
    className="h-8 w-8"
    classNames={{
      base: 'bg-[#f4f4f4]',
      fallback: 'w-full h-full',
    }}
    fallback={<Image
      width={32}
     height={32}
      alt={userFullName}
      src={userAvatarImg}
      className="h-8 w-8"
    />}
  />;
});

[wingkwong]

@elartix i rmb this has been fixed. please wait for the next release.

[elartix]

@elartix i rmb this has been fixed. please wait for the next release.

Thank you