Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@kimteayon
Copy link
Collaborator

@kimteayon kimteayon commented Nov 28, 2025

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ⌨️ Accessibility improvement
  • ❓ Other (about what?)

🔗 Related Issues

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Language Changelog
🇺🇸 English
🇨🇳 Chinese 补齐 Sender.Switch 语义化结构

Summary by CodeRabbit

发布说明

  • 新功能

    • 增强 SenderSwitch 的样式自定义:支持语义级别的 classNames 与 styles 映射(root、content、icon、title),并改进默认合并行为,按钮子部件样式映射同步扩展。
  • 文档

    • 在中/英文文档中新增 Sender 与 Sender.Switch 的语义化 DOM 示例及演示页面。
  • 样式/细节

    • 调整了示例中某些 Switch 子节点的 JSX 包裹结构(不影响行为)。

✏️ Tip: You can customize this high-level summary in your review settings.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 28, 2025

Prepare preview

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 28, 2025

Note

Other AI code review bot(s) detected

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

📝 Walkthrough

Walkthrough

为 SenderSwitch 组件引入语义化样式层,新增 classNamesstyles props(支持 root/content/icon/title),组件内部合并逻辑改为同时考虑上下文与传入值;新增演示文件 _semantic-switch.tsx 并在中/英文文档中加入对应示例小节;另对 demo 中一处 Switch JSX 包裹由 fragment 改为 div

Changes

内聚体 / 文件(s) 变更摘要
SenderSwitch 组件 API 扩展
packages/x/components/sender/SenderSwitch.tsx
新增本地类型 SemanticType = 'root' | 'content' | 'icon' | 'title';扩展 SenderSwitchProps,加入 classNames?: Partial<Record<SemanticType, string>>styles?: Partial<Record<SemanticType, React.CSSProperties>>;在组件内部默认 classNames/styles 为空对象;将样式/类名合并改为同时考虑 context 派生值(contextStyles/contextClassNames)与传入语义键值(包含 root),并调整 Button 调用以传递新的语义映射(root/icon/content)。
演示文件(新增)
packages/x/components/sender/demo/_semantic-switch.tsx
新增演示组件 App,通过 useLocale 获取文案并使用 SemanticPreview 展示 Sender.Switch 的四个语义槽(root、icon、title、content),包含自定义 checked/unchecked 标签与图标示例。
演示文件(细微变更)
packages/x/components/sender/demo/agent.tsx
在 Deep Think 示例的 Switch 中,将 checkedChildren/unCheckedChildren 的包裹由空 fragment 改为 div 包裹,渲染结构轻微调整,无逻辑变化。
文档(中文/英文)
packages/x/components/sender/index.zh-CN.md
packages/x/components/sender/index.en-US.md
在「Semantic DOM」部分新增两个小节:Sender 与 Sender.Switch,分别引用演示文件(含中/英文文档更新),展示语义化样式示例。

Estimated code review effort

🎯 3 (中等) | ⏱️ ~20 分钟

需要特别关注的点:

  • 样式与类名合并优先级:context 值、props 值、组件默认值之间的覆盖关系是否明确且一致。
  • SenderSwitch 中把原有 switch 层级拆为语义化 keys(尤其 rootcontent 的对齐)对现有使用方的兼容性。
  • Button 调用处的新样式/类名映射是否与 Button 的现有 API 完全兼容(key 名称、props 传递格式)。
  • 新增演示与文档中的示例是否能真实反映运行时的 className 与 style 输出。

庆祝诗

🐰 我在代码田间跳跃,语义花开四朵,
根与容、图与题,样式轻轻抹多。
演示亮相文档旁,微改悄然不扰戏,
兔子鼓掌,胡萝卜甜又多一朵。 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题与主要变更相关联。PR 引入了 Sender.Switch 的语义化 API(添加了 classNames 和 styles 属性),新增了演示文件和文档示例,这与「fix semantic of Sender.Switch」的表述相符。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch semantic-dom

📜 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 185e9ed and 23e57cd.

⛔ Files ignored due to path filters (2)
  • packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • packages/x/components/sender/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • packages/x/components/sender/demo/_semantic-switch.tsx (1 hunks)
  • packages/x/components/sender/demo/agent.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/x/components/sender/demo/_semantic-switch.tsx
⏰ 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: build preview
  • GitHub Check: test
  • GitHub Check: size
  • GitHub Check: test
  • GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
packages/x/components/sender/demo/agent.tsx (1)

205-214: Deep Think 开关文案增加 div 包裹整体是合理的

这里将 checkedChildren / unCheckedChildren 从 fragment 改为用 <div> 包裹整段内容,看起来是为了给 Sender.Switch 提供稳定的单根节点,方便内部做语义化结构和样式挂载,和本 PR 的目的是一致的,逻辑与状态控制都不受影响 👍。
唯一需要确认的是:如果 Switch 内部对 label 做了 inline/flex 布局,这里新增的块级 div 是否会改变行内对齐或高度(目前 demo 看上去应该问题不大,但建议在文档站上实际跑一下确认下视觉效果)。


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @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 Sender.Switch component by enhancing its semantic structure, enabling more precise customization through new classNames and styles props. This change allows developers to target and style specific sub-elements of the switch, improving flexibility and maintainability. A new demo and updated documentation illustrate these new capabilities.

Highlights

  • Enhanced Semantic Styling for Sender.Switch: Introduced classNames and styles props to SenderSwitchProps, allowing developers to apply specific classes and styles to the root, content, icon, and title parts of the component.
  • Improved Component Structure: The internal implementation of Sender.Switch now correctly maps and applies these semantic classNames and styles to its sub-elements, providing more granular control over its appearance.
  • New Semantic Demo: A new demo file (_semantic-switch.tsx) has been added to showcase the usage and effect of the new semantic styling capabilities for Sender.Switch.
  • Documentation Update: The Chinese documentation for Sender components has been updated to include a dedicated section for the semantic DOM of Sender.Switch, linking to the new demo.
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@dosubot dosubot bot added the bug Something isn't working label Nov 28, 2025
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a 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.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Nov 28, 2025

Deploying ant-design-x with  Cloudflare Pages  Cloudflare Pages

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

View logs

Copy link
Contributor

@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 (4)
packages/x/components/sender/SenderSwitch.tsx (2)

12-42: Sender.Switch 新增语义化 props 设计合理,但类型命名略易混淆

  • 基于 SemanticType = 'root' | 'content' | 'icon' | 'title' 扩展 classNames/styles 很符合「语义 DOM」的方向,实现也比较直观。
  • 不过当前文件的 SemanticTypeSenderHeader.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 的 icon slot;
    • 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

📥 Commits

Reviewing files that changed from the base of the PR and between 9b946b1 and 0412810.

📒 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 合并顺序为:switchClsclassNamerootClassNamecontextConfig.classNames.switchcontextClassNames.switchclassNames.root,样式合并顺序为:stylecontextConfig.styles.switchcontextStyles.switchstyles.root
  • 这意味着:组件外层直接传入的 classNames.root / styles.root 拥有最高优先级,其次是 Sender 上下文(SenderContext),最后才是全局 useXComponentConfig('sender')
  • 如果设计目标是「调用方 > SenderContext > 组件配置」,当前实现是正确的;若希望 Provider 层(context)拥有更高或更低优先级,则可能需要调整顺序。建议你再按产品预期确认一下。

Also applies to: 100-107, 120-125

@github-actions
Copy link
Contributor

github-actions bot commented Nov 28, 2025

size-limit report 📦

Path Size
packages/x/dist/antdx.min.js 55.41 KB (+20 B 🔺)
packages/x-sdk/dist/x-sdk.min.js 7.29 KB
packages/x-markdown/dist/x-markdown.min.js 50.77 KB
packages/x-markdown/dist/plugins/code-high-light.min.js 317.77 KB
packages/x-markdown/dist/plugins/latex.min.js 61.95 KB
packages/x-markdown/dist/plugins/mermaid.min.js 885.67 KB

@codecov
Copy link

codecov bot commented Nov 28, 2025

Bundle Report

Changes will increase total bundle size by 1.36MB (46.49%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name Size Change
x-markdown-array-push 4.15MB 1.36MB (48.8%) ⬆️⚠️

Affected Assets, Files, and Routes:

view changes for bundle: x-markdown-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
mermaid.min.js (New) 4.15MB 4.15MB 100.0% 🚀
code-high-light.js (Deleted) -2.79MB 0 bytes -100.0% 🗑️

@codecov
Copy link

codecov bot commented Nov 30, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.04%. Comparing base (59b9416) to head (23e57cd).
⚠️ Report is 1 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Nov 30, 2025
@kimteayon kimteayon merged commit 96b69b5 into main Nov 30, 2025
16 checks passed
@kimteayon kimteayon deleted the semantic-dom branch November 30, 2025 16:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants