refactor: button default not use compact style (ant-design#44475)

* refactor: button default not use compact style

* chore: clean up

components/button/button.tsx

@@ -1,7 +1,4 @@
 /* eslint-disable react/button-has-type */
-import classNames from 'classnames';
-import omit from 'rc-util/lib/omit';
-import { composeRef } from 'rc-util/lib/ref';
 import React, {
   Children,
   createRef,
@@ -11,19 +8,24 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import { composeRef } from 'rc-util/lib/ref';
+
 import warning from '../_util/warning';
 import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
-import type { SizeType } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { useCompactItemContext } from '../space/Compact';
-import IconWrapper from './IconWrapper';
-import LoadingIcon from './LoadingIcon';
 import Group, { GroupSizeContext } from './button-group';
 import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers';
 import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers';
+import IconWrapper from './IconWrapper';
+import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
+import CompactStyle from './style/compactCmp';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -285,6 +287,9 @@ const InternalButton: React.ForwardRefRenderFunction<
     >
       {iconNode}
       {kids}
+
+      {/* Styles: compact */}
+      {compactItemClassnames && <CompactStyle prefixCls={prefixCls} />}
     </button>
   );
 

components/button/style/compactCmp.ts

@@ -0,0 +1,16 @@
+// Style as inline component
+import { prepareToken } from '.';
+import { genCompactItemStyle } from '../../style/compact-item';
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import { genSubStyleComponent } from '../../theme/internal';
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Button', 'compact'], (token) => {
+  const buttonToken = prepareToken(token);
+
+  return [
+    // Space Compact
+    genCompactItemStyle(buttonToken),
+    genCompactItemVerticalStyle(buttonToken),
+  ];
+});

components/button/style/index.ts

@@ -1,9 +1,9 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+
 import { genFocusStyle } from '../../style';
-import { genCompactItemStyle } from '../../style/compact-item';
-import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genGroupStyle from './group';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -517,7 +517,7 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Button', (token) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => ButtonToken = (token) => {
   const { controlTmpOutline, paddingContentHorizontal } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
@@ -527,6 +527,12 @@ export default genComponentStyleHook('Button', (token) => {
     buttonFontWeight: 400,
   });
 
+  return buttonToken;
+};
+
+export default genComponentStyleHook('Button', (token) => {
+  const buttonToken = prepareToken(token);
+
   return [
     // Shared
     genSharedButtonStyle(buttonToken),
@@ -544,9 +550,5 @@ export default genComponentStyleHook('Button', (token) => {
 
     // Button Group
     genGroupStyle(buttonToken),
-
-    // Space Compact
-    genCompactItemStyle(token),
-    genCompactItemVerticalStyle(token),
   ];
 });

components/theme/internal.ts

@@ -1,4 +1,5 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
+
 import type {
   AliasToken,
   GenerateStyle,
@@ -10,7 +11,7 @@ import type {
 import { PresetColors } from './interface';
 import useToken from './useToken';
 import type { FullToken } from './util/genComponentStyleHook';
-import genComponentStyleHook from './util/genComponentStyleHook';
+import genComponentStyleHook, { genSubStyleComponent } from './util/genComponentStyleHook';
 import genPresetColor from './util/genPresetColor';
 import statisticToken, { merge as mergeToken } from './util/statistic';
 import useResetIconStyle from './util/useResetIconStyle';
@@ -19,6 +20,7 @@ export { DesignTokenContext, defaultConfig } from './context';
 export {
   PresetColors,
   genComponentStyleHook,
+  genSubStyleComponent,
   genPresetColor,
   mergeToken,
   statisticToken,

components/theme/util/genComponentStyleHook.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-redeclare */
-import { useContext } from 'react';
+import { useContext, type ComponentType } from 'react';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { warning } from 'rc-util';
@@ -174,3 +174,18 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
     ];
   };
 }
+
+export interface SubStyleComponentProps {
+  prefixCls: string;
+}
+
+export function genSubStyleComponent<ComponentName extends OverrideComponent>(
+  ...args: Parameters<typeof genComponentStyleHook<ComponentName>>
+): ComponentType<SubStyleComponentProps> {
+  const useStyle = genComponentStyleHook(...args);
+
+  return ({ prefixCls }: SubStyleComponentProps) => {
+    useStyle(prefixCls);
+    return null;
+  };
+}