feat(Button): support variant and color #50051

coding-ice · 2024-07-24T13:47:13Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Use a developer-oriented tone and narrative style.
Describe the user's first-hand experience of the issue and its impact on developers, rather than your solution approach.
Refer to: https://ant.design/changelog

Language	Changelog
🇺🇸 English	support variant and color
🇨🇳 Chinese	支持变体和颜色

stackblitz · 2024-07-24T13:47:17Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-07-24T13:47:25Z

👁 Visual Regression Report for PR #50051 Failed ❌

🎯 Target branch: feature (eac5b68)
📖 View Full Report ↗︎

Expected (Branch feature)	Actual (Current PR)	Diff
	button-color-variant.compact.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	button-color-variant.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	button-color-variant.dark.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	button-color-variant.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	button-color-variant.default.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	button-color-variant.default.png	🆕🆕🆕 Added 🆕🆕🆕

Check Full Report for details

If you think the visual diff is acceptable, please check:

Visual diff is acceptable

github-actions · 2024-07-24T13:47:27Z

pkg-pr-new · 2024-07-24T13:52:56Z

Open in Stackblitz

More templates

bun add https://pkg.pr.new/ant-design/ant-design/antd@50051

commit: 45f485e

afc163 · 2024-07-24T14:02:26Z

演示里需要加个四个属性互相组合使用的枚举表格。

coding-ice · 2024-07-25T08:45:30Z

佬，更新了下demo，枚举表格指得是哪个

components/button/demo/color-variant.tsx

li-jia-nan · 2024-07-26T03:45:53Z

马上月底了，这个能赶上下个 minor 吗 😄

coding-ice · 2024-07-26T03:48:54Z

家人们，上面的几个问题，麻烦要指点下，我周末有空的～

afc163 · 2024-07-26T14:52:00Z

type 和 danger 是语义，variant 是样式，我感觉是两个东西。

type 和 danger 最后都会对应用一种 variant 来表达。

coding-ice · 2024-07-26T15:02:40Z

type 和 danger 是语义，variant 是样式，我感觉是两个东西。

type 和 danger 最后都会对应用一种 variant 来表达。

这个的意思，应该是要废弃掉type和danger 吗。因为我看RFC中说，从API使用的角度来看（比如：原来type的一个属性就能决定primary，现在要用color/variant的组合才能实现）

afc163 · 2024-07-26T23:36:06Z

我倾向是不废弃。

components/_util/__tests__/wave.test.tsx

components/button/style/index.ts

components/button/button.tsx

components/button/style/token.ts

components/segmented/index.en-US.md

components/segmented/index.zh-CN.md

components/theme/interface/maps/colors.ts

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

MadCcc

LGTM

socket-security · 2024-09-03T06:59:34Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@ant-design/[email protected]	None	`0`	34.4 kB	zombiej
npm/@ant-design/[email protected]	environment	`0`	389 kB	zombiej
npm/@ant-design/[email protected]	environment	`0`	90.8 kB	yumoimer
npm/@ant-design/[email protected]	environment	`0`	285 kB	madccc
npm/@ant-design/[email protected]	None	`0`	30.9 kB	zombiej
npm/@ant-design/[email protected]	environment	`0`	8.74 MB	afc163
npm/@ant-design/[email protected]	environment	`0`	832 kB	afc163
npm/@ant-design/[email protected]	filesystem	`+1`	74.6 kB	madccc
npm/@antv/[email protected]	None	`0`	7.99 MB	iaaron
npm/@babel/[email protected]	None	`0`	32.9 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	`0`	248 kB	nicolo-ribaudo
npm/@biomejs/[email protected]	shell	`0`	152 kB	dominionl
npm/@codecov/[email protected]	None	`0`	46 kB	codecov-devops
npm/@codesandbox/[email protected]	eval, network	`0`	1.19 MB	danilowoz
npm/@dnd-kit/[email protected]	environment	`0`	1.05 MB	clauderic
npm/@dnd-kit/[email protected]	environment	`0`	48.1 kB	clauderic
npm/@dnd-kit/[email protected]	environment	`0`	233 kB	clauderic
npm/@dnd-kit/[email protected]	environment	`0`	88.5 kB	clauderic
npm/@emotion/[email protected]	None	`0`	273 kB	emotion-release-bot
npm/@emotion/[email protected]	None	`0`	824 kB	emotion-release-bot
npm/@emotion/[email protected]	environment	`0`	48.7 kB	emotion-release-bot
npm/@ianvs/[email protected]	environment, unsafe	`0`	110 kB	ianvs
npm/@inquirer/[email protected]	None	`0`	21.4 kB	sboudrias
npm/@madccc/[email protected]	None	`0`	19 kB	madccc
npm/@microflash/[email protected]	None	`0`	6.79 kB	naiyer
npm/@npmcli/[email protected]	environment	`0`	18.3 kB	npm-cli-ops
npm/@octokit/[email protected]	None	`0`	8.28 kB	gr2m, kfcampbell, nickfloyd, ...1 more
npm/@qixian.cs/[email protected]	network	`0`	19.6 kB	chenshuai2144
npm/@rc-component/[email protected]	environment	`0`	83.1 kB	afc163
npm/@rc-component/[email protected]	environment	`0`	16.7 kB	zombiej
npm/@rc-component/[email protected]	None	`0`	146 kB	zombiej
npm/@rc-component/[email protected]	None	`0`	68.3 kB	afc163
npm/@rc-component/[email protected]	environment	`0`	180 kB	zombiej
npm/@size-limit/[email protected]	None	`0`	3.43 kB	ai
npm/@stackblitz/[email protected]	None	`0`	186 kB	tsulkowski
npm/@testing-library/[email protected]	environment	`0`	2.43 MB	testing-library-bot
npm/@testing-library/[email protected]	None	`0`	268 kB	testing-library-bot
npm/@testing-library/[email protected]	environment	`0`	329 kB	testing-library-bot
npm/@testing-library/[email protected]	None	`0`	435 kB	testing-library-bot
npm/@types/[email protected]	None	`0`	24.7 kB	types
npm/@types/[email protected]	None	`0`	42.2 kB	types
npm/@types/[email protected]	None	`0`	13.1 kB	types
npm/@types/[email protected]	None	`0`	36.8 kB	types
npm/@types/[email protected]	None	`0`	9.1 kB	types
npm/@types/[email protected]	None	`0`	4.58 kB	types
npm/@types/[email protected]	None	`0`	2.77 kB	types
npm/@types/[email protected]	None	`0`	6.62 kB	types
npm/@types/[email protected]	None	`0`	6.09 kB	types
npm/@types/[email protected]	None	`0`	9.68 kB	types
npm/@types/[email protected]	None	`0`	78.7 kB	types
npm/@types/[email protected]	None	`0`	1.12 MB	types
npm/@types/[email protected]	None	`0`	21.9 kB	types
npm/@types/[email protected]	None	`0`	2.2 MB	types
npm/@types/[email protected]	None	`0`	4.83 kB	types
npm/@types/[email protected]	None	`0`	7.87 kB	types
npm/@types/[email protected]	None	`0`	5.47 kB	types
npm/@types/[email protected]	None	`0`	19.2 kB	types
npm/@types/[email protected]	None	`0`	6.51 kB	types
npm/@types/[email protected]	None	`0`	4.36 kB	types
npm/@types/[email protected]	None	`0`	37.8 kB	types
npm/@types/[email protected]	None	`0`	5.75 kB	types
npm/@types/[email protected]	None	`0`	7.36 kB	types
npm/@types/[email protected]	None	`0`	438 kB	types
npm/@types/[email protected]	None	`0`	8.22 kB	types
npm/@types/[email protected]	None	`0`	30.8 kB	types
npm/@types/[email protected]	None	`0`	6.48 kB	types
npm/@typescript-eslint/[email protected]	None	`0`	2.62 MB	jameshenry
npm/@typescript-eslint/[email protected]	None	`0`	18.9 kB	bradzacher, jameshenry
npm/[email protected]	filesystem	`0`	2.73 MB	fengmk2
npm/[email protected]	None	`0`	47.2 kB	nanxiaobei
npm/[email protected]	environment	`0`	188 kB	arvinxx
npm/[email protected]	None	`0`	1.22 MB	madccc
npm/[email protected]	network	`0`	2.14 MB	jasonsaayman
npm/[email protected]	None	`+1`	42.1 kB	sindresorhus
npm/[email protected]	None	`0`	1.25 MB	feedic
npm/[email protected]	None	`0`	10.5 kB	theron
npm/[email protected]	None	`0`	62.2 kB	andidittrich
npm/[email protected]	None	`0`	15.1 kB	sudodoki
npm/[email protected]	environment	`0`	29.1 kB	kentcdodds
npm/[email protected]	network	`0`	88.1 kB	lquixada
npm/[email protected]	filesystem	`+1`	12.9 kB	benjycui
npm/[email protected]	None	`0`	38.7 kB	wxh16144
npm/[email protected]	environment, eval, filesystem	`0`	2.95 MB	yifankakaxi
npm/[email protected]	None	`0`	81.7 kB	ljharb
npm/[email protected]	None	`0`	20.8 kB	lydell
npm/[email protected]	None	`0`	46.8 kB	jounqin
npm/[email protected]	filesystem	`+4`	2.34 MB	amilajack
npm/[email protected]	filesystem, unsafe Transitive: environment	`+1`	1.26 MB	ljharb
npm/[email protected]	filesystem	`0`	349 kB	aaronabramov, jeysal, jsonp, ...6 more
npm/[email protected]	None	`+1`	854 kB	ljharb
npm/[email protected]	filesystem	`0`	320 kB	idok
npm/[email protected]	None	`0`	31.3 kB	eslintbot
npm/[email protected]	filesystem	`+1`	935 kB	ljharb
npm/[email protected]	environment, filesystem	`+5`	3.68 MB	eslintbot
npm/[email protected]	environment	`0`	192 kB	zombiej
npm/[email protected]	None	`0`	20.5 kB	zombiej
npm/[email protected]	None	`0`	52.6 kB	zombiej
npm/[email protected]	environment	`0`	77.7 kB	zombiej
npm/[email protected]	environment	`0`	59.6 kB	zombiej
npm/[email protected]	None	`0`	42.8 kB	zombiej
npm/[email protected]	environment	`0`	291 kB	zombiej
npm/[email protected]	environment	`0`	157 kB	zombiej
npm/[email protected]	environment	`0`	81.2 kB	madccc
npm/[email protected]	None	`0`	73.4 kB	afc163
npm/[email protected]	None	`0`	77.3 kB	afc163, madccc, zombiej
npm/[email protected]	environment	`0`	256 kB	afc163
npm/[email protected]	None	`0`	106 kB	zombiej
npm/[email protected]	environment	`0`	88.3 kB	afc163
npm/[email protected]	environment	`0`	174 kB	afc163
npm/[email protected]	None	`0`	899 kB	afc163
npm/[email protected]	environment	`0`	52.3 kB	afc163
npm/[email protected]	None	`0`	40.6 kB	madccc
npm/[email protected]	environment	`0`	36.5 kB	zombiej
npm/[email protected]	environment	`0`	39.7 kB	afc163
npm/[email protected]	environment	`0`	341 kB	zombiej
npm/[email protected]	environment	`0`	171 kB	afc163
npm/[email protected]	None	`0`	48.3 kB	zombiej
npm/[email protected]	None	`0`	20.5 kB	afc163
npm/[email protected]	None	`0`	400 kB	afc163, benjycui, dxq613, ...6 more
npm/[email protected]	environment	`0`	166 kB	zombiej
npm/[email protected]	environment	`0`	62.8 kB	madccc
npm/[email protected]	None	`0`	52.3 kB	zombiej
npm/[email protected]	None	`0`	162 kB	afc163, madccc, valleykid, ...4 more
npm/[email protected]	environment	`0`	372 kB	zombiej
npm/[email protected]	None	`0`	79.6 kB	zombiej
npm/[email protected]	environment	`+1`	265 kB	zombiej
npm/[email protected]	environment	`0`	4.51 MB	react-bot
npm/[email protected]	environment	`0`	318 kB	react-bot
npm/[email protected]	None	`0`	44.8 kB	stipsan

🚮 Removed packages: npm/[email protected]), npm/[email protected]), npm/[email protected]), npm/[email protected]), npm/[email protected]), npm/[email protected]), npm/[email protected])

View full report↗︎

* feat(button): variant & color types * feat: type -> color/variant * feat: type -> color/variant * feat: add variant filled * test: snap * refactor(button): rename type -> variant * docs: add demo * feat: add danger ghost style * refactor: remove deprecated * refactor: eslint * docs: change color&variant * test: updated snap * docs: color-variant * docs: add debug color&variant * feat: global token * refactor: remove comment * docs: add color&variant docs * docs: remove default * docs: add space * docs: code * test: update snap * test: fix snap * test: btn querySelect * feat: change filled hoverStyle * test: fix * feat: support grey wave * refactor: enhance * docs: color/variant -> v 5.21 * test: snap * feat: add token * test: to do * test: fix test * ci: rebuild * style: remove * style: space * docs: add note & FQA * feat: add componentsToken * refactor: remove isNotGrey * test: add case * docs: tile button * test: snap * docs: site & snap * Update components/button/index.en-US.md Co-authored-by: lijianan <[email protected]> Signed-off-by: ice <[email protected]> * fix: token color & undef * docs: site * docs: responsive * docs: enhance FAQ * docs: gap middle * test: snap * Update components/theme/interface/maps/colors.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/theme/interface/maps/colors.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/theme/interface/maps/colors.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/button/style/token.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/button/style/token.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * refactor: rename * docs: prettier * chore: eslint * refactor: cls * test: add solidTextColor case * refactor: genVariantButtonStyle * refactor: genVariantButtonStyle * refactor: genVariantButtonStyle * fix: rename * docs: text * fix: remove border * feat: add token colorErrorBgFilledHover * chore: add size-limit * refactor: rename --------- Signed-off-by: ice <[email protected]> Co-authored-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]>

coding-ice added 9 commits July 17, 2024 16:39

feat(button): variant & color types

6aa33ed

feat: type -> color/variant

2589cfd

feat: type -> color/variant

75b43a5

feat: add variant filled

eb17c1a

test: snap

cac2c40

refactor(button): rename type -> variant

6c86a03

docs: add demo

16f7588

feat: add danger ghost style

0c1489d

refactor: remove deprecated

645a379

Merge branch 'feature' into feat/variant

2ccdbb9

refactor: eslint

6f414c3

coding-ice added 2 commits July 24, 2024 23:01

docs: change color&variant

c513b57

test: updated snap

7720a3f

coding-ice marked this pull request as draft July 24, 2024 15:35

docs: color-variant

eb29a61

zombieJ reviewed Jul 25, 2024

View reviewed changes

components/button/demo/color-variant.tsx Outdated Show resolved Hide resolved

docs: add debug color&variant

db52e47

coding-ice added 2 commits July 26, 2024 22:47

feat: global token

093ad83

refactor: remove comment

9196ea8

MadCcc reviewed Sep 2, 2024

View reviewed changes

coding-ice and others added 18 commits September 2, 2024 10:53

Update components/theme/interface/maps/colors.ts

2c03f28

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

Update components/theme/interface/maps/colors.ts

cdf69a4

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

Update components/theme/interface/maps/colors.ts

abbc88a

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

Update components/button/style/token.ts

8c9f905

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

Update components/button/style/token.ts

668a6d7

Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]>

refactor: rename

ae8de5b

docs: prettier

568c2e5

chore: eslint

5b001c5

refactor: cls

792631d

test: add solidTextColor case

907fddb

refactor: genVariantButtonStyle

f2bebca

refactor: genVariantButtonStyle

59e37f8

refactor: genVariantButtonStyle

bd50dbc

fix: rename

d16ee79

docs: text

5e14e26

fix: remove border

96b9432

feat: add token colorErrorBgFilledHover

aaa8199

Merge branch 'feature' into feat/variant

ad0f187

MadCcc previously approved these changes Sep 3, 2024

View reviewed changes

chore: add size-limit

d9724e2

coding-ice dismissed MadCcc’s stale review via d9724e2 September 3, 2024 02:26

MadCcc previously approved these changes Sep 3, 2024

View reviewed changes

refactor: rename

45f485e

coding-ice dismissed MadCcc’s stale review via 45f485e September 3, 2024 06:59

MadCcc approved these changes Sep 3, 2024

View reviewed changes

MadCcc merged commit badfbe3 into ant-design:feature Sep 3, 2024
38 checks passed

afc163 mentioned this pull request Sep 22, 2024

docs(🔥): release 5.21.0 with Splitter component and variant buttons #50948

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Button): support variant and color #50051

feat(Button): support variant and color #50051

coding-ice commented Jul 24, 2024 •

edited

Loading

stackblitz bot commented Jul 24, 2024

github-actions bot commented Jul 24, 2024 •

edited by MadCcc

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

pkg-pr-new bot commented Jul 24, 2024 •

edited

Loading

afc163 commented Jul 24, 2024

coding-ice commented Jul 25, 2024

li-jia-nan commented Jul 26, 2024

coding-ice commented Jul 26, 2024

afc163 commented Jul 26, 2024

coding-ice commented Jul 26, 2024

afc163 commented Jul 26, 2024

MadCcc left a comment

socket-security bot commented Sep 3, 2024

feat(Button): support variant and color #50051

feat(Button): support variant and color #50051

Conversation

coding-ice commented Jul 24, 2024 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

stackblitz bot commented Jul 24, 2024

github-actions bot commented Jul 24, 2024 • edited by MadCcc Loading

👁 Visual Regression Report for PR #50051 Failed ❌

github-actions bot commented Jul 24, 2024 • edited Loading

pkg-pr-new bot commented Jul 24, 2024 • edited Loading

afc163 commented Jul 24, 2024

coding-ice commented Jul 25, 2024

li-jia-nan commented Jul 26, 2024

coding-ice commented Jul 26, 2024

afc163 commented Jul 26, 2024

coding-ice commented Jul 26, 2024

afc163 commented Jul 26, 2024

MadCcc left a comment

Choose a reason for hiding this comment

socket-security bot commented Sep 3, 2024

coding-ice commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited by MadCcc

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

pkg-pr-new bot commented Jul 24, 2024 •

edited

Loading