[Avatar] Set background colour for AvatarGroup's borders

[WillSquire]

Summary 💡

Avatar group uses the background colour set for the app for the Avatar borders, but doesn't pick up on the background colour of the div it's within.

.MuiAvatarGroup-avatar {
  border-color: var(--background-color);
}

Examples 🌈

Solution could be to either have a property to set the border colour:

<AvatarGroup backgroundColor={something} />

or to wrap each one in a div that inherits the background colour from a parent. Giving a more hands-off approach.

Motivation 🔦

Used it on a different background and expected it to work without overriding colour.

[oliviertassinari]

@WillSquire I have noticed that facebook.com uses a clip logic to solve this problem. However, I'm not sure about the added complexity. I don't see any clear solution out of this. The backgroundColor color sounds like an interesting tradeoff.

I have also noticed that the box model is wrong. We should change it:

diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
index 89ef01ac9..3716f65df 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
@@ -20,6 +20,7 @@ export const styles = (theme) => ({
   /* Styles applied to the avatar elements. */
   avatar: {
     border: `2px solid ${theme.palette.background.default}`,
+    boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
       marginLeft: 0,

[WillSquire]

@oliviertassinari Thanks for getting back so fast. I'm racking my brains for a hands-off solution, but I think that could be clean for now. Would you like me to have a try with a pull request?

Also noticed border takes away from the avatar's default size (40px to 36px), but wasn't sure if this was by design? I bumped it to 44px and gave it a negative margin to make it flush with default Avatar when using it. content-box is much cleaner though :)

[oliviertassinari]

I don't see any great solution for this:

• inline-style: violate strict CSP
• style function: too slow
• SVG clip: feels over-engineered, hard to customize the shape
• a custom class name: current tradeoff
• else?

content-box is much cleaner though

Yeah, let's go with this.

[oliviertassinari]

Adding the "good first issue" label so we fix the box-sizing: #21700 (comment).

Outside of this, I doubt we can improve the tradeoff, if not by making it easier to style the border color, which we plan in #15561.

[MrEbbinghaus]

Sorry to dig this up, after such a long time, but I noticed that the background/border color mismatch is very noticeable with the new paper colors in dark mode in v5.

Here is an example on an elevation12 paper:

On elevation1, it's still noticeable: