fix(checkbox): 列表模式切换选中态,布局错误
Closes #3164
Summary by CodeRabbit
- 样式
- 优化了复选框视觉效果:将图标阴影效果拆分为独立样式,确保视觉层次更加清晰,同时保留了原有风格。
- 调整了组件内部展示结构:图标采用统一容器包装,标签改为文本呈现,提升了整体渲染表现和用户体验。
[!IMPORTANT]
Review skipped
Review was skipped due to path filters
:no_entry: Files ignored due to path filters (1)
src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snapis excluded by!**/*.snapCodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including
**/dist/**will override the default block on thedistdirectory, by removing the pattern from both the lists.You can disable this status message by setting the
reviews.review_statustofalsein the CodeRabbit configuration file.
Walkthrough
本次提交主要涉及两个方面的改动。一处是在样式文件中,将原有的 .nut-checkbox 中的 &-icon-wrap 样式重命名为 &-icon-wrap-shadow,同时新增一个与原 &-icon-wrap 样式相同的新类,从而将阴影效果与原始样式分离。另一处是在 Checkbox 组件中,对图标和标签的渲染逻辑进行了调整:图标统一用 View 包裹,标签改为使用 Text 组件,并移除了不必要的片段包装,以优化组件的结构。
Changes
| 文件 | 改动说明 |
|---|---|
| src/.../checkbox/checkbox.scss | 重命名 &-icon-wrap 为 &-icon-wrap-shadow,新增 &-icon-wrap 类以分离阴影样式 |
| src/.../checkbox/checkbox.taro.tsx | 图标使用 View 包裹,标签渲染改为 Text,移除多余的片段包装 |
| src/.../checkbox/checkbox.tsx | 将 div 元素的类名从 ${classPrefix}-icon-wrap 修改为 ${classPrefix}-icon-wrap-shadow |
Sequence Diagram(s)
sequenceDiagram
participant Checkbox as Checkbox组件
participant IconRenderer as 图标渲染
participant LabelRenderer as 标签渲染
Checkbox->>IconRenderer: 调用 renderIcon()
IconRenderer->>View: 用 View 包裹图标
Checkbox->>LabelRenderer: 调用 renderLabel()
LabelRenderer->>Text: 用 Text 渲染标签
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 修复 checkbox 和 radio 布局错乱 (#3164) | ✅ |
Possibly related PRs
- jdf2e/nutui-react#2730: 该PR中的更改,特别是对
checkbox.scss中CSS类的重命名以及在checkbox.tsx中的相应更新,与本PR中对Checkbox组件的修改直接相关。
Suggested reviewers
- xiaoyatong
- irisSong
Poem
我是一只快乐的小兔子,
跳跃间见到代码的新风采,
样式分离清晰明了,
渲染结构也变得优雅,
布局错乱从此远离,
跟着改动一起欢快跳跃~ 🐰✨
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
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)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai planto trigger planning for file edits and PR creation.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 87.19%. Comparing base (
cc94ce3) to head (c968861). Report is 6 commits behind head on feat_v3.x.
Additional details and impacted files
@@ Coverage Diff @@
## feat_v3.x #3166 +/- ##
=============================================
+ Coverage 87.18% 87.19% +0.01%
=============================================
Files 279 279
Lines 18537 18544 +7
Branches 2820 2822 +2
=============================================
+ Hits 16161 16170 +9
+ Misses 2371 2369 -2
Partials 5 5
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.