[AvatarGroup] Add a prop for configuring the overlap

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Here’s a mockup from the PR:

There should be some way to specify which direction the AvatarGroup overlaps/cascades its items.

Examples 🌈

Other Implementations

This component is on react-ui-roundup if looking at other implementations is helpful:

Motivation 🔦

I am working with a design that utilizes AvatarGroup, but the design requires the groups to cascade above each other, rather than below. It seems reasonable to me that a prop for this should exist to configure this.

[siriwatknp]

@dimitropoulos You can use this snippet as a workaround.

<ThemeProvider
  theme={createTheme({
    components: {
      MuiAvatarGroup: {
        styleOverrides: {
          root: ({ ownerState: { max } }) => ({
            ...[...Array(max)].reduce(
              (result, curr, index) => ({
                ...result,
                [`& > .MuiAvatar-root:nth-child(${index + 1})`]: {
                  zIndex: max - index
                }
              }),
              {}
            )
          })
        }
      }
    }
  })}
>

https://codesandbox.io/s/groupavatars-material-demo-forked-vcfufi?file=/demo.tsx

[mnajdova]

In my opinion, I would wait for upvotes 👍. This is something that can be implemented in userland with theme overrides with just few lines of code. So far, we didn’t have request for this, so I am not sure if many developers would benefit from this.