fix: Avatar.Group item could be wrapped (#39993)

* fix: AvatarGroup item could be wrapped

* test: update snapshot

* refactor avatarGroup space

* test: update snapshot

* revert avatarGroupBorderColor

components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -345,6 +345,9 @@ Array [
         src="https://joeschmoe.io/api/v1/random"
       />
     </span>
+    <a
+      href="https://ant.design"
+    >
       <span
         class="ant-avatar ant-avatar-circle"
         style="background-color:#f56a00"
@@ -356,6 +359,7 @@ Array [
           K
         </span>
       </span>
+    </a>
     <span
       class="ant-avatar ant-avatar-circle ant-avatar-icon"
       style="background-color:#87d068"

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

@@ -345,6 +345,9 @@ Array [
         src="https://joeschmoe.io/api/v1/random"
       />
     </span>
+    <a
+      href="https://ant.design"
+    >
       <span
         class="ant-avatar ant-avatar-circle"
         style="background-color:#f56a00"
@@ -356,6 +359,7 @@ Array [
           K
         </span>
       </span>
+    </a>
     <span
       class="ant-avatar ant-avatar-circle ant-avatar-icon"
       style="background-color:#87d068"

components/avatar/demo/group.tsx

@@ -6,7 +6,9 @@ const App: React.FC = () => (
   <>
     <Avatar.Group>
       <Avatar src="https://joeschmoe.io/api/v1/random" />
+      <a href="https://ant.design">
         <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+      </a>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
       </Tooltip>

components/avatar/style/index.ts

@@ -110,7 +110,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
 };
 
 const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
-  const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
+  const { componentCls, avatarGroupBorderColor, avatarGroupSpace } = token;
 
   return {
     [`${componentCls}-group`]: {
@@ -118,18 +118,12 @@ const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
 
       [`${componentCls}`]: {
         borderColor: avatarGroupBorderColor,
-
-        [`&:not(:first-child)`]: {
-          marginInlineStart: -avatarGroupOverlapping,
-        },
       },
 
-      [`&-popover`]: {
-        [`${componentCls} + ${componentCls}`]: {
+      [`> *:not(:first-child)`]: {
         marginInlineStart: avatarGroupSpace,
       },
     },
-    },
   };
 };
 
@@ -162,8 +156,7 @@ export default genComponentStyleHook('Avatar', (token) => {
     avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
     avatarFontSizeLG: fontSizeHeading3,
     avatarFontSizeSM: fontSize,
-    avatarGroupOverlapping: marginXS,
-    avatarGroupSpace: marginXS,
+    avatarGroupSpace: -marginXS,
     avatarGroupBorderColor: colorBorderBg,
   });