fix: Avatar group size (#27531)

* fix: Avatar group size

* fix

components/avatar/SizeContext.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ScreenSizeMap } from '../_util/responsiveObserve';
+
+export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+
+const SizeContext = React.createContext<AvatarSize>('default');
+
+export interface SizeContextProps {
+  size?: AvatarSize;
+}
+
+export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
+  <SizeContext.Consumer>
+    {originSize => (
+      <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
+    )}
+  </SizeContext.Consumer>
+);
+
+export default SizeContext;

components/avatar/avatar.tsx

@@ -5,10 +5,9 @@ import ResizeObserver from 'rc-resize-observer';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { composeRef } from '../_util/ref';
-import { Breakpoint, responsiveArray, ScreenSizeMap } from '../_util/responsiveObserve';
+import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
-
-export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+import SizeContext, { AvatarSize } from './SizeContext';
 
 export interface AvatarProps {
   /** Shape of avatar, options:`circle`, `square` */
@@ -37,6 +36,8 @@ export interface AvatarProps {
 }
 
 const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (props, ref) => {
+  const groupSize = React.useContext(SizeContext);
+
   const [scale, setScale] = React.useState(1);
   const [mounted, setMounted] = React.useState(false);
   const [isImgExist, setIsImgExist] = React.useState(true);
@@ -87,7 +88,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
   const {
     prefixCls: customizePrefixCls,
     shape,
-    size,
+    size: customSize,
     src,
     srcSet,
     icon,
@@ -98,6 +99,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     ...others
   } = props;
 
+  const size = customSize === 'default' ? groupSize : customSize;
+
   const screens = useBreakpoint();
   const responsiveSizeStyle: React.CSSProperties = React.useMemo(() => {
     if (typeof size !== 'object') {

components/avatar/group.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
-import Avatar, { AvatarSize } from './avatar';
+import Avatar from './avatar';
 import Popover from '../popover';
+import { AvatarSize, SizeContextProvider } from './SizeContext';
 
 export interface GroupProps {
   className?: string;
@@ -38,7 +39,6 @@ const Group: React.FC<GroupProps> = props => {
   const { children, maxPopoverPlacement = 'top' } = props;
   const childrenWithProps = toArray(children).map((child, index) => {
     return cloneElement(child, {
-      size,
       key: `avatar-key-${index}`,
     });
   });
@@ -55,19 +55,24 @@ const Group: React.FC<GroupProps> = props => {
         placement={maxPopoverPlacement}
         overlayClassName={`${prefixCls}-popover`}
       >
-        <Avatar style={maxStyle} size={size}>{`+${numOfChildren - maxCount}`}</Avatar>
+        <Avatar style={maxStyle}>{`+${numOfChildren - maxCount}`}</Avatar>
       </Popover>,
     );
     return (
-      <div className={cls} style={props.style}>
-        {childrenShow}
-      </div>
+      <SizeContextProvider size={size}>
+        <div className={cls} style={props.style}>
+          {childrenShow}
+        </div>
+      </SizeContextProvider>
     );
   }
+
   return (
-    <div className={cls} style={props.style}>
-      {childrenWithProps}
-    </div>
+    <SizeContextProvider size={size}>
+      <div className={cls} style={props.style}>
+        {childrenWithProps}
+      </div>
+    </SizeContextProvider>
   );
 };