fix: improve ant design button icon style #4520
Conversation
|
WalkthroughThe changes in this pull request primarily focus on enhancing the CSS styles for form validation and button components in the Ant Design framework. Key modifications include the addition of styles for the Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
packages/styles/src/antd/index.css (2)
21-30: Good enhancement of form validation error styles.The new styles for
.form-valid-errorimprove the visual feedback for form validation errors, particularly for select components. The use of CSS custom properties for colors is a good practice.For consistency, consider using the same CSS custom property for the box-shadow color:
.ant-select-focused .ant-select-selector { - box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important; + box-shadow: 0 0 0 2px hsl(var(--destructive) / 6%) !important; }This change would make it easier to maintain consistent colors across the application.
32-41: Good addition of error styles for number and password inputs.The new styles for number input and password input components in error states provide consistent visual feedback across different form elements. This enhances the overall user experience when dealing with form validation errors.
For better consistency and maintainability, consider the following changes:
- Use CSS custom properties for colors consistently:
.ant-input-number-focused { - box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + box-shadow: 0 0 0 2px hsl(var(--destructive) / 6%); } .ant-input-affix-wrapper:hover { border-color: hsl(var(--destructive)); - box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + box-shadow: 0 0 0 2px hsl(var(--destructive) / 6%); }
- Consider adding a focused state for the password input (
.ant-input-affix-wrapper) to match the behavior of other input types:.ant-input-affix-wrapper-focused { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--destructive) / 6%); }These changes will improve consistency across different input types and make future maintenance easier.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- packages/styles/src/antd/index.css (1 hunks)
🔇 Additional comments (2)
packages/styles/src/antd/index.css (2)
10-14: Excellent fix for button icon alignment!This change directly addresses the issue mentioned in #4517 by setting the
.anticonwithin buttons todisplay: inline-flex. This approach is effective for centering icons within buttons and aligns with the Ant Design specifications.
Line range hint
1-41: Overall, these changes significantly improve button icon alignment and form validation styles.The modifications in this file successfully address the main objective of the PR by fixing the button icon alignment issue. Additionally, the enhancements to form validation error styles provide a more consistent and user-friendly experience across different input types.
Key improvements:
- Button icon alignment is fixed using
display: inline-flex.- Consistent error styles are applied to select, number input, and password input components.
- CSS custom properties are used for most color definitions, improving maintainability.
The suggested minor improvements in the previous comments will further enhance the consistency and maintainability of the styles. Great work on improving the overall user interface!
Description
fixed #4517
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Style