feat: support body and content semantic DOM

[zombieJ]

Summary

• rename the panel DOM classes from content-holder/content/tabpane to body-holder/body/content
• support body semantic className/style on the panel body wrapper
• keep content semantic className/style on the actual tabpanel
• update styles, tests, and snapshots for the new semantic structure

Close #991

Test

• ut run test
• ut run lint
• ut run compile:style

Summary by CodeRabbit

• 新功能

  • Tabs 面板现在支持为 body 区域单独设置样式和 className。
  • 新增 body 语义支持，可更细致地控制 Tabs 各区域外观。

• 改进

  • 调整了 Tabs 面板的结构与样式命名，统一了内容区域的布局表现。
  • 优化了顶部、底部、左侧和右侧切换时的布局规则。

• 测试

  • 更新了相关测试，覆盖 body、content、header 的样式与类名配置。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tabs	Ready	Preview, Comment	Jun 26, 2026 7:46am

[coderabbitai]

Walkthrough

Tabs 现在引入了 body 语义槽，并把面板容器拆成 body/content 两层；相关样式选择器与测试断言也同步改写。

Changes

Tab body/content 结构调整

Layer / File(s)	Summary
语义键与 props 合同 src/Tabs.tsx, src/TabPanelList/index.tsx	SemanticName 增加 body；TabPanelListProps 新增 bodyStyle、bodyClassName，并将 animated、tabPosition 改为必填；Tabs 继续向面板列表传递新的 body 语义值。
面板容器渲染 src/TabPanelList/index.tsx	TabPanelList 改用 bodyPrefixCls 和 contentPrefixCls 组织外层与内容层 className，并将 bodyStyle、bodyClassName 应用到外层容器；CSSMotion 内的隐藏类名与 TabPane 前缀切换为 content 语义。
样式选择器切换 assets/panels.less, assets/position.less	面板布局与 order 规则的选择器从 content 改为 body，同时后续样式块的起始选择器切换到 content。
测试断言更新 tests/index.test.tsx	destroyOnHidden 相关断言改为检查 .rc-tabs-content；类名与样式测试新增 body 断言，并更新对 .rc-tabs-body、.rc-tabs-content、.rc-tabs-nav 的期望。

Sequence Diagram(s)

sequenceDiagram
  participant Tabs
  participant TabPanelList
  participant CSSMotion
  participant TabPane
  Tabs->>TabPanelList: pass bodyStyle, bodyClassName, styles.body, tabsClassNames.body
  TabPanelList->>CSSMotion: render panel body with contentPrefixCls
  CSSMotion->>TabPane: render content and hidden class with contentPrefixCls

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• react-component/tabs#784：同样扩展 SemanticName 和 classNames/styles 的语义槽映射。
• react-component/tabs#786：同样调整 src/TabPanelList/index.tsx、src/Tabs.tsx 和测试中的面板样式/类名传递。
• react-component/tabs#900：同样修改 src/Tabs.tsx 的 SemanticName 联合类型。

Poem

我是小兔，蹦进新面板，
body 和 content 分开站。
className 像胡萝卜叶，
style 轻轻铺满月光湾，
咔嚓一口，变化真好看。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	标题准确概括了此次为 Tabs 面板新增 body 和 content 语义 DOM 支持的主要改动。
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/semantic-body-content

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.98%. Comparing base (926f67e) to head (8e424f7).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #993   +/-   ##
=======================================
  Coverage   98.98%   98.98%           
=======================================
  Files          18       18           
  Lines         787      788    +1     
  Branches      232      235    +3     
=======================================
+ Hits          779      780    +1     
  Misses          8        8           

☔ View full report in Codecov by Harness.
📢 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.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gemini-code-assist]

Code Review

This pull request refactors the internal structure of the Tabs component by renaming the main container elements and introducing new bodyStyle and bodyClassName props. Specifically, the class names have been updated to use -body for the main body wrapper and -content for the individual tab panes. A review comment identifies a potential runtime error in TabPanelList where the optional animated prop is accessed without a fallback, suggesting a default value during destructuring.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[zombieJ]

@gemini-code-assist review

[gemini-code-assist]

Code Review

This pull request refactors the Tabs component by renaming content-related classes to body-related classes (e.g., rc-tabs-content to rc-tabs-body and rc-tabs-tabpane to rc-tabs-content) and introducing bodyStyle and bodyClassName props. The review feedback points out a potential issue where an optional tabPosition prop could result in an invalid class name like rc-tabs-body-undefined if not guarded.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[zombieJ]

@gemini-code-assist review

[gemini-code-assist]

Code Review

This pull request refactors the tab component's structure by renaming the content wrapper to body and the individual tab panes to content. It also introduces new bodyStyle and bodyClassName properties to allow custom styling of the body element, and updates the corresponding LESS styles, TypeScript definitions, and tests to reflect these changes. I have no feedback to provide as there are no review comments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.