feat: Customize background colors of default & dashed buttons in disabled state by yellowryan · Pull Request #52839 · ant-design/ant-design

yellowryan · 2025-02-15T16:28:29Z

🤔 This is a ...

🔗 Related Issues

related to #52758

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	Added Custom default and dashed type button background color in disabled state
🇨🇳 Chinese	新增自定义普通、虚线类型的按钮在禁用状态下的背景颜色

bolt-new-by-stackblitz · 2025-02-15T16:28:32Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2025-02-15T16:28:39Z

👁 Visual Regression Report for PR #52839 Failed ❌

🎯 Target branch: next (2eebc43)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🆕 3 added

Expected (Branch next)	Actual (Current PR)	Diff
	button-custom-disabled-bg.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	button-custom-disabled-bg.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	button-custom-disabled-bg.default.png	🆕🆕🆕 Added 🆕🆕🆕

Important

There are 3 diffs found in this PR: 🆕 3 added.
Please check all items:

Visual diff is acceptable

github-actions · 2025-02-15T16:28:40Z

petercat-assistant · 2025-02-15T16:28:43Z

Walkthrough

This pull request introduces a new feature that allows customization of the default button's background color when it is in a disabled state. This enhancement is related to issue #52758.

Changes

Files Changed	Summary
components/button/tests/index.test.tsx	Added a test case to verify the customization of the default button's background color in a disabled state.
components/button/style/index.ts	Updated styles to support the new background color customization for disabled default buttons.
components/button/style/token.ts	Introduced a new token `colorBgDefaultDisabled` to manage the background color for disabled default buttons.

components/button/style/index.ts

pkg-pr-new · 2025-02-15T16:31:55Z

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52839

commit: a63eb0a

codecov · 2025-02-15T16:31:59Z

Bundle Report

Changes will increase total bundle size by 7.78MB (199.82%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name	Size	Change
antd.min-array-push	11.68MB	7.78MB (199.82%) ⬆️⚠️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.js` (New)	6.14MB	6.14MB	100.0% 🚀
`antd.js` (New)	5.54MB	5.54MB	100.0% 🚀
~~`antd-with-locales.min.js`~~ (Deleted)	-2.14MB	0 bytes	-100.0% 🗑️
~~`antd.min.js`~~ (Deleted)	-1.76MB	0 bytes	-100.0% 🗑️

Files in antd-with-locales.js:

./components/button/style/token.ts → Total Size: 4.12kB

Files in antd.js:

./components/button/style/token.ts → Total Size: 4.12kB

codecov · 2025-02-15T16:44:49Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (2eebc43) to head (a63eb0a).
Report is 1 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #52839   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          773       773           
  Lines        13919     13921    +2     
  Branches      3650      3650           
=========================================
+ Hits         13919     13921    +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

yoyo837 · 2025-02-22T17:04:34Z

Mabye master branch

yellowryan · 2025-02-23T05:37:39Z

Mabye master branch

我合并到master分支了，麻烦看下改动是否合理哈~

yoyo837 · 2025-02-23T05:42:09Z

demo需要加一下这种场景，方便生成img diff

yellowryan · 2025-02-23T08:49:46Z

demo需要加一下这种场景，方便生成img diff

好的，我增加一个demo

yellowryan · 2025-02-27T04:23:29Z

demo需要加一下这种场景，方便生成img diff

好的，我增加一个demo

@yoyo837 帮忙看下这个pr看看能否合了呢多谢～

yoyo837 · 2025-02-27T06:13:59Z

抱歉，Owner建议feature，幸苦再切回来吧

yellowryan · 2025-03-01T05:50:30Z

抱歉，Owner建议feature，幸苦再切回来吧

ok

github-actions · 2025-03-01T05:52:36Z

Hi @yellowryan. Thanks for your contribution. The path .github/ or scripts/ and CHANGELOG is only maintained by team members. This current PR will be closed and team members will help on this.

accesslint

There are accessibility issues in these changes.

components/auto-complete/demo/AutoComplete-and-Select.tsx

components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap

yellowryan · 2025-03-01T05:54:28Z

Hi @yellowryan. Thanks for your contribution. The path .github/ or scripts/ and CHANGELOG is only maintained by team members. This current PR will be closed and team members will help on this.

@yoyo837 自动帮我close了，后续应该没啥问题了吧

yoyo837 · 2025-03-01T06:54:51Z

混入了其他commit

yellowryan · 2025-03-05T11:10:43Z

这个visual diff前6张，我看到feature分支的表现和current pr的表现是一样的也

components/button/style/token.ts

thinkasany · 2025-03-10T06:28:05Z

对应的 PR title / changelog 可以优化一下风格，主要就是参考历史的提交，对将来发版的大佬写 changelog 的时候会有一定帮助，未来复盘或者查看 PR 的时候也更清晰。

PR title 其实也许加一个 feat：就够了。
changelog 可能需要再润色一下

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

…ns in disabled state

…s in disabled state

yellowryan · 2025-03-13T05:36:12Z

可以合了终于

MadCcc

LGTM

docs: update comments Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: Ryan <55972954+yellowryan@users.noreply.github.com>

petercat-assistant bot reviewed Feb 15, 2025

View reviewed changes

components/button/style/index.ts Outdated Show resolved Hide resolved

yellowryan changed the title ~~Custom default button background color in disabled state~~ Custom default and dashed button background color in disabled state Feb 18, 2025

yellowryan changed the base branch from feature to master February 23, 2025 05:07

yellowryan force-pushed the custom-default-btn-disabled-bgcolor branch from eca9cac to be601b8 Compare February 23, 2025 05:21

yoyo837 linked an issue Feb 23, 2025 that may be closed by this pull request

普通按钮的禁用样式不应该与主要按钮一样 #52758

Open

yellowryan changed the base branch from master to feature March 1, 2025 05:51

github-actions bot assigned afc163, MadCcc, xrkffgg and zombieJ Mar 1, 2025

github-actions bot closed this Mar 1, 2025

accesslint bot reviewed Mar 1, 2025

View reviewed changes

yoyo837 reopened this Mar 1, 2025

yellowryan dismissed yoyo837’s stale review via 30ff634 March 4, 2025 12:54

thinkasany reviewed Mar 10, 2025

View reviewed changes

components/button/style/token.ts Outdated Show resolved Hide resolved

yellowryan changed the base branch from feature to next March 10, 2025 06:25

yellowryan changed the title ~~Custom default and dashed button background color in disabled state~~ Feat: Custom default and dashed button background color in disabled state Mar 10, 2025

yellowryan force-pushed the custom-default-btn-disabled-bgcolor branch from 4c40976 to 8252f14 Compare March 12, 2025 06:01

thinkasany changed the title ~~Feat: Custom default and dashed button background color in disabled state~~ feat: Customize background colors of default & dashed buttons in disabled state Mar 12, 2025

thinkasany reviewed Mar 12, 2025

View reviewed changes

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap Outdated Show resolved Hide resolved

yellowryan added 10 commits March 13, 2025 11:44

feat: Supports customizing the background color of default type butto…

32030da

…ns in disabled state

test: add corresponding test case

8653f59

feat: Supports customizing the background color of dashed type button…

22c4487

…s in disabled state

test: add corresponding test case

f51197c

chore: add custom disabled backgroundColor demo

6ea7024

chore: add snapshot

3f6d5ef

chore: add whitespace

3dbb324

chore: Modify the variable name of the button token

912031a

test: update test

5211a77

chore: update snapshot

5859960

yellowryan force-pushed the custom-default-btn-disabled-bgcolor branch from 26110fb to 5859960 Compare March 13, 2025 04:45

chore: update snapshot

1ca6300

li-jia-nan previously approved these changes Mar 13, 2025

View reviewed changes

MadCcc previously approved these changes Mar 13, 2025

View reviewed changes

Update components/button/style/token.ts

a63eb0a

docs: update comments Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: Ryan <55972954+yellowryan@users.noreply.github.com>

yellowryan dismissed stale reviews from MadCcc and li-jia-nan via a63eb0a March 13, 2025 06:55

thinkasany approved these changes Mar 13, 2025

View reviewed changes

thinkasany merged commit ec3b479 into ant-design:next Mar 13, 2025
37 of 38 checks passed

yellowryan deleted the custom-default-btn-disabled-bgcolor branch March 13, 2025 07:35

Uh oh!

Conversation

yellowryan commented Feb 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Feb 15, 2025

Uh oh!

github-actions bot commented Feb 15, 2025 • edited by thinkasany Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #52839 Failed ❌

Uh oh!

github-actions bot commented Feb 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

petercat-assistant bot commented Feb 15, 2025

Walkthrough

Changes

Uh oh!

Uh oh!

pkg-pr-new bot commented Feb 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov bot commented Feb 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

yoyo837 commented Feb 22, 2025

Uh oh!

yellowryan commented Feb 23, 2025

Uh oh!

yoyo837 commented Feb 23, 2025

Uh oh!

yellowryan commented Feb 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yellowryan commented Feb 27, 2025

Uh oh!

yoyo837 commented Feb 27, 2025

Uh oh!

yellowryan commented Mar 1, 2025

Uh oh!

github-actions bot commented Mar 1, 2025

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yellowryan commented Mar 1, 2025

Uh oh!

yoyo837 commented Mar 1, 2025

Uh oh!

yellowryan commented Mar 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

thinkasany commented Mar 10, 2025

Uh oh!

Uh oh!

yellowryan commented Mar 13, 2025

Uh oh!

MadCcc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yellowryan commented Feb 15, 2025 •

edited

Loading

github-actions bot commented Feb 15, 2025 •

edited by thinkasany

Loading

github-actions bot commented Feb 15, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 15, 2025 •

edited

Loading

codecov bot commented Feb 15, 2025 •

edited

Loading

codecov bot commented Feb 15, 2025 •

edited

Loading

yellowryan commented Feb 23, 2025 •

edited

Loading

yellowryan commented Mar 5, 2025 •

edited

Loading