fix(ColorPicker): fix text clipping in ColorPicker InputNumber#55966
fix(ColorPicker): fix text clipping in ColorPicker InputNumber#55966afc163 merged 1 commit intoant-design:masterfrom
Conversation
|
|
|
|
👁 Visual Regression Report for PR #55966 Passed ✅
🎊 Congrats! No visual-regression diff found. |
Summary of ChangesHello @DDDDD12138, I'm Gemini Code Assist1! 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 resolves a visual bug within the ColorPicker component where numerical input fields, particularly for alpha channel values, experienced text clipping. The issue stemmed from an inherited padding style that was too wide for the 'small' size variant of the InputNumber, causing content to be cut off. The change introduces a targeted style override to remove this problematic padding, ensuring all text is fully visible and improving the user experience of the ColorPicker. 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
|
📝 WalkthroughSummary by CodeRabbit发布说明
✏️ Tip: You can customize this high-level summary in your review settings. 概览在颜色选择器输入框样式中添加了 变更
估计代码审查工作量🎯 1 (微不足道) | ⏱️ ~3 分钟
诗
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. 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.
Code Review
This pull request addresses a text clipping issue in the ColorPicker's InputNumber components, which occurs due to inherited padding. The fix correctly removes this padding from the InputNumber wrapper by setting padding: 0. This is a targeted and effective solution for the visual bug. The change is correct and looks good.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/color-picker/style/input.ts (1)
31-31: 为 ColorPicker 中的 InputNumber 清空内边距是合理的在 steppers 容器下对
${antCls}-input-number设置padding: 0，可以有效去掉来自小号 InputNumber 的默认水平内边距，避免窄宽度（特别是 alpha 输入框）中文字被裁剪，且 0 作为“无间距”值不需要额外 token，符合当前设计体系。可以作为一个可选优化考虑：如果未来希望仍保留或通过 token 控制垂直方向内边距，可以改成只清除水平方向，例如使用
paddingInline: 0，把 block 方向的控制留给尺寸相关样式。当前实现功能上没有问题，只是未来演进时的灵活性建议。（参考项目编码规范与已记录的 design token 使用习惯）
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/color-picker/style/input.ts(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/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/color-picker/style/input.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.ts
🧠 Learnings (5)
📚 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/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.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/color-picker/style/input.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: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-node
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: build
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: size
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 8.23MB (-67.92%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #55966 +/- ##
==========================================
Coverage ? 100.00%
==========================================
Files ? 803
Lines ? 14812
Branches ? 3913
==========================================
Hits ? 14812
Misses ? 0
Partials ? 0 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
中文版模板 / Chinese template
🤔 This is a ...
💡 Background and Solution
InputNumber components in ColorPicker inherit padding from Input base styles. When size="
small" is used, theant-input-number-smclass applies padding via CSS variables (var(--ant-input-number-padding-block-sm)andvar(--ant-input-number-padding-inline-sm)), which is7pxhorizontally. This causes text clipping in narrow input fields, especially the alpha channel input.Preview
📝 Change Log