feat: add 'close' semantic name and update TabNode styles and classNames #900

coding-ice · 2025-09-24T07:59:27Z

Summary by CodeRabbit

新功能
- 支持按语义键为 Tab 项（item）与关闭按钮（close）分别设置 styles 与 classNames，便于定制。
破坏性变更
- 组件接口不再接受单一的 style 与 className，需迁移到基于 SemanticName 的 styles 与 classNames（包括新增的 'close' 语义键）。
测试
- 新增用例验证可编辑标签的关闭按钮接受自定义类名与样式。

coderabbitai · 2025-09-24T07:59:36Z

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

将 Tab 组件的样式/类名 API 从单一的 style/className 重构为按语义键的 styles/classNames 映射，新增语义键 close；更新 TabNavList 传参以按语义传递 item 与 close，并修改 TabNode 的 props 与内部应用；新增测试覆盖关闭按钮的类名与样式。

Changes

Cohort / File(s)	Summary
样式 API 语义化重构（TabNode） `src/TabNavList/TabNode.tsx`	将 `style?: React.CSSProperties` 与 `className?: string` 替换为 `styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'item' \| 'close'>` 与 `classNames?: Pick<Partial<Record<SemanticName, string>>, 'item' \| 'close'>`；改用 `styles` 与 `classNames`（本地别名 `tabNodeClassNames`）解构并在 DOM 上使用 `styles?.item`/`tabNodeClassNames?.item` 与删除按钮的 `styles?.close`/`tabNodeClassNames?.close`；增加 `SemanticName` 导入。
样式传递更新（TabNavList 渲染逻辑） `src/TabNavList/index.tsx`	渲染 `TabNode` 时改为传入按语义的 `classNames` 与 `styles` 映射（包含 `item` 与 `close`），保持首个 tab 的 `item` 合并逻辑但通过新的映射传递，显式为关闭按钮提供 `close` 语义的类名与样式。
类型扩展（SemanticName 增加 close） `src/Tabs.tsx`	扩展导出类型 `SemanticName`，新增 `'close'`，以支持对关闭按钮的按语义 className/style 映射。
测试（关闭按钮样式/类名） `tests/index.test.tsx`	新增测试用例验证可编辑 Tabs 的关闭按钮能接收并应用自定义 `classNames.close` 与 `styles.close`。

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant App as App
  participant Tabs as Tabs
  participant Nav as TabNavList
  participant Node as TabNode

  App->>Tabs: render({...classNames, ...styles})
  Tabs->>Nav: render(list, {...classNames, ...styles})
  Note over Tabs,Nav: 语义键包含 item / close / ...
  loop 每个 tab
    Nav->>Node: render({ classNames: {item, close}, styles: {item, close}, ... })
    Node->>Node: 组装 DOM，使用 classNames?.item / styles?.item
    alt 有关闭按钮
      Node->>Node: 使用 classNames?.close / styles?.close 渲染关闭按钮
    end
  end

  Note right of Node: 新增 `close` 语义键用于关闭按钮的样式与类名

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat: tab support classnames and styles #784 — 与本次变更在 TabNode/TabNavList 的样式 API 语义化重构上高度相关。
feat: tab support classnames and styles #786 — 修改并扩展 SemanticName 与按语义传递 className/style 的接口，代码层面相关联。

Suggested reviewers

zombieJ

Poem

我在代码地里轻轻跳，🐇
把 style 分成小篮子按语义倒，
item 穿整齐，close 戴小帽，
classNames 与 styles 并排跑，
关闭按钮也有了专属小道。

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	标题简洁明确地说明了此次变更的核心：增加“close”语义名称并更新 TabNode 的样式和类名属性，因此能够让审阅者快速理解主要改动。
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

📜 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 0285c3e and f0f7e8c.

📒 Files selected for processing (4)

src/TabNavList/TabNode.tsx (5 hunks)
src/TabNavList/index.tsx (1 hunks)
src/Tabs.tsx (1 hunks)
tests/index.test.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (4)

tests/index.test.tsx
src/Tabs.tsx
src/TabNavList/TabNode.tsx
src/TabNavList/index.tsx

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

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

Public repositories are always opted into early access features.
You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

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

vercel · 2025-09-24T07:59:36Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
tabs	Ready	Preview	Comment	Sep 30, 2025 2:04am

gemini-code-assist · 2025-09-24T07:59:40Z

Summary of Changes

Hello @coding-ice, 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 enhances the customization capabilities for tab components by introducing a dedicated semantic name for the close button. It refactors the styling and class name props within the TabNode component to accept structured objects, allowing developers to apply distinct styles and classes to both the tab item and its close button. This change provides greater flexibility and control over the visual presentation of tabs.

Highlights

New 'close' Semantic Name: A new semantic name, 'close', has been introduced to the SemanticName type, allowing for more granular styling and class management of tab close buttons.
Refactored TabNode Styling Props: The TabNode component's style and className props have been replaced with styles and classNames objects. These new props now accept item and close keys, enabling distinct styling for the tab item itself and its close button.
Updated TabNavList Prop Passing: The TabNavList component has been updated to pass the new structured styles and classNames objects down to the TabNode component, ensuring the new styling mechanism is utilized.

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.

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 adds the ability to style the close button on tabs by introducing a 'close' semantic name. The implementation is well-done and consistent. My main feedback is the lack of updated tests. The new functionality for classNames.close and styles.close should be covered by unit tests to prevent future regressions. I've also left one minor suggestion to improve type consistency.

src/TabNavList/TabNode.tsx

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/TabNavList/index.tsx (1)
438-447: 按语义传递 item/close 的类名与样式 — LGTM；可微调合并以更健壮

在严格类型设置下（如 exactOptionalPropertyTypes），展开 styles?.item 可能触发类型告警。可使用空对象兜底，提升健壮性（行为不变）。
-          item: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
+          item: 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 0c5dbbb and 8c4f5fd.

📒 Files selected for processing (3)

src/TabNavList/TabNode.tsx (5 hunks)
src/TabNavList/index.tsx (1 hunks)
src/Tabs.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/TabNavList/TabNode.tsx (1)

src/Tabs.tsx (1)

SemanticName (37-37)

🔇 Additional comments (7)

src/Tabs.tsx (1)

37-37: 扩展 SemanticName 包含 'close' — LGTM

与下游 TabNode/TabNavList 改动一致。
src/TabNavList/TabNode.tsx (3)
87-94: 为 item 节点应用语义化类名与样式 — LGTM

tabNodeClassNames?.item 与 styles?.item 的解构与落点正确。

134-136: 为 close 按钮应用语义化类名与样式 — LGTM

tabNodeClassNames?.close 与 styles?.close 使用恰当。

5-5: 改为相对导入或确认 '@' 路径别名已配置

仓库搜索仅在 src/TabNavList/TabNode.tsx:5 发现 '@/Tabs' 引用，未找到 tsconfig 的 paths 或其它别名声明；建议改为相对导入以保持一致性：
-import type { SemanticName } from '@/Tabs';
+import type { SemanticName } from '../Tabs';
若需保留 '@' 别名，确认在 tsconfig.json 或构建配置（vite/webpack）中添加 "@/": ["src/"] 并确保构建/类型检查能解析该别名。
src/TabNavList/index.tsx (3)

593-595: header 语义的 className/style 透传 — LGTM

顺序为用户 style 覆盖语义 header，优先级合理。

633-637: indicator 语义的 className/style 透传 — LGTM

indicatorStyle 与自定义样式合并顺序合理。

650-651: 确认：OperationNode 已声明并使用 popupStyle，可直接传入

src/TabNavList/OperationNode.tsx 声明了 popupStyle?: React.CSSProperties（约第29行），并在下拉中以 overlayStyle={popupStyle} 使用（约第198行），因此在 src/TabNavList/index.tsx 传入 popupStyle={styles?.popup} 是安全的。

src/TabNavList/TabNode.tsx

codecov · 2025-09-24T09:24:26Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.98%. Comparing base (0c5dbbb) to head (0285c3e).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #900   +/-   ##
=======================================
  Coverage   98.98%   98.98%           
=======================================
  Files          18       18           
  Lines         787      787           
  Branches      230      230           
=======================================
  Hits          779      779           
  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.

…etter flexibility

…s and styles

vercel bot deployed to Preview September 24, 2025 08:00 View deployment

gemini-code-assist bot reviewed Sep 24, 2025

View reviewed changes

src/TabNavList/TabNode.tsx Outdated Show resolved Hide resolved

coderabbitai bot reviewed Sep 24, 2025

View reviewed changes

src/TabNavList/TabNode.tsx Outdated Show resolved Hide resolved

coding-ice force-pushed the feat/semantic branch from 8c4f5fd to c9d46f4 Compare September 24, 2025 08:08

vercel bot deployed to Preview September 24, 2025 08:09 View deployment

vercel bot deployed to Preview September 24, 2025 08:13 View deployment

vercel bot deployed to Preview September 24, 2025 09:04 View deployment

coding-ice added 3 commits September 30, 2025 10:02

feat: add 'close' semantic name and update TabNode styles and classNames

f41a045

types: update TabNode styles and classNames to use Partial type for b…

ffc86fd

…etter flexibility

test: add unit test for editable Tabs component with custom className…

f0f7e8c

…s and styles

coding-ice force-pushed the feat/semantic branch from 0285c3e to f0f7e8c Compare September 30, 2025 02:03

vercel bot deployed to Preview September 30, 2025 02:04 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: add 'close' semantic name and update TabNode styles and classNames #900

feat: add 'close' semantic name and update TabNode styles and classNames #900

Uh oh!

coding-ice commented Sep 24, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 24, 2025 •

edited

Loading

Other AI code review bot(s) detected

Uh oh!

vercel bot commented Sep 24, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Sep 24, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codecov bot commented Sep 24, 2025

Uh oh!

Uh oh!

Uh oh!

feat: add 'close' semantic name and update TabNode styles and classNames #900

Are you sure you want to change the base?

feat: add 'close' semantic name and update TabNode styles and classNames #900

Uh oh!

Conversation

coding-ice commented Sep 24, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

vercel bot commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Sep 24, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Sep 24, 2025

Codecov Report

Uh oh!

Uh oh!

coding-ice commented Sep 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 24, 2025 •

edited

Loading

vercel bot commented Sep 24, 2025 •

edited

Loading