feat[Input.Search]: Abandoning the use of addon * in the Search component#55705
feat[Input.Search]: Abandoning the use of addon * in the Search component#55705zombieJ merged 9 commits intoant-design:nextfrom
Conversation
|
|
👁 Visual Regression Report for PR #55705 Failed ❌
Warning There are more diffs not shown in the table. Please check the Full Report for details. Important There are 42 diffs found in this PR: 🔄
|
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. ✨ 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 @EmilyyyLiu, 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 focuses on a significant refactoring effort within the Ant Design input components. The primary goal is to replace the use of deprecated 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
|
Summary of ChangesHello @EmilyyyLiu, 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 undertakes a significant refactoring initiative to modernize the 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 is a significant and well-executed refactoring of the Input.Search and Input.Group components to use Space.Compact. This change deprecates the use of addon* properties, which improves component consistency and maintainability across the library. The implementation is solid, with appropriate updates to component logic, styles, and tests to reflect the new structure. I've identified one minor area where a style rule appears to be redundant, but overall, this is a high-quality contribution that modernizes the input components.
| return { | ||
| [componentCls]: { | ||
| width: '100%', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
The width: '100%' style appears to be redundant. The Search component now uses Space.Compact with a hardcoded block prop. This block prop adds the .ant-space-compact-block class, which already applies width: 100%. To avoid redundancy and keep the styling logic clean, consider removing this style definition. If it's intended as a safeguard, adding a comment to explain its purpose would be beneficial for future maintenance.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Input.Search component to abandon the deprecated addon* API and replace it with Space.Compact. The key changes include:
- Restructured Input.Search to use Space.Compact as the root wrapper
- Updated Input.Group to use Space.Compact internally
- Added new style file for Search component
- Modified styling to support the new compact layout
- Updated tests and snapshots to reflect the new DOM structure
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
components/input/Search.tsx |
Refactored to wrap Input and button in Space.Compact instead of using addonAfter |
components/input/Group.tsx |
Changed from <span> to <Space.Compact> wrapper |
components/input/style/search.ts |
New style hook for Search component |
components/input/style/index.ts |
Updated styles for compact layout, moved button styles, commented out z-index rules |
components/input/__tests__/Search.test.tsx |
Added assertions for className placement, reordered imports |
components/space/__tests__/space-compact.test.tsx |
Updated tests for Input.Search compact behavior |
| Multiple snapshot files | Updated to reflect new DOM structure with Space.Compact |
There was a problem hiding this comment.
Code Review
This pull request refactors the Input.Search and Input.Group components to use Space.Compact instead of the deprecated addon* properties. While the refactoring is a good step forward, I've found a critical regression in the Input.Search component where the default search button and the addonAfter prop are no longer rendered correctly. The rest of the changes, including snapshot updates and style adjustments, look consistent with the refactoring goal.
| return ( | ||
| <Space.Compact | ||
| className={mergedClassName} | ||
| style={{ ...style, ...mergedStyles.root }} | ||
| {...rootProps} | ||
| hidden={hidden} | ||
| block | ||
| > | ||
| <Input ref={composeRef<InputRef>(inputRef, ref)} {...inputProps} /> | ||
| {button} | ||
| </Space.Compact> | ||
| ); |
There was a problem hiding this comment.
This refactoring to use Space.Compact appears to have introduced two regressions from the previous behavior:
-
addonAfterprop is ignored: TheaddonAfterprop is destructured but no longer rendered whenenterButtonis not present. This is a breaking change as it was previously supported. -
Default search button is missing: When
enterButtonisfalse, the search button is no longer rendered. Thebuttonvariable is only defined within theif (enterButton)block, leaving itundefinedfor the default case. The previous implementation rendered a search icon button.
The test snapshots seem to reflect the expected (and previously working) behavior, but the code changes in this PR do not produce that output. This suggests the implementation is incomplete.
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 1.38kB (0.04%) ⬆️. 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 @@
## next #55705 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 800 801 +1
Lines 14770 14774 +4
Branches 3910 3909 -1
=========================================
+ Hits 14770 14774 +4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log