refactor: use css logical properties

[li-jia-nan]

Summary by CodeRabbit

• 新功能

• Bug 修复

• 文档

  • 更新示例代码，将内边距/间距写法改为 CSS 逻辑属性，便于理解在不同文字方向下的一致表现。

• 样式

  • 页签项与“更多”按钮的水平间距统一改用 margin-inline-start，提升 LTR/RTL 一致性与可维护性，视觉效果保持不变。

• 测试

  • 调整断言以检查 marginInlineStart，确保在逻辑属性生效后布局间距仍按预期工作。

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
tabs	Ready	Preview	Comment	Oct 13, 2025 10:39pm

[coderabbitai]

Walkthrough

将多处物理方向的 marginLeft/动态左右 margin 替换为 CSS 逻辑属性 marginInlineStart；相应更新示例与测试断言。未改动导出接口与控制流。

Changes

Cohort / File(s)	Summary
Docs 示例调整 docs/examples/extra.tsx	将 marginLeft: '15px' 替换为 marginInlineStart: '15px'。
TabNavList 样式逻辑化 src/TabNavList/OperationNode.tsx, src/TabNavList/index.tsx	用 marginInlineStart 取代 RTL 条件式左右 margin；在顶部/底部位置统一设置 tabNodeStyle.marginInlineStart = tabBarGutter，保留非顶/底部的 marginTop。
测试断言更新 tests/index.test.tsx	将期望样式从 marginLeft 改为 marginInlineStart（undefined 与 '23px'）。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• zombieJ

Poem

兔子挥笔排版新，
左右不争向内匀。
inlineStart 悄然进，
标签行间更清真。
耳朵一竖点点心，🥕
测试也随风而循。

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 标题简洁地概括了此次重构的核心：使用 CSS 逻辑属性替换物理边距样式。它清晰明了，没有使用歧义或冗余的描述。团队成员在查看变更历史时能立即理解主要改动。
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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 css-up

---

📜 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 1169726 and 253cf18.

📒 Files selected for processing (4)

• docs/examples/extra.tsx (1 hunks)
• src/TabNavList/OperationNode.tsx (1 hunks)
• src/TabNavList/index.tsx (1 hunks)
• tests/index.test.tsx (1 hunks)

🔇 Additional comments (4)

docs/examples/extra.tsx (1)

120-120: LGTM！使用 CSS 逻辑属性正确支持 RTL。

使用 marginInlineStart 替代 marginLeft 能够自动适应 RTL/LTR 布局方向，这是最佳实践。

src/TabNavList/index.tsx (1)

424-429: LGTM！重构简化了代码并改进了 RTL 支持。

使用 marginInlineStart 替代条件设置的 marginLeft/marginRight 使代码更简洁，并自动适应文本方向。保持 marginTop 用于垂直标签页布局是正确的。

src/TabNavList/OperationNode.tsx (1)

179-181: LGTM！消除了 RTL 条件逻辑。

使用 marginInlineStart 替代动态计算的属性键（rtl ? 'marginRight' : 'marginLeft'）使代码更简洁，并自动适应文本方向。

tests/index.test.tsx (1)

281-297: LGTM！测试正确反映了实现更改。

测试断言已正确更新为检查 marginInlineStart 而非 marginLeft，并且保持了对垂直标签页 marginTop 的测试。第一个标签页不设置间距，后续标签页设置 marginInlineStart，这与实现逻辑一致。

---

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 and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @li-jia-nan, I'm Gemini Code Assist¹! 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 introduces a refactoring effort to modernize the styling approach by adopting CSS logical properties. The primary change involves replacing explicit marginLeft and marginRight properties, often used with conditional logic for RTL support, with marginInlineStart. This change simplifies the codebase, improves maintainability, and inherently provides better internationalization support by allowing margins to adapt automatically to the document's writing mode.

Highlights

• CSS Logical Properties Adoption: Refactored CSS margin properties to utilize logical properties, specifically marginInlineStart, across various components.
• Simplified RTL Handling: Replaced conditional marginLeft or marginRight assignments based on rtl (right-to-left) direction with the more declarative marginInlineStart.
• Improved Internationalization: Enhanced the application's support for internationalization and right-to-left layouts by using direction-agnostic CSS properties.

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

[gemini-code-assist]

Code Review

This pull request correctly refactors several components to use CSS logical properties (marginInlineStart) instead of physical properties (marginLeft, marginRight) that were conditionally applied based on the rtl prop. This change simplifies the code, improves maintainability, and is a good step towards modernizing the styling for better internationalization support. The changes across all files are correct and well-implemented. I have no further suggestions.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.98%. Comparing base (1169726) to head (253cf18).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #919      +/-   ##
==========================================
- Coverage   98.98%   98.98%   -0.01%     
==========================================
  Files          18       18              
  Lines         789      788       -1     
  Branches      230      235       +5     
==========================================
- Hits          781      780       -1     
  Misses          8        8              

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/TabNavList/index.tsx (1)

441-441: 可选：更新注释以反映逻辑属性的使用

注释提到 "margin left"，但代码现在使用 marginInlineStart。建议更新注释以提高准确性。

-        /* first node should not have margin left */
+        /* first node should not have inline start margin */
         style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1169726 and 65a49dd.

📒 Files selected for processing (3)

• docs/examples/extra.tsx (1 hunks)
• src/TabNavList/OperationNode.tsx (1 hunks)
• src/TabNavList/index.tsx (1 hunks)

🔇 Additional comments (3)

docs/examples/extra.tsx (1)

120-120: 改动正确！

将 marginLeft 替换为 marginInlineStart 符合 PR 目标，正确支持 RTL 布局。

src/TabNavList/OperationNode.tsx (1)

179-181: 重构正确，代码更简洁！

使用 marginInlineStart 替代条件判断 rtl ? 'marginRight' : 'marginLeft'，逻辑属性会自动处理 RTL/LTR 方向。这简化了代码并提升了可维护性。

src/TabNavList/index.tsx (1)

424-426: 通过：已在所有源码中替换 marginInlineStart 并且未发现遗留 marginLeft/marginRight。 LTR 模式下 marginInlineStart 会映射为 margin-left，测试现有断言无需修改。