feat: support section and title

[thinkasany]

Summary by CodeRabbit

• 样式更新

  • 对话框样式类名从 content 更新为 section
  • 更新了模态框相关的样式变量名称
  • 增强了对话框组件的样式灵活性

• 代码重构

  • 重新定义了模态框类名和样式的类型定义
  • 简化了类型声明，提高代码语义清晰度

• 测试调整

  • 更新测试用例中的选择器和样式断言
  • 适配新的类名和样式属性

[vercel]

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 9, 2025 6:21am

[coderabbitai]

概述

步骤说明

这个拉取请求主要涉及对话框（Dialog）组件的样式和类型定义的重构。更改集中在将与对话框相关的类名和变量从"content"重命名为"section"，并优化了相关的类型定义和测试用例。

变更

文件	变更摘要
assets/bootstrap/Dialog.less	类名从 .content 更改为 .section
assets/bootstrap/variables.less	模态框相关变量从 content 重命名为 section
assets/index/Dialog.less	类名从 &-content 更改为 &-section
src/Dialog/Content/Panel.tsx	更新类名和样式处理，增加动态类名和样式支持
src/IDialogPropTypes.tsx	重构类型定义，使用更语义化的类型
tests/index.spec.tsx	更新测试用例中的类名和样式选择器
tests/portal.spec.tsx	更新选择器以匹配新的类名

诗歌

🐰 对话框的蜕变，代码如诗
从内容到区段，重构飞驰
类名轻舞，变量轻唱
兔子微笑，优雅绽放
重构之美，在指尖流淌 🌈

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between c920f3f and c49002f.

⛔ Files ignored due to path filters (1)

• tests/__snapshots__/index.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (7)

• assets/bootstrap/Dialog.less (2 hunks)
• assets/bootstrap/variables.less (2 hunks)
• assets/index/Dialog.less (1 hunks)
• src/Dialog/Content/Panel.tsx (3 hunks)
• src/IDialogPropTypes.tsx (2 hunks)
• tests/index.spec.tsx (5 hunks)
• tests/portal.spec.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (2)

• assets/index/Dialog.less
• assets/bootstrap/variables.less

🔇 Additional comments (13)

tests/portal.spec.tsx (2)

36-38: 测试用例选择器更新正确！

选择器从 .rc-dialog-content 更新为 .rc-dialog-section 的修改与组件重构保持一致。

---

55-56: 测试用例选择器更新正确！

选择器更新保持了测试用例的功能完整性。

src/IDialogPropTypes.tsx (3)

4-4: 语义类型定义清晰明确！

SemanticName 类型使用联合类型定义了对话框的各个部分，提高了代码的可维护性。

---

6-8: 类型定义优化合理！

使用 Partial<Record> 重构 ModalClassNames 和 ModalStyles 类型，提供了更好的类型安全性和灵活性。

---

19-19: 类型定义格式优化！

移除了不必要的空格，使代码更整洁。

src/Dialog/Content/Panel.tsx (3)

97-101: 标题样式支持增强！

为标题元素添加了自定义类名和样式支持，提高了组件的可定制性。

---

118-118: 代码简化合理！

简化了关闭按钮禁用状态的判断逻辑，提高了代码可读性。

---

135-136: 类名更新符合语义！

将 content 更新为 section，使类名更符合语义化要求。

tests/index.spec.tsx (3)

402-402: 测试用例更新正确！

modalRender 测试用例已更新使用新的 section 选择器。

---

592-592: 类名定制支持完善！

新增了对 section 类名的自定义支持，保持了组件的可定制性。

Also applies to: 607-607

---

622-623: 样式定制支持完善！

新增了对 section 和 title 样式的自定义支持，增强了组件的灵活性。

Also applies to: 638-639

assets/bootstrap/Dialog.less (2)

127-129: 媒体查询中的类名更新正确！

在响应式样式中保持了命名一致性，同时保留了原有的阴影效果。

---

37-41: 类名重命名和变量引用更新看起来不错！

类名从 content 改为 section 的修改保持了一致性，相关的背景色和边框变量也都已更新。

请运行以下脚本以验证整个代码库中的命名一致性：

✅ Verification successful

命名更改验证完成，需要更新注释

代码中的类名和变量引用已经完全更新为 section，保持了一致性。不过在 Dialog.less 和 variables.less 中的注释文档仍然使用旧的 "content" 术语，建议在后续更新中统一更新这些注释。

• assets/bootstrap/Dialog.less 中的注释 "rc-dialog content" 需要更新
• assets/bootstrap/variables.less 中的变量说明注释需要更新

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查是否还有遗留的 modal-content 相关命名
rg "modal-content|content[\s{]" --type less

Length of output: 538

---

Script:

#!/bin/bash
# Check variable declarations in variables.less
echo "=== Checking variables.less ==="
rg "^@modal-" assets/bootstrap/variables.less

# Check for any remaining modal-content class usage
echo -e "\n=== Checking for modal-content class usage ==="
rg "\.modal-content|&-content" --type less

Length of output: 842

Finishing Touches

• 📝 Generate Docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.44%. Comparing base (c920f3f) to head (c49002f).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #468   +/-   ##
=======================================
  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.