[AvatarGroup] Add prop for sorting Avatars rendering in ascendant or descendant order

Hi, guys! 👋 This is my very first contribution to Material-UI and wanted to start with a small feature.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Add a prop to AvatarGroupProps to let the user specify how to sort Avatars out: descendant (default) or ascendant. It could be a boolean or an enum.

Examples 🌈

<AvatarGroup sort="ascendant">
  ...
</AvatarGroup>

The image below shows what I would like to achive

Motivation 🔦

I am working on the development of a component library based on Material-UI. I need to create a component for displaying a list of Avatars and think that a wrapper of AvatarGroup with some customizations at the theme level should be enough. The thing is, our design shows Avatars from bottom to top, that is, first Avatar on the bottom and last one on the top. I looked up through the docs and the code and found out there is no actual way to do that: here is the line where z-index is calculated and it would be just a matter of multiplying it by -1 depending on the aforementioned prop.

[eps1lon]

I don’t understand why you would want to display the rest on the top of the stack. That’s not how I would display cards in the real world.

However, you can do this already with

const useStyles = makeStyles({ avatar: { zIndex: "initial !important" } });

function GroupAvatars() {
  const classes = useStyles();

  return (
    <AvatarGroup classes={{ avatar: classes.avatar }}>
      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
      <Tooltip title="Foo • Bar • Baz">
        <Avatar>+3</Avatar>
      </Tooltip>
    </AvatarGroup>
  );
}

– https://codesandbox.io/s/avatargroup-reverse-stack-8q7f1

[JoshuaCS94]

@JoshuaCS94 Follow #19427

Yeah! I was thinking about the same: module augmentation 👍 But seems like that guy havent finished the PR so I would have to do it locally on my project.

Ignoring the type here seems the best option.

Could go that way for now. Maybe raise the issue to csstype? After all it seems to be a limitation on their types and not yours…