Skip to content

fix: Button missing primary style#52812

Merged
zombieJ merged 8 commits intomasterfrom
fix-preset
Feb 17, 2025
Merged

fix: Button missing primary style#52812
zombieJ merged 8 commits intomasterfrom
fix-preset

Conversation

@zombieJ
Copy link
Copy Markdown
Member

@zombieJ zombieJ commented Feb 14, 2025

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ❓ Other (about what?)

🔗 Related Issues

fix #52468

💡 Background and Solution

看了一下是因为 color 缺少 info 类型,所以导致 link 变体取用的是 primary 组合,导致了 primary 为了兼容用的 info 色板。在 style 里添加一个 info 样式集合来解决这个问题。

📝 Change Log

Language Changelog
🇺🇸 English Fix Button with color to be primary and variant to be text or link will not use correct color.
🇨🇳 Chinese 修复 Button 配置 colorprimary 并且 varianttextlink 时,没有取用正确的色板的问题。

@bolt-new-by-stackblitz
Copy link
Copy Markdown

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 14, 2025

Preview is ready

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 14, 2025

👁 Visual Regression Report for PR #52812 Failed ❌

🎯 Target branch: master (f7d9e33)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 12 changed

Expected (Branch master) Actual (Current PR) Diff
button-component-token.compact.png button-component-token.compact.png button-component-token.compact.png button-component-token.compact.png
button-component-token.compact.png button-component-token.compact.png button-component-token.compact.css-var.png button-component-token.compact.css-var.png
button-component-token.dark.png button-component-token.dark.png button-component-token.dark.png button-component-token.dark.png
button-component-token.dark.png button-component-token.dark.png button-component-token.dark.css-var.png button-component-token.dark.css-var.png
button-component-token.default.png button-component-token.default.png button-component-token.default.png button-component-token.default.png
button-component-token.default.png button-component-token.default.png button-component-token.default.css-var.png button-component-token.default.css-var.png
button-debug-color-variant.compact.png button-debug-color-variant.compact.png button-debug-color-variant.compact.png button-debug-color-variant.compact.png
button-debug-color-variant.compact.png button-debug-color-variant.compact.png button-debug-color-variant.compact.css-var.png button-debug-color-variant.compact.css-var.png

Warning

There are more diffs not shown in the table. Please check the Full Report for details.


Important

There are 12 diffs found in this PR: 🔄 12 changed.
Please check all items:

  • Checked all diffs in the full report
  • Visual diff is acceptable

@petercat-assistant
Copy link
Copy Markdown

Walkthrough

This pull request addresses a bug fix related to the Button component in the Ant Design library. The issue was that the Button with color set to primary and variant set to text or link was not using the correct color. The solution involved adding an info style set in the styles to resolve this problem.

Changes

Files Changed Summary
components/button/button.tsx Updated the link variant to use info instead of primary. Adjusted the onClick handler formatting.
components/button/buttonHelpers.tsx Added info to the _ButtonColorTypes array.
components/button/demo/component-token.tsx Modified the component token demo to include new configurations and examples for info color.
components/button/style/index.ts Introduced genInfoStyle for info color and adjusted existing styles to accommodate the new info color.
components/button/tests/snapshots/demo-extend.test.ts.snap Updated snapshots to reflect changes in button styles.
components/button/tests/snapshots/demo.test.ts.snap Updated snapshots to reflect changes in button styles.

Comment thread components/button/button.tsx Outdated
primary: ['primary', 'solid'],
dashed: ['default', 'dashed'],
link: ['primary', 'link'],
link: ['info', 'link'],
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The change from primary to info for the link variant ensures that the correct color palette is used, addressing the bug where link was incorrectly using primary colors.

Comment thread components/button/style/index.ts Outdated
[`${componentCls}-color-default`]: genDefaultButtonStyle(token),
[`${componentCls}-color-primary`]: genPrimaryButtonStyle(token),
[`${componentCls}-color-dangerous`]: genDangerousStyle(token),
[`${componentCls}-color-info`]: genInfoStyle(token),
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The addition of genInfoStyle for info color provides a comprehensive style set for the new info color type, ensuring consistent styling across different button variants.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Feb 14, 2025

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4b8dfa2
Status: ✅  Deploy successful!
Preview URL: https://a3622dde.ant-design.pages.dev
Branch Preview URL: https://fix-preset.ant-design.pages.dev

View logs

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 14, 2025

size-limit report 📦

Path Size
dist/antd.min.js 447.51 KB (+64 B 🔺)
dist/antd-with-locales.min.js 533.12 KB (+87 B 🔺)

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 14, 2025

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 14, 2025

Bundle Report

Changes will increase total bundle size by 1.13kB (0.03%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.38MB 1.13kB (0.03%) ⬆️

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.min.js 564 bytes 1.84MB 0.03%
antd.min.js 568 bytes 1.54MB 0.04%

@zombieJ
Copy link
Copy Markdown
Member Author

zombieJ commented Feb 17, 2025

尴尬,还有个 colorLink,那 colorInfo 的 info 就不能作为独立的 color 来用。 。 。

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 17, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (90c148a) to head (4b8dfa2).
Report is 8 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #52812   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          767       767           
  Lines        13845     13846    +1     
  Branches      3628      3628           
=========================================
+ Hits         13845     13846    +1     

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

@zombieJ zombieJ marked this pull request as ready for review February 17, 2025 07:59
@zombieJ zombieJ merged commit 63cbe9e into master Feb 17, 2025
@zombieJ zombieJ deleted the fix-preset branch February 17, 2025 08:04
@zombieJ zombieJ mentioned this pull request Feb 17, 2025
16 tasks
renny-ren pushed a commit to renny-ren/ant-design that referenced this pull request Apr 14, 2025
* fix: Button style of preset

* chore: add info of fix

* docs: update demo

* chore: fix lint

* test: update snapshot

* fix: color of link

* test: update snapshot

* test: update snapshot
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Buttons with variant "link" or "text" use the info color when the color is set to primary

2 participants