[Avatar] Set background colour for AvatarGroup's borders

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,

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