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,17 +345,21 @@ Array [
         src="https://joeschmoe.io/api/v1/random"
       />
     </span>
-    <span
-      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+    <a
+      href="https://ant.design"
     >
       <span
-        class="ant-avatar-string"
-        style="opacity:0"
+        class="ant-avatar ant-avatar-circle"
+        style="background-color:#f56a00"
       >
-        K
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        >
+          K
+        </span>
       </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,17 +345,21 @@ Array [
         src="https://joeschmoe.io/api/v1/random"
       />
     </span>
-    <span
-      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+    <a
+      href="https://ant.design"
     >
       <span
-        class="ant-avatar-string"
-        style="opacity:0"
+        class="ant-avatar ant-avatar-circle"
+        style="background-color:#f56a00"
       >
-        K
+        <span
+          class="ant-avatar-string"
+          style="opacity:0"
+        >
+          K
+        </span>
       </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" />
-      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+      <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,16 +118,10 @@ const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
 
       [`${componentCls}`]: {
         borderColor: avatarGroupBorderColor,
-
-        [`&:not(:first-child)`]: {
-          marginInlineStart: -avatarGroupOverlapping,
-        },
       },
 
-      [`&-popover`]: {
-        [`${componentCls} + ${componentCls}`]: {
-          marginInlineStart: avatarGroupSpace,
-        },
+      [`> *: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,
   });