Material-ui: [AvatarGroup] Add prop for sorting Avatars rendering in ascendant or descendant order

[JoshuaCS94]

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

• [x] 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

[oliviertassinari]

with some customizations at the theme level should be enough

Which, using the above solution, would translate into:

const theme = {
  overrides: {
    MuiAvatarGroup: {
      avatar: {
        zIndex: 'initial !important',
      },
    },
  },
};

[JoshuaCS94]

@eps1lon @oliviertassinari
Thank you, guys. Im trying to go with the overrides alternative which I got working but just after overpassing some TypeScript complaints. I want to get rid of them and get a clean code. Let me explain them.

First of all, MuiAvatarGroup key doesnt exist on the Overrides type in the current version but, for some reason, I still can specify it (maybe Im missing something about TS).

Second, the string "initial !important" doesnt fit on the type declared for zIndex which is zIndexProperty, getting this error:

Type '{ zIndex: "initial !important"; }' is not assignable to type 'CreateCSSProperties<{}>'.
  Types of property 'zIndex' are incompatible.
    Type '"initial !important"' is not assignable to type 'number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | ((props: {}) => number | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined) | undefined'.

By the way, the code compiles if I use MuiAvatarGroup but it doesnt if I use any other actual key, like MuiListItemAvatar in the example above

[oliviertassinari]

First of all, MuiAvatarGroup key doesnt exist on the Overrides type in the current version but, for some reason, I still can specify it (maybe Im missing something about TS).

@JoshuaCS94 Follow #19427

Second, the string "initial !important" doesnt fit on the type declared for zIndex which is zIndexProperty, getting this error:

Ignoring the type here seems the best option.

[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...