feat(radio): 支持自定义icon的classname#3196
Conversation
Walkthrough本次变更主要调整了在克隆 React 元素（activeIcon 和 icon）时 className 的赋值方式。现在，组件在合并 className 时，会保留原有元素上的 className，并与动态计算的颜色相关 class 一同合并，而不是仅覆盖为 color() 的结果。这一修改确保了原有图标上的样式不会被覆盖，同时依然应用了根据状态变化的颜色类。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RadioComponent
participant IconElement
User ->> RadioComponent: 渲染 Radio 组件
RadioComponent ->> IconElement: 克隆 activeIcon/icon，合并原 className 与 color() class
IconElement -->> RadioComponent: 返回合并后的元素
RadioComponent -->> User: 显示带有正确 className 的图标
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (2)
✨ Finishing Touches
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. 🪧 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3196 +/- ##
=============================================
+ Coverage 86.52% 86.55% +0.02%
=============================================
Files 289 289
Lines 18725 18725
Branches 2818 2820 +2
=============================================
+ Hits 16202 16207 +5
+ Misses 2518 2513 -5
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/radio/radio.tsx (1)
82-82: ✅ 优化了图标类名的处理方式这个改动使得组件可以保留用户为 activeIcon 传递的自定义 className，同时仍然应用内部的样式类。这样能让用户更灵活地自定义图标样式，而不会丢失组件的默认样式。
建议添加测试用例来验证这个功能，静态分析显示这一行没有测试覆盖。可以添加一个测试用例，验证自定义 className 是否被正确保留：
it('应保留自定义图标的 className', () => { const activeIcon = <div className="custom-active-icon" />; const wrapper = mount(<Radio activeIcon={activeIcon} checked />); expect(wrapper.find('.custom-active-icon')).toHaveLength(1); expect(wrapper.find('.nut-radio-icon-checked')).toHaveLength(1); });🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 82-82: src/packages/radio/radio.tsx#L82
Added line #L82 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/radio/radio.taro.tsx(2 hunks)src/packages/radio/radio.tsx(2 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/radio/radio.tsx
[warning] 82-82: src/packages/radio/radio.tsx#L82
Added line #L82 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (3)
src/packages/radio/radio.tsx (1)
91-91: ✅ 优化了未选中状态下图标类名的处理方式修改后可以保留 icon 元素上的原始 className，同时添加组件内部样式类。这个改动与 activeIcon 的处理方式保持一致，使 API 行为更加一致和可预测。
src/packages/radio/radio.taro.tsx (2)
87-87: ✅ Taro 版本同步支持自定义 activeIcon 的 className这个改动与 Web 版本保持一致，使 Taro 版本也支持保留用户为 activeIcon 提供的自定义 className，增强了组件的可定制性。这确保了 Web 和 Taro 实现的 API 行为一致性。
96-96: ✅ Taro 版本同步支持自定义 icon 的 className修改后可以保留 icon 元素上的原始 className，这与 Web 版本的改动一致，保证了两个实现的行为一致性。这样的统一处理方式有助于开发者在不同平台间无缝切换。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit