feat: max-overflow on Avatar.Group to be triggered by click or focus (#32197)

Based on this issue, https://github.com/ant-design/ant-design/issues/31924. Here is a proposal to allow 'click' or 'hover' to trigger the popover instead

docs: added maxPopoverTrigger to API

chore: updated demo

test: updated snapshot

Update components/avatar/index.en-US.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

Update components/avatar/index.zh-CN.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

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

@@ -479,6 +479,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;cursor:pointer"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      >
+        +2
+      </span>
+    </span>
+  </div>,
 ]
 `;
 

components/avatar/demo/group.md

@@ -49,6 +49,20 @@ const Demo = () => (
       </Tooltip>
       <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
     </Avatar.Group>
+    <Divider />
+    <Avatar.Group
+      maxCount={2}
+      maxPopoverTrigger="click"
+      size="large"
+      maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
+    >
+      <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

@@ -15,6 +15,7 @@ export interface GroupProps {
   maxCount?: number;
   maxStyle?: React.CSSProperties;
   maxPopoverPlacement?: 'top' | 'bottom';
+  maxPopoverTrigger?: 'hover' | 'focus' | 'click';
   /*
    * Size of avatar, options: `large`, `small`, `default`
    * or a custom number size
@@ -36,7 +37,7 @@ const Group: React.FC<GroupProps> = props => {
     className,
   );
 
-  const { children, maxPopoverPlacement = 'top' } = props;
+  const { children, maxPopoverPlacement = 'top', maxPopoverTrigger = 'hover' } = props;
   const childrenWithProps = toArray(children).map((child, index) =>
     cloneElement(child, {
       key: `avatar-key-${index}`,
@@ -51,7 +52,7 @@ const Group: React.FC<GroupProps> = props => {
       <Popover
         key="avatar-popover-key"
         content={childrenHidden}
-        trigger="hover"
+        trigger={maxPopoverTrigger}
         placement={maxPopoverPlacement}
         overlayClassName={`${prefixCls}-popover`}
       >

components/avatar/index.en-US.md

@@ -32,5 +32,6 @@ 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` |  |
+| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover`  | 4.17.0 |
 | 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

@@ -37,5 +37,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | --- | --- | --- | --- | --- |
 | maxCount | 显示的最大头像个数 | number | - |  |
 | maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
+| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover`| 4.17.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |