source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(Button): text variant tokens not working (#56291)

Browse Source 
* fix(Button): text variant tokens not working

* test(Button): add debug demo for text variant component tokens

* test: update button debug color variant snapshots

* fix: getCssVar to varName

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
高艳兵
2026-01-23 09:49:48 +08:00
committed by GitHub
parent b5b735a490
commit 6f90801861
4 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -968,6 +968,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
</span>
</button>
</div>
<div
class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
type="button"
>
<span>
type="text" (Default)
</span>
</button>
</div>
</div>
`;

12
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@@ -952,6 +952,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
</span>
</button>
</div>
<div
class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
type="button"
>
<span>
type="text" (Default)
</span>
</button>
</div>
</div>
`;

16
components/button/demo/debug-color-variant.tsx
View File

@@ -114,6 +114,22 @@ const App: React.FC = () => {
<Button type="dashed">Dashed</Button>
</ConfigProvider>
</Flex>
<Flex gap="small" wrap>
<ConfigProvider
theme={{
components: {
Button: {
textTextColor: '#f60',
textTextHoverColor: '#722ed1',
textTextActiveColor: '#0f0',
textHoverBg: '#000',
},
},
}}
>
<Button type="text">type="text" (Default)</Button>
</ConfigProvider>
</Flex>
</Flex>
);
};

7
components/button/style/variant.ts
View File

@@ -239,6 +239,13 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
[varName('bg-color-active')]: token.defaultActiveBg,
},
[`&${componentCls}-variant-text`]: {
[varName('text-color')]: token.textTextColor,
[varName('text-color-hover')]: token.textTextHoverColor,
[varName('text-color-active')]: token.textTextActiveColor,
[varName('bg-color-hover')]: token.textHoverBg,
},
[`&${componentCls}-background-ghost`]: {
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('text-color')]: token.defaultGhostColor,