Better implementation of Avatar Group (remove z-index)

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

Summary 💡

Avatar Group should be implemented without z-index to reduce interference with other components that uses z-index

Current Implementation:

   <div className={clsx(classes.root, className)} ref={ref} {...other}>
     {children.slice(0, children.length - extraAvatars).map((child, index) => {
       return React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: {
           zIndex: children.length - index,
           marginLeft: index === 0 ? undefined : marginLeft,
           ...child.props.style,
         },
       });
     })}
     {extraAvatars ? (
       <Avatar
         className={classes.avatar}
         style={{
           zIndex: 0,
           marginLeft,
         }}
       >
         +{extraAvatars}
       </Avatar>
     ) : null}
   </div>

Personally, I believe that this should be implemented with the innate HTML order priority. We can achieve this buy simply applying row-reverse to root and reversing the order of children.

P.S. I think we should also have a stackingDirection property that lets change change if we want it to stack RTL or LTR

I will be happen to open a PR if my suggestion is accepted

[oliviertassinari]

@nvdai2401 The author of the issue might be working on it.

However, our policy is to wait 7 days before giving an issue to somebody else. If we don’t hear back in two days, I think that it’s safe to work on 😃

[oliviertassinari]

Sure 😃