fix(radio): avoid hover primary color when disabled#57562
fix(radio): avoid hover primary color when disabled#57562meet-student merged 7 commits intoant-design:masterfrom
Conversation
|
|
|
|
👁 Visual Regression Report for PR #57562 Failed ❌
Important There are 3 diffs found in this PR: 🔄
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughSummary by CodeRabbit发布说明
Walkthrough修复 Radio 组件在禁用包装器（wrapper）处于禁用时，悬停仍应用主色边框的样式选择器，调整 hover 选择器以排除带有 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 |
|
Hi, 可以在 debug 的 demo 中添加一个这个场景, 方便后续的快照回归, 检测是否再次被修改异常 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 919be18c38
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
|
||
| // ===================== Hover ===================== | ||
| [`&:hover ${componentCls}`]: { | ||
| [`&:hover:not(${componentCls}-disabled) ${componentCls}`]: { |
There was a problem hiding this comment.
The new selector puts :not(${componentCls}-disabled) on the wrapper (&), but disabled state for the wrapper is ${componentCls}-wrapper-disabled while ${componentCls}-disabled is on the inner radio element. In disabled markup this condition is still true, so hovering a disabled radio still applies the primary border color and the reported bug is not actually fixed.
Useful? React with 👍 / 👎.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the radio component hover styles to prevent them from triggering when the component is disabled. The review identifies that the current implementation incorrectly targets the wrapper class instead of the inner radio element, and provides a corrected selector to ensure proper behavior.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/radio/style/index.ts`:
- Around line 259-261: The hover selector currently excludes
`${componentCls}-disabled` but the disabled class is actually
`${componentCls}-wrapper-disabled`, so update the selector in the style rule
that uses `&:hover:not(...) ${componentCls}` to exclude the wrapper disabled
class instead (i.e., use `:not(${componentCls}-wrapper-disabled)` or
`:not(.${componentCls}-wrapper-disabled)` depending on whether componentCls
includes the dot), ensuring the hover borderColor rule will not apply when
`${componentCls}-wrapper-disabled` is present.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: cd99001a-3808-43c7-a1f1-d74196f061ae
📒 Files selected for processing (1)
components/radio/style/index.ts
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #57562 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 810 810
Lines 15075 15075
Branches 3974 3974
=========================================
Hits 15075 15075 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will decrease total bundle size by 6.13MB (-64.51%) ⬇️. 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
|
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <1875694521@qq.com>
感觉这种加了也没上用，需要hover才能触发 |
也是, 能直接 hover 吗, 模拟 也有点奇怪, 不过我看了下之前的的 issue 和 pr 很多 disabled foucs , hover 样式不对的 问题, 得想想规避归回方式 |
|
感觉还是ai之前那版好一点，不过现在这个应该也没啥问题 |
4 participants
🤔 This is a ...
🔗 Related Issues
Fix #57561
💡 Background and Solution
Problem:
Radio component still displays primary color border on hover when it is in
disabledstate, which does not meet the UI interaction specification.Solution:
Add
:not(${componentCls}-disabled)to the hover style selector incomponents/radio/style/index.tsto exclude disabled status, so that hover effect only works when radio is enabled.📝 Change Log