fix(Button): defaultBg, defaultColor, defaultHoverColor and defaultActiveColor token does not work#56238
Conversation
|
|
👁 Visual Regression Report for PR #56238 Failed ❌
Important There are 4 diffs found in this PR: 🔄
|
|
|
📝 WalkthroughSummary by CodeRabbit发布说明
✏️ Tip: You can customize this high-level summary in your review settings. Walkthrough更新按钮变体的样式令牌映射：为 outlined/dashed 变体及其 Default 色块补充显式文本颜色与背景容器映射，并在 demo 中新增一个使用这些令牌的 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @ug-hero, I'm Gemini Code Assis 8000 t1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a critical styling bug within the Button component where specific theming tokens, namely Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request correctly fixes an issue where defaultBg, defaultColor, and defaultHoverColor tokens were not being applied correctly for some button variants, which prevented proper theme customization. The changes are well-targeted. I've added one suggestion to also handle defaultActiveColor for consistency, which would make this fix more complete. Overall, this is a good improvement.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/button/style/variant.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use camelCase for property names
All components and functions must provide accurate type definitions
Avoid usinganytype, define types as precisely as possible
Use interface rather than type alias for defining object structures
All TypeScript should compile without errors or warnings
Use generics appropriately to enhance type flexibility
Use intersection types (&) to merge multiple types
Use literal union types to define limited option sets
Avoid using enum, prefer union types andas const
Rely on TypeScript's type inference as much as possible
Use type assertions (as) only when necessary
Complex data structures should be split into multiple interface definitions
Avoid outdated APIs and keep updated to new recommended usage
Files:
components/button/style/variant.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/button/style/variant.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
components/**/*.{ts,tsx}: Use TypeScript and React for component development
Use functional components and hooks, avoid class components
Use PascalCase for component names
Use complete names rather than abbreviations in component naming
Initialize properties should usedefault+PropNamenaming pattern
Panel opening should useopenprop instead ofvisible
Event handlers should followon+EventNamenaming pattern
Child component events should followon+SubComponentName+EventNamenaming pattern
Components should provide arefattribute withnativeElementandfocusmethods
Export all public interface types for user convenience
Component props should use interface definition namedComponentNameProps
Use CSS transitions for simple animations, rc-motion for complex animations
Respect user's prefers-reduced-motion setting for animations
Follow WCAG 2.1 AA level accessibility standards for styling
Achieve 100% test coverage
UseuseLocalehook fromcomponents/locale/index.tsxto get localization configuration
Use React.memo, useMemo, and useCallback appropriately for performance optimization
UseReact.ForwardRefRenderFunctionfor component ref types
Callback function types should have explicit parameter and return value definitions
Component state should have dedicated interfaces (e.g., ComponentNameState)
Components should display well on different screen sizes (responsive design)
Components should support right-to-left (RTL) reading direction
Support page zoom to 200% with normal layout
Avoid animations that cause flickering
Ensure code runs normally with no console errors
Avoid unnecessary re-renders
Support Tree Shaking for bundle optimization
Files:
components/button/style/variant.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/button/style/variant.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/button/style/variant.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js}: Use early returns to improve code readability
Pass all ESLint and TypeScript checks
Files:
components/button/style/variant.ts
components/**/style/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Component Token naming format should follow:
variant (optional)+semantic part+semantic part variant (optional)+css property+size/disabled (optional)
Files:
components/button/style/variant.ts
components/**/style/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
components/**/style/**/*.{ts,tsx}: Use@ant-design/cssinjsas the styling solution
Style generation functions should followgen[ComponentName]Stylenaming convention
Use CSS-in-JS with performance considerations, avoid unnecessary style recalculation
Use class selectors instead of tag selectors for style overrides to improve specificity
Use CSS logical properties (margin-inline-start) instead of directional properties (margin-left) for RTL support
Ensure sufficient color contrast and do not rely on color alone to convey information
Components should use global Tokens and component-level Tokens for styling
Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Component-level Token naming should follow: Component + property name (e.g., buttonPrimaryColor)
Token modifications should cascade downward to ensure design system consistency
All components must support dark mode
Provide clear visual indication for focus state
Files:
components/button/style/variant.ts
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/*.{ts,tsx} : Component Token naming format should follow: `variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Token modifications should cascade downward to ensure design system consistency
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Component-level Token naming should follow: Component + property name (e.g., buttonPrimaryColor)
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Components should use global Tokens and component-level Tokens for styling
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Ensure sufficient color contrast and do not rely on color alone to convey information
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/button/style/variant.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Provide clear visual indication for focus state
Applied to files:
components/button/style/variant.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: build preview
- GitHub Check: lint
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: size
- GitHub Check: build
🔇 Additional comments (2)
components/button/style/variant.ts (2)
234-238: 验证所有新token是否已正确声明。需要确认
defaultColor、defaultHoverColor、defaultHoverBg和defaultActiveBg这些token已在ButtonToken类型定义中声明，且遵循组件token命名规范。运行以下脚本验证token声明：
#!/bin/bash # 描述: 验证新增的Button token是否已声明 # 查找ButtonToken接口定义 echo "=== ButtonToken接口定义 ===" rg -nP --type=ts 'interface ButtonToken' -A 50 # 搜索所有defaultColor相关token的声明 echo -e "\n=== defaultColor系列token ===" rg -nP --type=ts '\b(defaultColor|defaultHoverColor|defaultBg|defaultHoverBg|defaultActiveBg)\s*[?:]' -B 2 -A 1 # 查找token定义文件 echo -e "\n=== Button token定义文件 ===" fd -e ts -e tsx token components/button/
39-39: 所有 token 定义均已正确配置，修改逻辑无误。验证结果：
defaultBg、defaultColor、defaultHoverColor、defaultHoverBg、defaultActiveBg均已在ComponentToken接口（token.ts 第 13-239 行）中定义- 所有 token 在
prepareComponentToken函数（token.ts 第 282-359 行）中获得默认值Line 39 的修改允许用户通过
token.defaultBg自定义背景色，使用了正确的 nullish coalescing 回退到token.colorBgContainer。建议：Lines 234-237 应与 Line 39 保持一致，为
token.defaultColor、token.defaultHoverColor、token.defaultHoverBg、token.defaultActiveBg各自添加相应的回退值，确保防御性编程的统一性。
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56238 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 807 807
Lines 14923 14924 +1
Branches 3931 3932 +1
=========================================
+ Hits 14923 14924 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: ug <62086147+ug-hero@users.noreply.github.com>
Bundle ReportChanges will increase total bundle size by 272 bytes (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/button/demo/component-token.tsx (1)
106-121: 这个演示正确展示了 Button 组件令牌的实现。经验证，
defaultBg、defaultColor、defaultHoverColor、defaultActiveColor令牌已在components/button/style/token.ts和components/button/style/variant.ts中正确实现。关于颜色对比度：虽然使用的颜色组合（黑色背景 #000 上的红色 #f00 和绿色 #0f0）在 WCAG 2.1 AA 标准下对比度不足，但这些是演示代码中的极端颜色值，用于明确展示令牌效果如何影响按钮样式。这对于证明 PR 修复是否成功是可以接受的。
建议改进演示以展示所有令牌效果：添加注释或说明文字提示用户悬停/点击按钮查看
defaultHoverColor和defaultActiveColor的效果，因为当前演示仅展示静态状态。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/button/demo/component-token.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use camelCase for property names
All components and functions must provide accurate type definitions
Avoid usinganytype, define types as precisely as possible
Use interface rather than type alias for defining object structures
All TypeScript should compile without errors or warnings
Use generics appropriately to enhance type flexibility
Use intersection types (&) to merge multiple types
Use literal union types to define limited option sets
Avoid using enum, prefer union types andas const
Rely on TypeScript's type inference as much as possible
Use type assertions (as) only when necessary
Complex data structures should be split into multiple interface definitions
Avoid outdated APIs and keep updated to new recommended usage
Files:
components/button/demo/component-token.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/button/demo/component-token.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
components/**/*.{ts,tsx}: Use TypeScript and React for component development
Use functional components and hooks, avoid class components
Use PascalCase for component names
Use complete names rather than abbreviations in component naming
Initialize properties should usedefault+PropNamenaming pattern
Panel opening should useopenprop instead ofvisible
Event handlers should followon+EventNamenaming pattern
Child component events should followon+SubComponentName+EventNamenaming pattern
Components should provide arefattribute withnativeElementandfocusmethods
Export all public interface types for user convenience
Component props should use interface definition namedComponentNameProps
Use CSS transitions for simple animations, rc-motion for complex animations
Respect user's prefers-reduced-motion setting for animations
Follow WCAG 2.1 AA level accessibility standards for styling
Achieve 100% test coverage
UseuseLocalehook fromcomponents/locale/index.tsxto get localization configuration
Use React.memo, useMemo, and useCallback appropriately for performance optimization
UseReact.ForwardRefRenderFunctionfor component ref types
Callback function types should have explicit parameter and return value definitions
Component state should have dedicated interfaces (e.g., ComponentNameState)
Components should display well on different screen sizes (responsive design)
Components should support right-to-left (RTL) reading direction
Support page zoom to 200% with normal layout
Avoid animations that cause flickering
Ensure code runs normally with no console errors
Avoid unnecessary re-renders
Support Tree Shaking for bundle optimization
Files:
components/button/demo/component-token.tsx
components/*/demo/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/*/demo/*.tsx: Keep demo code concise and copy-pasteable
Focus each demo on a single feature
Use kebab-case for demo filenames:basic.tsx,custom-filter.tsx
Files:
components/button/demo/component-token.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/button/demo/component-token.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/button/demo/component-token.tsx
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js}: Use early returns to improve code readability
Pass all ESLint and TypeScript checks
Files:
components/button/demo/component-token.tsx
components/**/demo/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
components/**/demo/*.tsx: Demo code should be concise and suitable for users to copy directly into their projects
Each demo should focus on demonstrating one feature point
Demo files should be named with lowercase hyphen-separated words (e.g., basic.tsx, custom-filter.tsx)
Demo code import order: React → dependencies → antd components → custom components → types → styles
Demo code should use 2-space indentation, arrow functions, and camelCase naming
Arrange demos from simple to complex
Files:
components/button/demo/component-token.tsx
🧠 Learnings (11)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Component-level Token naming should follow: Component + property name (e.g., buttonPrimaryColor)
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instru
992E
ctions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Component-level Token naming should follow: Component + property name (e.g., buttonPrimaryColor)
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Components should use global Tokens and component-level Tokens for styling
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/*/demo/*.tsx : Focus each demo on a single feature
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/demo/*.tsx : Demo code import order: React → dependencies → antd components → custom components → types → styles
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/*/demo/*.tsx : Keep demo code concise and copy-pasteable
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/demo/*.tsx : Arrange demos from simple to complex
Applied to files:
components/button/demo/component-token.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Ensure sufficient color contrast and do not rely on color alone to convey information
Applied to files:
components/button/demo/component-token.tsx
🧬 Code graph analysis (1)
components/button/demo/component-token.tsx (1)
components/badge/demo/component-token.tsx (1)
ConfigProvider(6-32)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: build preview
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-node
- GitHub Check: lint
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build
- GitHub Check: size
|
同步下master代码 |
done. 辛苦再 review 一下 |
|
应该是问题不大的；之前还以为这pr早就被合了呢； |
components/button/style/variant.ts
Outdated
| [varName('bg-color-active')]: varRef('bg-color'), | ||
| [varName('bg-color-disabled')]: token.colorBgContainerDisabled, | ||
| [varName('bg-color-container')]: token.colorBgContainer, | ||
| [varName('bg-color-container')]: token.defaultBg ?? token.colorBgContainer, |
There was a problem hiding this comment.
不能用条件式，v6 只会生成一套 CSS，然后通过 cssVar 来填充。这里编译成 css 后只会保留 token.defaultBg
There was a problem hiding this comment.
@ug-hero ?? token.colorBgContainer看起来去掉就行token.ts里应该处理了默认值
|
可以帮顺便处理下debug demo把 debug-color-variant.tsx里的这两个干掉 <ConfigProvider
theme={{
components: {
Button: {
defaultBg: "red",
defaultColor: "blue",
defaultHoverColor: "green",
defaultActiveColor: "yellow",
textTextColor: "purple",
textTextHoverColor: "orange",
textTextActiveColor: "pink",
textHoverBg: "brown",
},
},
}}
>
<Flex gap="small" align="start">
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
</Flex>
</ConfigProvider>这样就行 |
@QDyanbing 你那边可以建议代码么，可以直接这么建议，然后我合并进去。也可以多选几行 |
Co-authored-by: 高艳兵 <66234749+QDyanbing@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com>
components/button/style/variant.ts
Outdated
| [varName('bg-color-active')]: varRef('bg-color'), | ||
| [varName('bg-color-disabled')]: token.colorBgContainerDisabled, | ||
| [varName('bg-color-container')]: token.colorBgContainer, | ||
| [varName('bg-color-container')]: token.defaultBg, |
There was a problem hiding this comment.
预设变量应该用 colorBgContainer，在 color 为 default 的时候才切换到 defaultBg 上去
Co-authored-by: 高艳兵 <66234749+QDyanbing@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: 高艳兵 <66234749+QDyanbing@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com>
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
close #56232
💡 Background and Solution
📝 Change Log