Skip to content

Commit 3810d1d

Browse files
QDyanbingQDyanbing
authored
fix(button): make tokens take effect (ant-design#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
1 parent ef32250 commit 3810d1d

3 files changed

Lines changed: 234 additions & 43 deletions

File tree

‎components/button/demo/component-token.tsx‎

Lines changed: 214 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,222 @@
11
import React from 'react';
2+
import { SearchOutlined } from '@ant-design/icons';
23
import { Button, ConfigProvider, Flex } from 'antd';
34

45
const App: React.FC = () => (
56
<Flex gap="small" vertical>
7+
<div>Component Token</div>
8+
<ConfigProvider
9+
theme={{
10+
components: {
11+
Button: {
12+
fontWeight: '900',
13+
contentFontSizeSM: 20,
14+
contentFontSize: 30,
15+
contentFontSizeLG: 40,
16+
paddingInlineSM: 20,
17+
paddingInline: 30,
18+
paddingInlineLG: 40,
19+
},
20+
},
21+
}}
22+
>
23+
<Flex gap="small" align="center">
24+
<Button size="small">Small</Button>
25+
<Button>Default</Button>
26+
<Button size="large">Large</Button>
27+
</Flex>
28+
</ConfigProvider>
29+
<ConfigProvider
30+
theme={{
31+
components: {
32+
Button: {
33+
dangerColor: 'green',
34+
dangerShadow: 'yellow',
35+
},
36+
},
37+
}}
38+
>
39+
<Flex gap="small" align="center">
40+
<Button danger>Default</Button>
41+
<Button danger type="primary">
42+
Primary
43+
</Button>
44+
<Button danger type="dashed">
45+
Dashed
46+
</Button>
47+
<Button danger type="text">
48+
Text
49+
</Button>
50+
<Button danger type="link">
51+
Link
52+
</Button>
53+
</Flex>
54+
</ConfigProvider>
55+
<ConfigProvider
56+
theme={{
57+
components: {
58+
Button: {
59+
dashedBgDisabled: 'red',
60+
},
61+
},
62+
}}
63+
>
64+
<Button type="dashed" disabled>
65+
Dashed Disabled
66+
</Button>
67+
</ConfigProvider>
68+
<ConfigProvider
69+
theme={{
70+
components: {
71+
Button: {
72+
defaultColor: 'red',
73+
defaultBg: 'blue',
74+
defaultBorderColor: 'green',
75+
defaultShadow: 'yellow',
76+
defaultBgDisabled: 'pink',
77+
78+
defaultHoverColor: 'brown',
79+
defaultHoverBg: 'orange',
80+
defaultHoverBorderColor: 'purple',
81+
82+
defaultActiveColor: 'fuchsia',
83+
defaultActiveBg: 'aqua',
84+
defaultActiveBorderColor: 'lime',
85+
},
86+
},
87+
}}
88+
>
89+
<Flex gap="small" align="start">
90+
<Button>Default</Button>
91+
<Button type="dashed">Dashed</Button>
92+
<Button type="text">Text</Button>
93+
<Button disabled>Disabled</Button>
94+
</Flex>
95+
</ConfigProvider>
96+
<ConfigProvider
97+
theme={{
98+
components: {
99+
Button: {
100+
ghostBg: 'red',
101+
defaultGhostColor: 'yellow',
102+
defaultGhostBorderColor: 'green',
103+
},
104+
},
105+
}}
106+
>
107+
<Flex gap="small" align="start">
108+
<Button ghost>Default</Button>
109+
<Button ghost type="dashed">
110+
Dashed
111+
</Button>
112+
<Button ghost type="text">
113+
Text
114+
</Button>
115+
<Button ghost type="link">
116+
Link
117+
</Button>
118+
<Button ghost type="primary">
119+
Primary
120+
</Button>
121+
</Flex>
122+
</ConfigProvider>
123+
<ConfigProvider
124+
theme={{
125+
components: {
126+
Button: {
127+
iconGap: 40,
128+
},
129+
},
130+
}}
131+
>
132+
<Button icon={<SearchOutlined />}>icon gap 40</Button>
133+
</ConfigProvider>
134+
<ConfigProvider
135+
theme={{
136+
components: {
137+
Button: {
138+
linkHoverBg: 'red',
139+
},
140+
},
141+
}}
142+
>
143+
<Flex gap="small" align="center">
144+
<Button type="link" href="https://ant.design">
145+
Link
146+
</Button>
147+
<Button disabled type="link" href="https://ant.design">
148+
Link(disabled)
149+
</Button>
150+
</Flex>
151+
</ConfigProvider>
152+
<ConfigProvider
153+
theme={{
154+
components: {
155+
Button: {
156+
onlyIconSizeSM: 20,
157+
onlyIconSize: 30,
158+
onlyIconSizeLG: 40,
159+
},
160+
},
161+
}}
162+
>
163+
<Flex gap="small" align="center">
164+
<Button size="small" icon={<SearchOutlined />} />
165+
<Button icon={<SearchOutlined />} />
166+
<Button size="large" icon={<SearchOutlined />} />
167+
</Flex>
168+
</ConfigProvider>
169+
<ConfigProvider
170+
theme={{
171+
components: {
172+
Button: {
173+
primaryColor: 'red',
174+
primaryShadow: 'yellow',
175+
},
176+
},
177+
}}
178+
>
179+
<Button type="primary">Primary</Button>
180+
</ConfigProvider>
181+
<ConfigProvider
182+
theme={{
183+
components: {
184+
Button: {
185+
solidTextColor: 'red',
186+
},
187+
},
188+
}}
189+
>
190+
<Button variant="solid" color="default">
191+
Solid
192+
</Button>
193+
</ConfigProvider>
194+
<ConfigProvider
195+
theme={{
196+
components: {
197+
Button: {
198+
textTextColor: 'red',
199+
textHoverBg: 'yellow',
200+
textTextHoverColor: 'blue',
201+
textTextActiveColor: 'green',
202+
},
203+
},
204+
}}
205+
>
206+
<Flex gap="small" align="start">
207+
<Button type="text">Text</Button>
208+
<Button variant="text" color="default">
209+
Default Text
210+
</Button>
211+
<Button variant="text" color="primary">
212+
Primary Text
213+
</Button>
214+
<Button variant="text" color="danger">
215+
Danger Text
216+
</Button>
217+
</Flex>
218+
</ConfigProvider>
219+
<div>Global Token</div>
6220
<ConfigProvider
7221
theme={{
8222
components: {
@@ -85,47 +299,6 @@ const App: React.FC = () => (
85299
</Button>
86300
</Flex>
87301
</ConfigProvider>
88-
<ConfigProvider
89-
theme={{
90-
components: { Button: { paddingInline: 100, paddingInlineLG: 150, paddingInlineSM: 50 } },
91-
}}
92-
>
93-
<Flex gap="small" vertical align="start">
94-
<Button>Default Button</Button>
95-
<Button shape="round">Default Button</Button>
96-
<Button size="large">Default Button</Button>
97-
<Button shape="round" size="large">
98-
Default Button
99-
</Button>
100-
<Button size="small">Default Button</Button>
101-
<Button shape="round" size="small">
102-
Default Button
103-
</Button>
104-
</Flex>
105-
</ConfigProvider>
106-
<ConfigProvider
107-
theme={{
108-
components: {
109-
Button: {
110-
defaultBg: 'red',
111-
defaultColor: 'blue',
112-
defaultHoverColor: 'green',
113-
defaultActiveColor: 'yellow',
114-
115-
textTextColor: 'purple',
116-
textTextHoverColor: 'orange',
117-
textTextActiveColor: 'pink',
118-
textHoverBg: 'brown',
119-
},
120-
},
121-
}}
122-
>
123-
<Flex gap="small" align="start">
124-
<Button>Default Button</Button>
125-
<Button type="dashed">Dashed Button</Button>
126-
<Button type="text">Text Button</Button>
127-
</Flex>
128-
</ConfigProvider>
129302
</Flex>
130303
);
131304

‎components/button/style/token.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,16 +154,19 @@ export interface ComponentToken {
154154
/**
155155
* @desc 按钮纵向内间距
156156
* @descEN Vertical padding of button
157+
* @deprecated not used
157158
*/
158159
paddingBlock: CSSProperties['paddingBlock'];
159160
/**
160161
* @desc 大号按钮纵向内间距
161162
* @descEN Vertical padding of large button
163+
* @deprecated not used
162164
*/
163165
paddingBlockLG: CSSProperties['paddingBlock'];
164166
/**
165167
* @desc 小号按钮纵向内间距
166168
* @descEN Vertical padding of small button
169+
* @deprecated not used
167170
*/
168171
paddingBlockSM: CSSProperties['paddingBlock'];
169172
/**
@@ -209,16 +212,19 @@ export interface ComponentToken {
209212
/**
210213
* @desc 按钮内容字体行高
211214
* @descEN Line height of button content
215+
* @deprecated not used
212216
*/
213217
contentLineHeight: number;
214218
/**
215219
* @desc 大号按钮内容字体行高
216220
* @descEN Line height of large button content
221+
* @deprecated not used
217222
*/
218223
contentLineHeightLG: number;
219224
/**
220225
* @desc 小号按钮内容字体行高
221226
* @descEN Line height of small button content
227+
* @deprecated not used
222228
*/
223229
contentLineHeightSM: number;
224230
/**

‎components/button/style/variant.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
165165
[varName('color-base')]: token.colorLink,
166166
[varName('color-hover')]: token.colorLinkHover,
167167
[varName('color-active')]: token.colorLinkActive,
168+
[varName('bg-color-hover')]: token.linkHoverBg,
168169
},
169170

170171
// ======================== Compatible ========================
@@ -223,6 +224,10 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
223224
[varName('text-color-active')]: token.defaultActiveColor,
224225
[varName('shadow')]: token.defaultShadow,
225226

227+
[`&${componentCls}-variant-outlined`]: {
228+
[varName('bg-color-disabled')]: token.defaultBgDisabled,
229+
},
230+
226231
[`&${componentCls}-variant-solid`]: {
227232
[varName('text-color')]: token.solidTextColor,
228233
[varName('text-color-hover')]: varRef('text-color'),
@@ -239,7 +244,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
239244
[varName('text-color-hover')]: token.defaultHoverColor,
240245
[varName('text-color-active')]: token.defaultActiveColor,
241246
[varName('bg-color-container')]: token.defaultBg,
242-
[varName('bg-color-hover')]: token.defaultHoverBg,
247+
[varName('bg-color-hover')]: token.defaultHoverBg,
243248
[varName('bg-color-active')]: token.defaultActiveBg,
244249
},
245250

@@ -303,8 +308,15 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
303308
{
304309
// Ghost
305310
[`&${componentCls}-background-ghost`]: {
306-
[varName('bg-color')]: 'transparent',
311+
[varName('bg-color')]: token.ghostBg,
312+
[varName('bg-color-hover')]: token.ghostBg,
313+
[varName('bg-color-active')]: token.ghostBg,
307314
[varName('shadow')]: 'none',
315+
316+
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
317+
[varName('bg-color-hover')]: token.ghostBg,
318+
[varName('bg-color-active')]: token.ghostBg,
319+
},
308320
},
309321
},
310322
],

0 commit comments

Comments
 (0)