feat: Avatar.Group add size props (#27348)

* feat: Avatar.Group add size props

* change type

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -599,6 +599,43 @@ Array [
       </span>
     </span>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-avatar-group"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
+    >
+      <img
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      />
+    </span>
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-circle"
+      style="background-color:#f56a00"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      >
+        K
+      </span>
+    </span>
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-circle"
+      style="color:#f56a00;background-color:#fde3cf"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      >
+        +2
+      </span>
+    </span>
+  </div>,
 ]
 `;
 

components/avatar/avatar.tsx

@@ -8,6 +8,8 @@ import { composeRef } from '../_util/ref';
 import { Breakpoint, responsiveArray, ScreenSizeMap } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 
+export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+
 export interface AvatarProps {
   /** Shape of avatar, options:`circle`, `square` */
   shape?: 'circle' | 'square';
@@ -15,7 +17,7 @@ export interface AvatarProps {
    * Size of avatar, options: `large`, `small`, `default`
    * or a custom number size
    * */
-  size?: 'large' | 'small' | 'default' | number | ScreenSizeMap;
+  size?: AvatarSize;
   gap?: number;
   /** Src of image avatar */
   src?: string;

components/avatar/demo/group.md

@@ -38,6 +38,19 @@ class Demo extends React.Component {
           </Tooltip>
           <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
         </Avatar.Group>
+        <Divider />
+        <Avatar.Group
+          maxCount={2}
+          size="large"
+          maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+        >
+          <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+          <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+          <Tooltip title="Ant User" placement="top">
+            <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
+          </Tooltip>
+          <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
+        </Avatar.Group>
       </>
     );
   }

components/avatar/group.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
-import Avatar from './avatar';
+import Avatar, { AvatarSize } from './avatar';
 import Popover from '../popover';
 
 export interface GroupProps {
@@ -14,12 +14,19 @@ export interface GroupProps {
   maxCount?: number;
   maxStyle?: React.CSSProperties;
   maxPopoverPlacement?: 'top' | 'bottom';
+  /*
+   * Size of avatar, options: `large`, `small`, `default`
+   * or a custom number size
+   * */
+  size?: AvatarSize;
 }
 
 const Group: React.FC<GroupProps> = props => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const { prefixCls: customizePrefixCls, className = '', maxCount, maxStyle } = props;
+  const { prefixCls: customizePrefixCls, className = '', maxCount, maxStyle, size } = props;
+
   const prefixCls = getPrefixCls('avatar-group', customizePrefixCls);
+
   const cls = classNames(
     prefixCls,
     {
@@ -31,6 +38,7 @@ 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}`,
     });
   });
@@ -47,7 +55,7 @@ const Group: React.FC<GroupProps> = props => {
         placement={maxPopoverPlacement}
         overlayClassName={`${prefixCls}-popover`}
       >
-        <Avatar style={maxStyle}>{`+${numOfChildren - maxCount}`}</Avatar>
+        <Avatar style={maxStyle} size={size}>{`+${numOfChildren - maxCount}`}</Avatar>
       </Popover>,
     );
     return (
@@ -58,7 +66,7 @@ const Group: React.FC<GroupProps> = props => {
   }
   return (
     <div className={cls} style={props.style}>
-      {children}
+      {childrenWithProps}
     </div>
   );
 };

components/avatar/index.en-US.md

@@ -17,7 +17,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 | icon | Custom icon type for an icon avatar | ReactNode | - |  |
 | shape | The shape of avatar | `circle` \| `square` | `circle` |  |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
 | src | The address of the image for an image avatar | string | - |  |
 | srcSet | A list of sources to use for different screen resolutions | string | - |  |
 | onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
@@ -31,3 +31,4 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | maxCount | Max avatars to show | number | - |  |
 | maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` |  |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
+| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |

components/avatar/index.zh-CN.md

@@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
-| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
 | src | 图片类头像的资源地址 | string | - |  |
 | srcSet | 设置图片类头像响应式资源地址 | string | - |  |
 | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
@@ -36,3 +36,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | maxCount | 显示的最大头像个数 | number | - |  |
 | maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
+| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |