Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support root style #469

Merged
merged 3 commits into from
Jan 10, 2025
Merged

Conversation

thinkasany
Copy link
Contributor

@thinkasany thinkasany commented Jan 10, 2025

Summary by CodeRabbit

  • 新功能

    • 为对话框组件添加了 rootStyle 属性,允许用户自定义根元素的内联样式。
  • 改进

    • 增强了对话框组件的样式定制灵活性。
    • 更新了测试用例,以验证新属性的正确渲染。

Copy link

vercel bot commented Jan 10, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
dialog ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 10, 2025 6:25am

Copy link

coderabbitai bot commented Jan 10, 2025

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/index.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.

概述

遍历

Dialog 组件的更改涉及向组件的 props 添加了一个新属性 rootStyle。此属性用于设置包裹对话框的根 <div> 元素的内联样式。rootStyle 将与其他样式合并到 mergedStyle 对象中,然后应用于根 <div>。此外,wrapStylebodyStylemaskStyle 的弃用警告保持不变,但 wrapClassName 的警告仍然存在。组件的整体结构和逻辑保持不变,没有删除或修改现有功能。

变更

文件 变更摘要
src/Dialog/index.tsx 添加 rootStyle 属性,用于设置对话框根元素的内联样式
src/IDialogPropTypes.tsx IDialogPropTypes 类型中添加可选的 rootStyle?: CSSProperties 属性
tests/index.spec.tsx 更新测试用例以验证 rootStyle 属性的渲染,修改描述并添加断言检查样式

可能相关的 PRs

  • feat: support section and title #468: 此 PR 的更改涉及将 CSS 类从 content 重命名为 section,与主 PR 中添加的 rootStyle 属性一致,因为两者都涉及对 Dialog 组件的样式和结构的修改。

建议的审阅者

  • zombieJ

诗歌

🐰 对话框的魔法,样式新增添
根元素闪耀,代码优雅绽放
rootStyle 轻盈飞舞
样式之舞,悄然绽放
兔子微笑,代码欢畅 🎨


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?

❤️ Share
🪧 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. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @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.

Copy link

codecov bot commented Jan 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.44%. Comparing base (f8c0131) to head (83ad572).
Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #469   +/-   ##
=======================================
  Coverage   99.44%   99.44%           
=======================================
  Files           8        8           
  Lines         181      181           
  Branches       60       60           
=======================================
  Hits          180      180           
  Misses          1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/Dialog/index.tsx (1)

179-179: 建议考虑样式合并策略

建议考虑将 rootStyle 与其他样式属性一样添加到 modalStyles 中统一管理,以保持一致性。

建议这样修改:

- style={rootStyle}
+ style={{ ...rootStyle, ...modalStyles?.root }}

同时在 ModalStyles 类型中添加 root 属性:

export type ModalStyles = Partial<Record<SemanticName | 'root', CSSProperties>>;
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f8c0131 and b2a45ad.

📒 Files selected for processing (2)
  • src/Dialog/index.tsx (2 hunks)
  • src/IDialogPropTypes.tsx (1 hunks)
🔇 Additional comments (3)
src/IDialogPropTypes.tsx (1)

14-14: 新增的 rootStyle 属性实现合理!

新增的 rootStyle 属性类型定义正确,与其他样式属性保持一致,可以用于自定义对话框根元素的样式。

src/Dialog/index.tsx (2)

44-44: 属性解构位置恰当!

rootStyle 属性的解构位置正确,与其他样式相关属性放在一起,便于维护。


Line range hint 50-57: 建议更新样式属性废弃警告

当前代码对其他样式属性(wrapStyle、bodyStyle、maskStyle)都有废弃警告提示,建议考虑是否也应该将 rootStyle 纳入统一的样式管理方案中。

运行以下脚本检查其他相关组件是否也在使用类似的样式命名模式:

@zombieJ
Copy link
Member

zombieJ commented Jan 10, 2025

test 加一个

@zombieJ zombieJ merged commit d5ee44b into react-component:master Jan 10, 2025
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants