[material-ui][AvatarGroup] Refactor component thereby fixing custom s…

…pacing logic (#40686)
mui · Jan 23, 2024 · 7cd0ea3 · 7cd0ea3
1 parent 17c0a79
commit 7cd0ea3
Showing 1 changed file with 21 additions and 37 deletions.
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -33,31 +33,25 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
     ...styles.root,
   }),
-})(({ theme }) => ({
-  [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0,
+})(({ theme, ownerState }) => {
+  const marginValue =
+    ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
+      ? SPACINGS[ownerState.spacing]
+      : -ownerState.spacing;
+
+  return {
+    [`& .${avatarClasses.root}`]: {
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+      boxSizing: 'content-box',
+      marginLeft: marginValue ?? -8,
+      '&:last-child': {
+        marginLeft: 0,
+      },
     },
-  },
-  display: 'flex',
-  flexDirection: 'row-reverse',
-}));
-
-const AvatarGroupAvatar = styled(Avatar, {
-  name: 'MuiAvatarGroup',
-  slot: 'Avatar',
-  overridesResolver: (props, styles) => styles.avatar,
-})(({ theme }) => ({
-  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-  boxSizing: 'content-box',
-  marginLeft: -8,
-  '&:last-child': {
-    marginLeft: 0,
-  },
-}));
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  };
+});
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const props = useThemeProps({
@@ -117,8 +111,6 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
 
-  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
-
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
 
   return (
@@ -130,28 +122,20 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
       {...other}
     >
       {extraAvatars ? (
-        <AvatarGroupAvatar
-          ownerState={ownerState}
+        <Avatar
           variant={variant}
           {...additionalAvatarSlotProps}
           className={clsx(classes.avatar, additionalAvatarSlotProps?.className)}
-          style={{ marginLeft, ...additionalAvatarSlotProps?.style }}
         >
           {extraAvatarsElement}
-        </AvatarGroupAvatar>
+        </Avatar>
       ) : null}
       {children
         .slice(0, maxAvatars)
         .reverse()
-        .map((child, index) => {
+        .map((child) => {
           return React.cloneElement(child, {
             className: clsx(child.props.className, classes.avatar),
-            style: {
-              // Consistent with "&:last-child" styling for the default spacing,
-              // we do not apply custom marginLeft spacing on the last child
-              marginLeft: index === maxAvatars - 1 ? undefined : marginLeft,
-              ...child.props.style,
-            },
             variant: child.props.variant || variant,
           });
         })}