chore: merge feature into master

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>,
 ]
 `;
 
@@ -760,6 +797,18 @@ Array [
       src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
     />
   </span>,
+  <span
+    class="ant-avatar ant-avatar-circle ant-avatar-image"
+  >
+    <div
+      class="ant-image"
+    >
+      <img
+        class="ant-image-img"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      />
+    </div>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle"
     style="color:#f56a00;background-color:#fde3cf"

components/avatar/avatar.tsx

@@ -8,14 +8,16 @@ 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';
   /*
    * 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;
@@ -128,12 +130,14 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     [`${prefixCls}-sm`]: size === 'small',
   });
 
+  const hasImageElement = React.isValidElement(src);
+
   const classString = classNames(
     prefixCls,
     sizeCls,
     {
       [`${prefixCls}-${shape}`]: shape,
-      [`${prefixCls}-image`]: src && isImgExist,
+      [`${prefixCls}-image`]: hasImageElement || (src && isImgExist),
       [`${prefixCls}-icon`]: icon,
     },
     className,
@@ -150,10 +154,12 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
       : {};
 
   let childrenToRender;
-  if (src && isImgExist) {
+  if (typeof src === 'string' && isImgExist) {
     childrenToRender = (
       <img src={src} draggable={draggable} srcSet={srcSet} onError={handleImgLoadError} alt={alt} />
     );
+  } else if (hasImageElement) {
+    childrenToRender = src;
   } else if (icon) {
     childrenToRender = icon;
   } else if (mounted || scale !== 1) {

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/demo/type.md

@@ -14,7 +14,7 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
 
 ```tsx
-import { Avatar } from 'antd';
+import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
@@ -23,6 +23,9 @@ ReactDOM.render(
     <Avatar>U</Avatar>
     <Avatar size={40}>USER</Avatar>
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar
+      src={<Image src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+    />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
   </>,

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

@@ -18,7 +18,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | 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 |
-| src | The address of the image for an image avatar | string | - |  |
+| src | The address of the image for an image avatar or image element | string \| ReactNode | - |  |
 | 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

@@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
-| src | 图片类头像的资源地址 | string | - |  |
+| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - |  |
 | 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 |

components/collapse/style/index.less

@@ -35,11 +35,10 @@
         .iconfont-mixin();
 
         position: absolute;
-        top: 50%;
+        top: ceil(@padding-sm + (@font-size-base * @line-height-base - @font-size-base) / 2);
         left: @collapse-header-arrow-left;
         display: inline-block;
         font-size: @font-size-sm;
-        transform: translateY(-50%);
 
         & svg {
           transition: transform 0.24s;

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -14643,7 +14643,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
     </span>
   </span>
   <textarea
-    class="config-input"
+    class="config-input config-input-lg"
   />
 </div>
 `;