Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Button): support variant and color #50051

Merged
merged 83 commits into from
Sep 3, 2024
Merged

feat(Button): support variant and color #50051

merged 83 commits into from
Sep 3, 2024

Conversation

coding-ice
Copy link
Member

@coding-ice coding-ice commented Jul 24, 2024 •
edited
Loading

中文版模板 / Chinese template

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

#49700

💡 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 StackBlitz
Copy link

stackblitz bot commented Jul 24, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions GitHub Actions
Copy link
Contributor

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

👁 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 button-color-variant.compact.css-var.png 🆕🆕🆕 Added 🆕🆕🆕
button-color-variant.compact.png button-color-variant.compact.png 🆕🆕🆕 Added 🆕🆕🆕
button-color-variant.dark.css-var.png button-color-variant.dark.css-var.png 🆕🆕🆕 Added 🆕🆕🆕
button-color-variant.dark.png button-color-variant.dark.png 🆕🆕🆕 Added 🆕🆕🆕
button-color-variant.default.css-var.png button-color-variant.default.css-var.png 🆕🆕🆕 Added 🆕🆕🆕
button-color-variant.default.png 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 GitHub Actions
Copy link
Contributor

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

Preview is ready

@pkg-pr-new pkg.pr.new
Copy link

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

Open in Stackblitz

More templates

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

commit: 45f485e

@afc163
Copy link
Member

afc163 commented Jul 24, 2024

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

@coding-ice coding-ice marked this pull request as draft July 24, 2024 15:35
@coding-ice
Copy link
Member Author

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

@li-jia-nan
Copy link
Member

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

@coding-ice
Copy link
Member Author

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

@afc163
Copy link
Member

afc163 commented Jul 26, 2024

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

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

@coding-ice
Copy link
Member Author

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

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

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

@afc163
Copy link
Member

afc163 commented Jul 26, 2024

我倾向是不废弃。

MadCcc
MadCcc reviewed Sep 2, 2024
View reviewed changes
components/_util/__tests__/wave.test.tsx Show resolved Hide resolved
components/button/style/index.ts Show resolved Hide resolved
components/button/button.tsx Outdated Show resolved Hide resolved
components/button/style/token.ts Outdated Show resolved Hide resolved
components/button/style/token.ts Outdated Show resolved Hide resolved
components/segmented/index.en-US.md Outdated Show resolved Hide resolved
components/segmented/index.zh-CN.md Outdated Show resolved Hide resolved
components/theme/interface/maps/colors.ts Outdated Show resolved Hide resolved
components/theme/interface/maps/colors.ts Outdated Show resolved Hide resolved
components/theme/interface/maps/colors.ts Outdated Show resolved Hide resolved
coding-ice and others added 18 commits September 2, 2024 10:53
@coding-ice @MadCcc
Update components/theme/interface/maps/colors.ts
2c03f28 
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
@coding-ice @MadCcc
Update components/theme/interface/maps/colors.ts
cdf69a4 
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
@coding-ice @MadCcc
Update components/theme/interface/maps/colors.ts
abbc88a 
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
@coding-ice @MadCcc
Update components/button/style/token.ts
8c9f905 
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
@coding-ice @MadCcc
Update components/button/style/token.ts
668a6d7 
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
@coding-ice
refactor: rename
ae8de5b
@coding-ice
docs: prettier
568c2e5
@coding-ice
chore: eslint
5b001c5
@coding-ice
refactor: cls
792631d
@coding-ice
test: add solidTextColor case
907fddb
@coding-ice
refactor: genVariantButtonStyle
f2bebca
@coding-ice
refactor: genVariantButtonStyle
59e37f8
@coding-ice
refactor: genVariantButtonStyle
bd50dbc
@coding-ice
fix: rename
d16ee79
@coding-ice
docs: text
5e14e26
@coding-ice
fix: remove border
96b9432
@coding-ice
feat: add token colorErrorBgFilledHover
aaa8199
@coding-ice
Merge branch 'feature' into feat/variant
ad0f187
MadCcc
MadCcc previously approved these changes Sep 3, 2024
View reviewed changes
Copy link
Member

@MadCcc MadCcc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

MadCcc
MadCcc previously approved these changes Sep 3, 2024
View reviewed changes
@socket-security Socket Security
Copy link

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

Package New capabilities Transitives Size Publisher
npm/@ant-design/colors@7.1.0 None 0 34.4 kB zombiej
npm/@ant-design/compatible@5.1.3 environment 0 389 kB zombiej
npm/@ant-design/cssinjs-utils@1.0.3 environment 0 90.8 kB yumoimer
npm/@ant-design/cssinjs@1.21.1 environment 0 285 kB madccc
npm/@ant-design/happy-work-theme@1.0.0 None 0 30.9 kB zombiej
npm/@ant-design/icons@5.4.0 environment 0 8.74 MB afc163
npm/@ant-design/react-slick@1.1.2 environment 0 832 kB afc163
npm/@ant-design/tools@18.0.2 filesystem +1 74.6 kB madccc
npm/@antv/g6@4.8.24 None 0 7.99 MB iaaron
npm/@babel/eslint-plugin@7.25.1 None 0 32.9 kB nicolo-ribaudo
npm/@babel/runtime@7.25.6 None 0 248 kB nicolo-ribaudo
npm/@biomejs/biome@1.8.3 shell 0 152 kB dominionl
npm/@codecov/webpack-plugin@0.0.1-beta.12 None 0 46 kB codecov-devops
npm/@codesandbox/sandpack-react@2.19.1 eval, network 0 1.19 MB danilowoz
npm/@dnd-kit/core@6.1.0 environment 0 1.05 MB clauderic
npm/@dnd-kit/modifiers@7.0.0 environment 0 48.1 kB clauderic
npm/@dnd-kit/sortable@8.0.0 environment 0 233 kB clauderic
npm/@dnd-kit/utilities@3.2.2 environment 0 88.5 kB clauderic
npm/@emotion/css@11.13.0 None 0 273 kB emotion-release-bot
npm/@emotion/react@11.13.3 None 0 824 kB emotion-release-bot
npm/@emotion/server@11.11.0 environment 0 48.7 kB emotion-release-bot
npm/@ianvs/prettier-plugin-sort-imports@4.3.1 environment, unsafe 0 110 kB ianvs
npm/@inquirer/prompts@5.4.0 None 0 21.4 kB sboudrias
npm/@madccc/duplicate-package-checker-webpack-plugin@1.0.0 None 0 19 kB madccc
npm/@microflash/rehype-figure@2.1.0 None 0 6.79 kB naiyer
npm/@npmcli/run-script@8.1.0 environment 0 18.3 kB npm-cli-ops
npm/@octokit/rest@21.0.2 None 0 8.28 kB gr2m, kfcampbell, nickfloyd, ...1 more
npm/@qixian.cs/github-contributors-list@2.0.2 network 0 19.6 kB chenshuai2144
npm/@rc-component/color-picker@2.0.1 environment 0 83.1 kB afc163
npm/@rc-component/mutate-observer@1.1.0 environment 0 16.7 kB zombiej
npm/@rc-component/qrcode@1.0.0 None 0 146 kB zombiej
npm/@rc-component/tour@1.15.1 None 0 68.3 kB afc163
npm/@rc-component/trigger@2.2.1 environment 0 180 kB zombiej
npm/@size-limit/file@11.1.4 None 0 3.43 kB ai
npm/@stackblitz/sdk@1.11.0 None 0 186 kB tsulkowski
npm/@testing-library/dom@10.4.0 environment 0 2.43 MB testing-library-bot
npm/@testing-library/jest-dom@6.5.0 None 0 268 kB testing-library-bot
npm/@testing-library/react@16.0.1 environment 0 329 kB testing-library-bot
npm/@testing-library/user-event@14.5.2 None 0 435 kB testing-library-bot
npm/@types/adm-zip@0.5.5 None 0 24.7 kB types
npm/@types/ali-oss@6.16.11 None 0 42.2 kB types
npm/@types/cli-progress@3.11.6 None 0 13.1 kB types
npm/@types/fs-extra@11.0.4 None 0 36.8 kB types
npm/@types/gtag.js@0.0.20 None 0 9.1 kB types
npm/@types/http-server@0.12.4 None 0 4.58 kB types
npm/@types/isomorphic-fetch@0.0.39 None 0 2.77 kB types
npm/@types/jest-axe@3.5.9 None 0 6.62 kB types
npm/@types/jest-environment-puppeteer@5.0.6 None 0 6.09 kB types
npm/@types/jest-image-snapshot@6.4.0 None 0 9.68 kB types
npm/@types/jest@29.5.12 None 0 78.7 kB types
npm/@types/jquery@3.5.30 None 0 1.12 MB types
npm/@types/jsdom@21.1.7 None 0 21.9 kB types
npm/@types/node@22.5.2 None 0 2.2 MB types
npm/@types/nprogress@0.2.3 None 0 4.83 kB types
npm/@types/pixelmatch@5.2.6 None 0 7.87 kB types
npm/@types/pngjs@6.0.5 None 0 5.47 kB types
npm/@types/prismjs@1.26.4 None 0 19.2 kB types
npm/@types/progress@2.0.7 None 0 6.51 kB types
npm/@types/react-copy-to-clipboard@5.0.7 None 0 4.36 kB types
npm/@types/react-dom@18.3.0 None 0 37.8 kB types
npm/@types/react-highlight-words@0.20.0 None 0 5.75 kB types
npm/@types/react-resizable@3.0.8 None 0 7.36 kB types
npm/@types/react@18.3.5 None 0 438 kB types
npm/@types/spinnies@0.5.3 None 0 8.22 kB types
npm/@types/tar@6.1.13 None 0 30.8 kB types
npm/@types/throttle-debounce@5.0.2 None 0 6.48 kB types
npm/@typescript-eslint/eslint-plugin@8.4.0 None 0 2.62 MB jameshenry
npm/@typescript-eslint/parser@8.4.0 None 0 18.9 kB bradzacher, jameshenry
npm/ali-oss@6.21.0 filesystem 0 2.73 MB fengmk2
npm/antd-img-crop@4.23.0 None 0 47.2 kB nanxiaobei
npm/antd-style@3.6.2 environment 0 188 kB arvinxx
npm/antd-token-previewer@2.0.8 None 0 1.22 MB madccc
npm/axios@1.7.7 network 0 2.14 MB jasonsaayman
npm/chalk@4.1.2 None +1 42.1 kB sindresorhus
npm/cheerio@1.0.0 None 0 1.25 MB feedic
npm/circular-dependency-plugin@5.2.2 None 0 10.5 kB theron
npm/cli-progress@3.12.0 None 0 62.2 kB andidittrich
npm/copy-to-clipboard@3.3.3 None 0 15.1 kB sudodoki
npm/cross-env@7.0.3 environment 0 29.1 kB kentcdodds
npm/cross-fetch@4.0.0 network 0 88.1 kB lquixada
npm/dekko@0.2.1 filesystem +1 12.9 kB benjycui
npm/dumi-plugin-color-chunk@1.1.2 None 0 38.7 kB wxh16144
npm/dumi@2.4.9 environment, eval, filesystem 0 2.95 MB yifankakaxi
npm/eslint-config-airbnb@19.0.4 None 0 81.7 kB ljharb
npm/eslint-config-prettier@9.1.0 None 0 20.8 kB lydell
npm/eslint-import-resolver-typescript@3.6.3 None 0 46.8 kB jounqin
npm/eslint-plugin-compat@6.0.0 filesystem +4 2.34 MB amilajack
npm/eslint-plugin-import@2.29.1 filesystem, unsafe Transitive: environment +1 1.26 MB ljharb
npm/eslint-plugin-jest@28.8.2 filesystem 0 349 kB aaronabramov, jeysal, jsonp, ...6 more
npm/eslint-plugin-jsx-a11y@6.9.0 None +1 854 kB ljharb
npm/eslint-plugin-lodash@7.4.0 filesystem 0 320 kB idok
npm/eslint-plugin-markdown@5.1.0 None 0 31.3 kB eslintbot
npm/eslint-plugin-react@7.35.1 filesystem +1 935 kB ljharb
npm/eslint@8.57.0 environment, filesystem +5 3.68 MB eslintbot
npm/rc-cascader@3.27.1 environment 0 192 kB zombiej
npm/rc-checkbox@3.3.0 None 0 20.5 kB zombiej
npm/rc-collapse@3.8.0 None 0 52.6 kB zombiej
npm/rc-dialog@9.5.2 environment 0 77.7 kB zombiej
npm/rc-drawer@7.2.0 environment 0 59.6 kB zombiej
npm/rc-dropdown@4.2.0 None 0 42.8 kB zombiej
npm/rc-field-form@2.4.0 environment 0 291 kB zombiej
npm/rc-image@7.9.0 environment 0 157 kB zombiej
npm/rc-input-number@9.2.0 environment 0 81.2 kB madccc
npm/rc-input@1.6.3 None 0 73.4 kB afc163
npm/rc-mentions@2.16.1 None 0 77.3 kB afc163, madccc, zombiej
npm/rc-menu@9.15.1 environment 0 256 kB afc163
npm/rc-motion@2.9.2 None 0 106 kB zombiej
npm/rc-notification@5.6.0 environment 0 88.3 kB afc163
npm/rc-pagination@4.2.0 environment 0 174 kB afc163
npm/rc-picker@4.6.14 None 0 899 kB afc163
npm/rc-progress@4.0.0 environment 0 52.3 kB afc163
npm/rc-rate@2.13.0 None 0 40.6 kB madccc
npm/rc-resize-observer@1.4.0 environment 0 36.5 kB zombiej
npm/rc-segmented@2.3.0 environment 0 39.7 kB afc163
npm/rc-select@14.15.1 environment 0 341 kB zombiej
npm/rc-slider@11.1.5 environment 0 171 kB afc163
npm/rc-steps@6.0.1 None 0 48.3 kB zombiej
npm/rc-switch@4.1.0 None 0 20.5 kB afc163
npm/rc-table@7.47.5 None 0 400 kB afc163, benjycui, dxq613, ...6 more
npm/rc-tabs@15.2.0 environment 0 166 kB zombiej
npm/rc-textarea@1.8.1 environment 0 62.8 kB madccc
npm/rc-tooltip@6.2.0 None 0 52.3 kB zombiej
npm/rc-tree-select@5.22.2 None 0 162 kB afc163, madccc, valleykid, ...4 more
npm/rc-tree@5.8.8 environment 0 372 kB zombiej
npm/rc-upload@4.7.0 None 0 79.6 kB zombiej
npm/rc-util@5.43.0 environment +1 265 kB zombiej
npm/react-dom@18.3.1 environment 0 4.51 MB react-bot
npm/react@18.3.1 environment 0 318 kB react-bot
npm/scroll-into-view-if-needed@3.1.0 None 0 44.8 kB stipsan

🚮 Removed packages: npm/immer@10.1.1), npm/jquery@3.7.1), npm/lodash@4.17.21), npm/lz-string@1.5.0), npm/prettier@3.3.3), npm/regenerator-runtime@0.14.1), npm/typescript@5.5.4)

View full report↗︎

@MadCcc MadCcc merged commit badfbe3 into ant-design:feature Sep 3, 2024
38 checks passed
coding-ice added a commit to coding-ice/ant-design that referenced this pull request Sep 13, 2024
@coding-ice @li-jia-nan @MadCcc
feat(Button): support variant and color (ant-design#50051)
3c28505 
* 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 <574980606@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* 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 <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

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

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

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

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/button/style/token.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* Update components/button/style/token.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>

* 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 <49827327+coding-ice@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>
@afc163 afc163 mentioned this pull request Sep 22, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@afc163 afc163 afc163 left review comments

@zombieJ zombieJ zombieJ left review comments

@arvinxx arvinxx arvinxx left review comments

@li-jia-nan li-jia-nan li-jia-nan left review comments

@MadCcc MadCcc MadCcc approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@coding-ice @afc163 @li-jia-nan @zombieJ @MadCcc @arvinxx