fix(token): The colorBgMask does not take effect.#56031
fix(token): The colorBgMask does not take effect.#56031afc163 merged 1 commit intoant-design:masterfrom
Conversation
|
|
👁 Visual Regression Report for PR #56031 Passed ✅
🎊 Congrats! No visual-regression diff found.
|
📝 WalkthroughSummary by CodeRabbit发行说明
✏️ Tip: You can customize this high-level summary in your review settings. 总体概览该PR统一了抽屉、图片预览和模态框的遮罩样式处理方式。移除了共享的 变更清单
代码审查工作量预估🎯 2 (简单) | ⏱️ ~12 分钟 需要特别关注的区域:
诗
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/drawer/style/index.ts (1)
107-109: 修复正确,变更符合 PR 目标。通过移除
blurMaskStyle的展开操作并使用显式的backdropFilter: 'blur(4px)',确保了colorBgMasktoken(第 104 行)不会被覆盖。这正确地解决了蒙层背景色不生效的问题。可选优化建议:考虑将模糊值
4px提取为设计 token,以保持设计系统的一致性。例如可以添加类似blurStrength的 token。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/drawer/style/index.ts(2 hunks)components/image/style/index.ts(3 hunks)components/modal/style/index.ts(2 hunks)components/style/index.tsx(0 hunks)components/theme/interface/maps/colors.ts(1 hunks)
💤 Files with no reviewable changes (1)
- components/style/index.tsx
🧰 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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.ts
🧠 Learnings (21)
📚 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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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 : Respect `prefers-reduced-motion` for animations
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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} : Use class selectors instead of tag selectors for style overrides to improve specificity
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/modal/style/index.tscomponents/drawer/style/index.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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} : Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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} : All components must support dark mode
Applied to files:
components/modal/style/index.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} : Use CSS-in-JS with performance considerations, avoid unnecessary style recalculation
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/modal/style/index.tscomponents/drawer/style/index.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 `ant-design/cssinjs` for all styling
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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} : Use `ant-design/cssinjs` as the styling solution
Applied to files:
components/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.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/**/demo/*.tsx : Demo code import order: React → dependencies → antd components → custom components → types → styles
Applied to files:
components/modal/style/index.tscomponents/image/style/index.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/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/modal/style/index.tscomponents/image/style/index.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/**/*.{ts,tsx} : Respect user's prefers-reduced-motion setting for animations
Applied to files:
components/modal/style/index.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/modal/style/index.tscomponents/drawer/style/index.tscomponents/image/style/index.tscomponents/theme/interface/maps/colors.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} : Use CSS logical properties (margin-inline-start) instead of directional properties (margin-left) for RTL support
Applied to files:
components/drawer/style/index.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} : Style generation functions should follow `gen[ComponentName]Style` naming convention
Applied to files:
components/drawer/style/index.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/drawer/style/index.tscomponents/image/style/index.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/image/style/index.tscomponents/theme/interface/maps/colors.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/image/style/index.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: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-node
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: lint
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build
🔇 Additional comments (4)
components/modal/style/index.ts (1)
164-166: 变更正确,与 Drawer 组件保持一致。通过使用显式的
backdropFilter: 'blur(4px)'替代blurMaskStyle展开,确保了第 161 行的colorBgMasktoken 正确生效。此修复方式与 Drawer 组件的实现保持一致。components/theme/interface/maps/colors.ts (1)
629-630: 文档更新准确。正确地将 Image 组件添加到使用
colorBgMasktoken 的组件列表中,准确反映了本次修复。中英文描述均已同步更新。components/image/style/index.ts (2)
99-99: 正确使用全局 token。将组件特定的
modalMaskBgtoken 替换为全局的colorBgMasktoken,这符合设计系统使用全局 token 的最佳实践,并确保了与 Modal、Drawer 组件的一致性。Also applies to: 112-112
148-151: Manual verification required — repository access unavailable in sandbox.The review comment claims to verify specific code changes at components/image/style/index.ts (lines 148-151) related to
colorBgMasktoken usage andbackdropFilterblur styling to fix issues #56007 and #56008. However, the repository could not be accessed in the sandbox environment to confirm:
- Whether
colorBgMaskis correctly applied for the mask background- Whether
backdropFilter: 'blur(4px)'is explicitly set (not spread from removedblurMaskStyle)- Whether the token usage complies with coding guidelines (no hardcoded values, proper design token usage)
- Whether
modalMaskBgandblurMaskStylereferences have been properly cleaned up- Whether the fix actually resolves the cited issues
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 1.03kB (-0.01%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56031 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 803 803
Lines 14825 14831 +6
Branches 3914 3916 +2
=========================================
+ Hits 14825 14831 +6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|


中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
close #56007
close #56008
💡 Background and Solution
做blurMaskStyle的时候,把mask的背景色覆盖掉了
另外:Image组件原先不支持colorBgMask这个token,做了一下兼容
📝 Change Log
colorBgMasktoken does not take effect.colorBgMasktoken 不生效的问题。