fix(button): make tokens take effect (#56842)

* refactor(button): rework component-token demo

* fix(button): linkHoverBg token not work

* fix(button): enable ghostBg for outlined and dashed ghost

* fix(button): make defaultBgDisabled take effect

* fix(button): apply paddingBlock tokens to vertical padding

* fix(button): apply contentLineHeight tokens to button line-height

* fix: token.defaultBgDisabled

* revert(button): drop contentLineHeight and paddingBlock changes

* chore(button): remove unused tokens from component-token demo

components/button/demo/component-token.tsx

@@ -1,8 +1,222 @@
 import React from 'react';
+import { SearchOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Flex } from 'antd';
 
 const App: React.FC = () => (
   <Flex gap="small" vertical>
+    <div>Component Token</div>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            fontWeight: '900',
+            contentFontSizeSM: 20,
+            contentFontSize: 30,
+            contentFontSizeLG: 40,
+            paddingInlineSM: 20,
+            paddingInline: 30,
+            paddingInlineLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small">Small</Button>
+        <Button>Default</Button>
+        <Button size="large">Large</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dangerColor: 'green',
+            dangerShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button danger>Default</Button>
+        <Button danger type="primary">
+          Primary
+        </Button>
+        <Button danger type="dashed">
+          Dashed
+        </Button>
+        <Button danger type="text">
+          Text
+        </Button>
+        <Button danger type="link">
+          Link
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            dashedBgDisabled: 'red',
+          },
+        },
+      }}
+    >
+      <Button type="dashed" disabled>
+        Dashed Disabled
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultColor: 'red',
+            defaultBg: 'blue',
+            defaultBorderColor: 'green',
+            defaultShadow: 'yellow',
+            defaultBgDisabled: 'pink',
+
+            defaultHoverColor: 'brown',
+            defaultHoverBg: 'orange',
+            defaultHoverBorderColor: 'purple',
+
+            defaultActiveColor: 'fuchsia',
+            defaultActiveBg: 'aqua',
+            defaultActiveBorderColor: 'lime',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button>Default</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <Button disabled>Disabled</Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            ghostBg: 'red',
+            defaultGhostColor: 'yellow',
+            defaultGhostBorderColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button ghost>Default</Button>
+        <Button ghost type="dashed">
+          Dashed
+        </Button>
+        <Button ghost type="text">
+          Text
+        </Button>
+        <Button ghost type="link">
+          Link
+        </Button>
+        <Button ghost type="primary">
+          Primary
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            iconGap: 40,
+          },
+        },
+      }}
+    >
+      <Button icon={<SearchOutlined />}>icon gap 40</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            linkHoverBg: 'red',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button type="link" href="https://ant.design">
+          Link
+        </Button>
+        <Button disabled type="link" href="https://ant.design">
+          Link(disabled)
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            onlyIconSizeSM: 20,
+            onlyIconSize: 30,
+            onlyIconSizeLG: 40,
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="center">
+        <Button size="small" icon={<SearchOutlined />} />
+        <Button icon={<SearchOutlined />} />
+        <Button size="large" icon={<SearchOutlined />} />
+      </Flex>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            primaryColor: 'red',
+            primaryShadow: 'yellow',
+          },
+        },
+      }}
+    >
+      <Button type="primary">Primary</Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            solidTextColor: 'red',
+          },
+        },
+      }}
+    >
+      <Button variant="solid" color="default">
+        Solid
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            textTextColor: 'red',
+            textHoverBg: 'yellow',
+            textTextHoverColor: 'blue',
+            textTextActiveColor: 'green',
+          },
+        },
+      }}
+    >
+      <Flex gap="small" align="start">
+        <Button type="text">Text</Button>
+        <Button variant="text" color="default">
+          Default Text
+        </Button>
+        <Button variant="text" color="primary">
+          Primary Text
+        </Button>
+        <Button variant="text" color="danger">
+          Danger Text
+        </Button>
+      </Flex>
+    </ConfigProvider>
+    <div>Global Token</div>
     <ConfigProvider
       theme={{
         components: {
@@ -85,47 +299,6 @@ const App: React.FC = () => (
         </Button>
       </Flex>
     </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: { Button: { paddingInline: 100, paddingInlineLG: 150, paddingInlineSM: 50 } },
-      }}
-    >
-      <Flex gap="small" vertical align="start">
-        <Button>Default Button</Button>
-        <Button shape="round">Default Button</Button>
-        <Button size="large">Default Button</Button>
-        <Button shape="round" size="large">
-          Default Button
-        </Button>
-        <Button size="small">Default Button</Button>
-        <Button shape="round" size="small">
-          Default Button
-        </Button>
-      </Flex>
-    </ConfigProvider>
-    <ConfigProvider
-      theme={{
-        components: {
-          Button: {
-            defaultBg: 'red',
-            defaultColor: 'blue',
-            defaultHoverColor: 'green',
-            defaultActiveColor: 'yellow',
-
-            textTextColor: 'purple',
-            textTextHoverColor: 'orange',
-            textTextActiveColor: 'pink',
-            textHoverBg: 'brown',
-          },
-        },
-      }}
-    >
-      <Flex gap="small" align="start">
-        <Button>Default Button</Button>
-        <Button type="dashed">Dashed Button</Button>
-        <Button type="text">Text Button</Button>
-      </Flex>
-    </ConfigProvider>
   </Flex>
 );
 

components/button/style/token.ts

@@ -154,16 +154,19 @@ export interface ComponentToken {
   /**
    * @desc 按钮纵向内间距
    * @descEN Vertical padding of button
+   * @deprecated not used
    */
   paddingBlock: CSSProperties['paddingBlock'];
   /**
    * @desc 大号按钮纵向内间距
    * @descEN Vertical padding of large button
+   * @deprecated not used
    */
   paddingBlockLG: CSSProperties['paddingBlock'];
   /**
    * @desc 小号按钮纵向内间距
    * @descEN Vertical padding of small button
+   * @deprecated not used
    */
   paddingBlockSM: CSSProperties['paddingBlock'];
   /**
@@ -209,16 +212,19 @@ export interface ComponentToken {
   /**
    * @desc 按钮内容字体行高
    * @descEN Line height of button content
+   * @deprecated not used
    */
   contentLineHeight: number;
   /**
    * @desc 大号按钮内容字体行高
    * @descEN Line height of large button content
+   * @deprecated not used
    */
   contentLineHeightLG: number;
   /**
    * @desc 小号按钮内容字体行高
    * @descEN Line height of small button content
+   * @deprecated not used
    */
   contentLineHeightSM: number;
   /**

components/button/style/variant.ts

@@ -165,6 +165,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
           [varName('color-base')]: token.colorLink,
           [varName('color-hover')]: token.colorLinkHover,
           [varName('color-active')]: token.colorLinkActive,
+          [varName('bg-color-hover')]: token.linkHoverBg,
         },
 
         // ======================== Compatible ========================
@@ -223,6 +224,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
           [varName('text-color-active')]: token.defaultActiveColor,
           [varName('shadow')]: token.defaultShadow,
 
+          [`&${componentCls}-variant-outlined`]: {
+            [varName('bg-color-disabled')]: token.defaultBgDisabled,
+          },
+
           [`&${componentCls}-variant-solid`]: {
             [varName('text-color')]: token.solidTextColor,
             [varName('text-color-hover')]: varRef('text-color'),
@@ -239,7 +244,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
             [varName('text-color-hover')]: token.defaultHoverColor,
             [varName('text-color-active')]: token.defaultActiveColor,
             [varName('bg-color-container')]: token.defaultBg,
-            [varName('bg-color-hover')]: token.defaultHoverBg,     
+            [varName('bg-color-hover')]: token.defaultHoverBg,
             [varName('bg-color-active')]: token.defaultActiveBg,
           },
 
@@ -303,8 +308,15 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
       {
         // Ghost
         [`&${componentCls}-background-ghost`]: {
-          [varName('bg-color')]: 'transparent',
+          [varName('bg-color')]: token.ghostBg,
+          [varName('bg-color-hover')]: token.ghostBg,
+          [varName('bg-color-active')]: token.ghostBg,
           [varName('shadow')]: 'none',
+
+          [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+            [varName('bg-color-hover')]: token.ghostBg,
+            [varName('bg-color-active')]: token.ghostBg,
+          },
         },
       },
     ],