fix(Select): correct clear icon position in sm size#56525
fix(Select): correct clear icon position in sm size#56525meet-student merged 5 commits intoant-design:masterfrom
Conversation
|
|
Summary of ChangesHello @QDyanbing, 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! 此拉取请求旨在解决 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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. Walkthrough在 Select 小尺寸变体中为清除图标添加定位规则:在 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 分钟 诗歌
🚥 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 |
👁 Visual Regression Report for PR #56525 Failed ❌
Important There are 1 diffs found in this PR: 🔄
|
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56525 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 805 805
Lines 14847 14847
Branches 3920 3920
=========================================
Hits 14847 14847 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/select/__tests__/index.test.tsx:
- Around line 329-338: The test expecting getComputedStyle(ele).insetInlineEnd
to equal the CSS variable string is wrong because getComputedStyle returns the
resolved/calculated value; update the assertion in the test that queries
'.ant-select-clear' to expect 'calc(var(--ant-padding-xs) -
var(--ant-line-width))' instead of 'var(--select-padding-horizontal)', and move
this it(...) into the existing "clear icon position" describe block so it sits
with the other clear-icon position tests (keep the render call and selector
logic using getComputedStyle unchanged).
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/select/__tests__/index.test.tsxcomponents/select/style/select-input.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- components/select/style/select-input.ts
🧰 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 TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/select/__tests__/index.test.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/select/__tests__/index.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/select/__tests__/index.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/select/__tests__/index.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/select/__tests__/index.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/select/__tests__/index.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/select/__tests__/index.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/select/__tests__/index.test.tsx
🧠 Learnings (2)
📓 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 CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
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
📚 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 **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/select/__tests__/index.test.tsx
⏰ 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 (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-node
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: build
Bundle ReportChanges will increase total bundle size by 8.13MB (210.53%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/select/__tests__/index.test.tsx:
- Around line 166-175: In the test "aligns clear icon inset with small size
padding" update the assertion for getComputedStyle(ele).insetInlineEnd to expect
the calculated value for small size padding instead of the CSS variable string;
change the expected value to "calc(var(--ant-padding-xs) -
var(--ant-line-width))" so the test checks the resolved computed style.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/select/__tests__/index.test.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 TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/select/__tests__/index.test.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/select/__tests__/index.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/select/__tests__/index.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/select/__tests__/index.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/select/__tests__/index.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/select/__tests__/index.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/select/__tests__/index.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/select/__tests__/index.test.tsx
🧠 Learnings (3)
📓 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 CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
📚 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 **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/select/__tests__/index.test.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 **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/select/__tests__/index.test.tsx
⏰ 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, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-node
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: size
- GitHub Check: build preview
- GitHub Check: build




🤔 这个变动的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
问题背景
在
Select组件的 small(sm)尺寸下,clear图标的insetInlineEnd未与对应尺寸的横向 padding 计算保持一致,
导致在部分主题或自定义 token 场景中出现 视觉偏移。
解决方案
在
&-sm样式作用域中,为clear图标补充与 sm 尺寸一致的insetInlineEnd计算逻辑:paddingXS - lineWidth作为最终偏移值--select-padding-horizontal的计算方式保持一致该修改仅影响样式计算逻辑,不涉及 API 变更。
📝 更新日志