refactor: tweak button style code (#51646)

components/button/button.tsx

@@ -22,7 +22,7 @@ import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonH
 import IconWrapper from './IconWrapper';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
-import CompactCmp from './style/compactCmp';
+import Compact from './style/compact';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -337,8 +337,7 @@ const InternalCompoundedButton = React.forwardRef<
     >
       {iconNode}
       {kids}
-      {/* Styles: compact */}
-      {!!compactItemClassnames && <CompactCmp key="compact" prefixCls={prefixCls} />}
+      {compactItemClassnames && <Compact prefixCls={prefixCls} />}
     </button>
   );
 

components/button/style/compact.ts

@@ -0,0 +1,50 @@
+// Style as inline component
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { genCompactItemStyle } from '../../style/compact-item';
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import type { GenerateStyle } from '../../theme/internal';
+import { genSubStyleComponent } from '../../theme/internal';
+import type { ButtonToken } from './token';
+import { prepareComponentToken, prepareToken } from './token';
+
+const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
+  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
+  const insetOffset = calc(lineWidth).mul(-1).equal();
+  const getCompactBorderStyle = (vertical?: boolean) =>
+    ({
+      [`${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`]:
+        {
+          '& + &::before': {
+            position: 'absolute',
+            top: vertical ? insetOffset : 0,
+            insetInlineStart: vertical ? 0 : insetOffset,
+            backgroundColor: colorPrimaryHover,
+            content: '""',
+            width: vertical ? '100%' : lineWidth,
+            height: vertical ? lineWidth : '100%',
+          },
+        },
+    }) as CSSObject;
+  // Special styles for Primary Button
+  return {
+    ...getCompactBorderStyle(),
+    ...getCompactBorderStyle(true),
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(
+  ['Button', 'compact'],
+  (token) => {
+    const buttonToken = prepareToken(token);
+
+    return [
+      // Space Compact
+      genCompactItemStyle(buttonToken),
+      genCompactItemVerticalStyle(buttonToken),
+      genButtonCompactStyle(buttonToken),
+    ];
+  },
+  prepareComponentToken,
+);

components/button/style/compactCmp.ts

@@ -1,72 +0,0 @@
-// Style as inline component
-import { unit } from '@ant-design/cssinjs';
-
-import { genCompactItemStyle } from '../../style/compact-item';
-import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
-import type { GenerateStyle } from '../../theme/internal';
-import { genSubStyleComponent } from '../../theme/internal';
-import type { ButtonToken } from './token';
-import { prepareComponentToken, prepareToken } from './token';
-
-const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { componentCls, calc } = token;
-
-  return {
-    [componentCls]: {
-      // Special styles for Primary Button
-      [`&-compact-item${componentCls}-primary`]: {
-        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
-          {
-            position: 'relative',
-
-            '&:before': {
-              position: 'absolute',
-              top: calc(token.lineWidth).mul(-1).equal(),
-              insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-              display: 'inline-block',
-              width: token.lineWidth,
-              height: `calc(100% + ${unit(token.lineWidth)} * 2)`,
-              backgroundColor: token.colorPrimaryHover,
-              content: '""',
-            },
-          },
-      },
-      // Special styles for Primary Button
-      '&-compact-vertical-item': {
-        [`&${componentCls}-primary`]: {
-          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
-            {
-              position: 'relative',
-
-              '&:before': {
-                position: 'absolute',
-                top: calc(token.lineWidth).mul(-1).equal(),
-                insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-                display: 'inline-block',
-                width: `calc(100% + ${unit(token.lineWidth)} * 2)`,
-                height: token.lineWidth,
-                backgroundColor: token.colorPrimaryHover,
-                content: '""',
-              },
-            },
-        },
-      },
-    },
-  };
-};
-
-// ============================== Export ==============================
-export default genSubStyleComponent(
-  ['Button', 'compact'],
-  (token) => {
-    const buttonToken = prepareToken(token);
-
-    return [
-      // Space Compact
-      genCompactItemStyle(buttonToken),
-      genCompactItemVerticalStyle(buttonToken),
-      genButtonCompactStyle(buttonToken),
-    ];
-  },
-  prepareComponentToken,
-);