Avatar

[Willienn]

Avatar

An Avatar is a graphical representation of a user, team, or entity. Avatar can display an image, icon, or initials, and supports various sizes and shapes.

Tasks:

• [x] Avatar
  • [x] as: "span"
  • [x] image: The avatar image
  • [x] name: Is used to determine the initials displayed by the component
  • [x] icon: Icon to be displayed when the avatar doesn't have an image or initials.
  • [x] initials: (optional) Custom initials. It is usually not necessary to specify custom initials; By default they will be derived from the name prop, using the getInitials function. The initials are displayed when there is no image (including while the image is loading).
  • [x] badge: Badge to show the avatar's presence status.
  • [x] active: Optional activity indicator
  • active: the avatar will be decorated according to activeAppearance
  • inactive: the avatar will be reduced in size and partially transparent
  • unset: normal display
  • [x] activeAppearance: The appearance when active="active" - [ ] color: The color when displaying either an icon or initials. - neutral (default): gray - brand: color from the brand palette - colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided) - specific color from the theme - [ ] idForColor: Specify a string to be used instead of the name, to determine which color to use when color="colorful".
  • [x] name: The name of the person or entity represented by this Avatar. This should always be provided if it is available. The name is used to determine the initials displayed when there is no image. It is also provided to accessibility tools.
  • [x] size: Size of the avatar in pixels.
  • [x] behavior: follow behavior specified here

[Willienn]

About "idForColor" and "color" i decide to just pass a bg to the component via classname like this:

<Avatar status="online" className="bg-brand-primary">
   <AvatarImage src="https://avatars.githubusercontent.com/u/124599?v=4" />
   <AvatarFallback>Josh Well</AvatarFallback>
</Avatar>

Other way will add extra work and complexity to the component.