[AvatarGroup] Move to the core

[Studio384]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Currently, the only indication that AvatarGroup is a lab-component is its import statement in the example that is hidden by default. This should be mentioned in the text above the example.

The 4.8.0 release notes also don't mention this and even list AvatarGroup as part of core instead of lab.

I'd argue it would be even better to just split this component to its own page that is listed under "Lab" in the menu, and merge that back into the Avatar-page once the component is stable.

[oliviertassinari]

@Studio384 From my perspective, we could move the component as is in the core. In the pull request, we have explored a couple of enhancement, none required a breaking change:

• add a spacing prop
• add a max prop to have an automatic +x behavior

@mbrookes What do you think?

[mbrookes]

Given how simple the internals are, I have no objection to moving this to the core, and adding features later based on demand. Neither of the suggested features is technically challenging, so unlikely to cause issues.

[oliviertassinari]

@Studio384 I think that we can wait a couple of weeks before taking on this task, it would be great for v4.9.0 :). Feel free to take the lead of it 💪.

[Studio384]

@oliviertassinari In the meantime, shouldn't the line about AvatarGroup in the 4.8.0 release notes be moved from the release notes of the core package to the notes for lab?

[oliviertassinari]

Fixed, thanks

[afzalsayed96]

Hey, I have an abstraction around Avatar like this

function UserAvatar({ user, ...other }) {
  const classes = useStyles()

  return (
    <Avatar
      alt={user.name}
      className={classes.avatar}
      src={user.avatar}
      title={user.name}
      {...other}
    >
      {user.initials}
    </Avatar>
  )
}

Now if I use this component inside AvatarGroup the styles from my provided className won't apply to Avatar.

The reason being that AvatarGroup is looking for className on my custom UserAvatar component and not it's child Avatar here.
https://github.com/mui-org/material-ui/blob/a07f18029a5532de310f234392c18664817f0dce/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js#L41

Do you suggest any workaround for this issue? How does this work correctly with Tooltip? I'll be happy to make a PR if required.

Thanks

Edit

Never mind. This seems to work:

-function UserAvatar({ user, ...other }) {
+function UserAvatar({ user, className, ...other }) {
  const classes = useStyles()

  return (
    <Avatar
      alt={user.name}
-     className={classes.avatar}
+     className={clsx(className,classes.avatar)}
      src={user.avatar}
      title={user.name}
      {...other}
    >
      {user.initials}
    </Avatar>
  )
}

Cheers

[GFynbo]

Hi all,

I'd like to take a stab at this issue. This is my first time contributing and any advice or recommendations would be greatly appreciated. From what I can see, the following needs to be done:

• Move AvatarGroup from Lab --> Core
• Update docs to reflect AvatarGroup in Core as well as the Avatar docs with correct import
• Add a spacing prop
• Add a max prop to have automatic +x behavior

And for max +x behavior are you referring to defining a limit of avatar's shown and the remainder as the +x as shown in the docs @oliviertassinari ? If so should that be in these changes or as a separate feature?

Correct me if I'm wrong or have any misunderstandings.

Thanks!

[oliviertassinari]

This sounds to me that it should be the subject of 3 different pull requests. 1. move to core 2. add spacing prop 3. add max prop. Otherwise, great, happy to see you around :).

[mbrookes]

I'd suggest that the move to core should come last.

[GFynbo]

What should the spacing prop be defined by? Just raw values ranging from some number such as 2 to -12 or something?

Or is there a best practice that I'm not aware of?

[oliviertassinari]

Great question. My initial intuition was to say a to use a multiple of theme.spacing unit (1.), but in this context, I wonder if a px unit wouldn't be better (2.). For instance, let's say a user customize theme.spacing, should it impact the AvatarGroup?