nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

fix(checkbox): 列表模式切换选中态,布局错误

Open oasis-cloud opened this issue 8 months ago • 2 comments

Closes #3164

Summary by CodeRabbit

  • 样式
    • 优化了复选框视觉效果:将图标阴影效果拆分为独立样式,确保视觉层次更加清晰,同时保留了原有风格。
    • 调整了组件内部展示结构:图标采用统一容器包装,标签改为文本呈现,提升了整体渲染表现和用户体验。

oasis-cloud avatar Apr 10 '25 06:04 oasis-cloud

[!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.snap is excluded by !**/*.snap

CodeRabbit 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 the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in 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 @coderabbitai in 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 @coderabbitai in 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 pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file 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.

coderabbitai[bot] avatar Apr 10 '25 06:04 coderabbitai[bot]

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.

codecov[bot] avatar Apr 10 '25 06:04 codecov[bot]