-
-
Notifications
You must be signed in to change notification settings - Fork 998
fix: fix semantic of Sender.Switch #1396
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
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough为 SenderSwitch 组件引入语义化样式层,新增 Changes
Estimated code review effort🎯 3 (中等) | ⏱️ ~20 分钟 需要特别关注的点:
庆祝诗
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🔇 Additional comments (1)
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. Comment |
Summary of ChangesHello @kimteayon, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refines the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request introduces semantic styling capabilities to the Sender.Switch component by adding classNames and styles props. The implementation is mostly sound, but I've found a bug in how the title semantic part is applied and a small issue in the new demo file. My review includes suggestions to fix these issues.
Deploying ant-design-x with
|
| Latest commit: |
23e57cd
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bcd4ae80.ant-design-x.pages.dev |
| Branch Preview URL: | https://semantic-dom.ant-design-x.pages.dev |
There was a problem hiding this 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 (4)
packages/x/components/sender/SenderSwitch.tsx (2)
12-42: Sender.Switch 新增语义化 props 设计合理,但类型命名略易混淆
- 基于
SemanticType = 'root' | 'content' | 'icon' | 'title'扩展classNames/styles很符合「语义 DOM」的方向,实现也比较直观。- 不过当前文件的
SemanticType与SenderHeader.tsx中导出的SemanticType = 'header' | 'content'同名但含义不同,后续阅读/搜索时可能有些迷惑,建议考虑是否用更具体的本地别名(例如SenderSwitchSemanticType)或抽出一个统一的 sender 语义类型定义。- 同时,Sender.Switch 的 API 文档(
index.zh-CN.md中的 Sender.Switch 表格)目前还没有列出classNames/styles两个属性,建议在文档里也补一行,指向下方的 Semantic DOM 小节,以保持和 Sender / Sender.Header 的 API 一致性。
131-140: 语义到 Button slots 的映射有些隐晦,建议补一行注释或在 Semantic DOM 文档中说明
- 当前映射关系是:
styles.icon/classNames.icon→ Button 的iconslot;styles.content/classNames.content→ Button 的root(并附带${switchCls}-content);styles.title/classNames.title→ Button 的content(包裹文案的内部节点)。- 这是为了把 Sender.Switch 的语义
root / content / title / icon映射到 Button 的 DOM 结构,整体思路没问题,但从代码本身不太直观,后续维护者需要对 Button 的 DOM 结构比较了解才看得懂。- 建议在这一段上方加一行简单注释,简述「为什么 content/title 要这样映射」,或者在 Semantic DOM 文档中用一小段文字/结构图说明,以减少未来的理解成本。
packages/x/components/sender/demo/_semantic-switch.tsx (1)
23-45: SemanticPreview 的componentName建议改为'Sender.Switch'
- 当前 demo 是专门用于「Sender.Switch 语义 DOM」的预览,但这里传入的
componentName="Sender",和文档里新增的小节标题### Sender.Switch以及代码引用路径(_semantic-switch.tsx)不太一致。- 如果
SemanticPreview会在展示上直接使用componentName(比如标题、锚点或搜索),建议将其改为'Sender.Switch',避免读者误以为这是 Sender 本体的语义结构示例。可以考虑修改为:
- <SemanticPreview - componentName="Sender" + <SemanticPreview + componentName="Sender.Switch"packages/x/components/sender/index.zh-CN.md (1)
151-164: Semantic DOM 文档已补充示例,但 Sender.Switch API 表格建议同步暴露语义化 props
- 新增的 “Semantic DOM” 小节下对 Sender 和 Sender.Switch 分别提供了示例代码,这一点很好,能直观看到
root / icon / title / content的语义结构。- 但上面的 Sender.Switch API 表格目前只列出了基础行为属性,没有提到
classNames/styles,而实现上SenderSwitchProps已经支持这两个基于语义 key 的配置。- 为了和 Sender / Sender.Header 的文档保持一致,也方便用户发现语义化定制入口,建议在 Sender.Switch 的表格中新增两行,例如(描述可以复用 Sender 那里的文案并指向 Semantic DOM 小节):
| classNames | 样式类名,按语义节点配置 | [见下](#semantic-dom) | - | - | | styles | 语义化定义样式 | [见下](#semantic-dom) | - | - |Also applies to: 193-202
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/x/components/sender/SenderSwitch.tsx(6 hunks)packages/x/components/sender/demo/_semantic-switch.tsx(1 hunks)packages/x/components/sender/index.zh-CN.md(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/x/components/sender/SenderSwitch.tsx (1)
packages/x/components/sender/SenderHeader.tsx (1)
SemanticType(14-14)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: test
- GitHub Check: size
- GitHub Check: build preview
- GitHub Check: test
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
packages/x/components/sender/SenderSwitch.tsx (1)
58-60: 根节点 classNames/styles 合并顺序看起来合理,请确认优先级是否符合预期
- className 合并顺序为:
switchCls→className→rootClassName→contextConfig.classNames.switch→contextClassNames.switch→classNames.root,样式合并顺序为:style→contextConfig.styles.switch→contextStyles.switch→styles.root。- 这意味着:组件外层直接传入的
classNames.root/styles.root拥有最高优先级,其次是 Sender 上下文(SenderContext),最后才是全局useXComponentConfig('sender')。- 如果设计目标是「调用方 > SenderContext > 组件配置」,当前实现是正确的;若希望 Provider 层(context)拥有更高或更低优先级,则可能需要调整顺序。建议你再按产品预期确认一下。
Also applies to: 100-107, 120-125
size-limit report 📦
|
Bundle ReportChanges will increase total bundle size by 1.36MB (46.49%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: x-markdown-array-pushAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1396 +/- ##
=======================================
Coverage 94.04% 94.04%
=======================================
Files 144 144
Lines 3710 3712 +2
Branches 1041 1029 -12
=======================================
+ Hits 3489 3491 +2
Misses 219 219
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|

中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
发布说明
新功能
文档
样式/细节
✏️ Tip: You can customize this high-level summary in your review settings.