fix: panel styles and classNames not working

[keiseiTi]

If the panel is set to styles or classNames, use it's properties, otherwise use collpase's styles or classNames.

Summary by CodeRabbit

• 新功能

  • 支持为单个面板项提供样式与类名覆盖，可对每项的头部/主体样式与类名进行细粒度自定义。

• 改进

  • 合并全局与每项的样式/类名以保证一致渲染，未提供覆盖时保留原有默认行为与兼容性。

• 测试

  • 新增测试验证每项层级的样式与类名覆盖及其与全局配置的组合生效。

• 注意

  • 对外公开接口未发生变更。

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

[vercel[bot]]

@keiseiTi is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

[!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

将 useItems 中的渲染逻辑扩展为支持每个 item 的 classNames 与 styles 覆盖；父级 props 在钩子内以 collapseClassNames / collapseStyles 命名，渲染 CollapsePanel 时合并全局与每项的 classNames/styles。新增测试验证按面板级别的类名与样式覆盖行为。

Changes

Cohort / File(s)	变更摘要
按项样式与类名合并逻辑 src/hooks/useItems.tsx	将父级 props 重命名为 collapseClassNames / collapseStyles；从每个 item 提取 classNames 与 styles，引入 clsx 和 SemanticName 类型；为 header/body/title/icon 等子项合并全局与按项的 classNames 与 styles（使用 clsx 与对象 spread），并在渲染 CollapsePanel 时传入合并后的值。
测试：面板级样式/类名覆盖 tests/index.spec.tsx	新增测试用例，验证 items[].styles 与 items[].classNames 可覆盖或补充全局 collapseStyles / collapseClassNames，断言 header/body 等子部分的样式与类名按项生效。

Sequence Diagram(s)

sequenceDiagram
  participant Hook as useItems / convertItemsToNodes
  participant Item as items[i]
  participant Merge as mergeClassNames/mergeStyles
  participant Panel as CollapsePanel

  Note over Hook,Item: 对每个 item 准备渲染 props（含可选 classNames/styles）
  Hook->>Item: 读取 item 的 classNames/styles 与其他属性
  Hook->>Merge: 提供 collapseClassNames / collapseStyles（全局默认）
  Item->>Merge: 提供 item.classNames / item.styles（按项覆盖）
  Merge-->>Hook: 返回 merged classNames / merged styles
  Hook->>Panel: 渲染 CollapsePanel（使用合并后的 classNames/styles）
  Panel-->>Hook: 返回渲染节点

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分钟

• 关注点：
  • 合并逻辑对 undefined/null 的回退行为与优先级；
  • clsx 与对象 spread 在 header/body/title/icon 各子字段上的一致性；
  • 与现有类型签名（SemanticName 引入）和导出兼容性；
  • 新增测试是否覆盖部分缺失子字段与边界情况。

Possibly related PRs

• react-component/collapse#361：在相同文件（src/hooks/useItems.tsx）和语义化 classNames/styles 支持方面有直接代码级关联。
• react-component/collapse#358：与语义化 classNames/styles 的类型与应用方式变更紧密相关。
• react-component/collapse#364：修改过 convertItemsToNodes / getNewChild，与本变更在同一逻辑路径上相关。

Suggested reviewers

• zombieJ

诗

🐰 折叠枝头风微暖，
每页披衣各自欢。
父级样式与子自裁，
小面板也有新光彩，
代码里跳跃着胡萝卜🥕

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	标题清晰准确地反映了主要变化：修复面板级别的styles和classNames不起作用的问题，这与代码更改（添加per-item样式/类名覆盖功能）完全一致。
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

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a5d71b7ff2bf928e53378364df5c3130334846c5 and d57c865f2550718003af905441ca3c9a35679f53.

📒 Files selected for processing (2)

• src/hooks/useItems.tsx
• tests/index.spec.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

tests/index.spec.tsx (1)

src/index.tsx (1)

• Collapse (10-10)

src/hooks/useItems.tsx (1)

src/interface.ts (1)

• SemanticName (44-44)

🔇 Additional comments (2)

tests/index.spec.tsx (1)

902-962: 测试覆盖全面，验证了样式和类名的合并行为。

这个测试用例正确验证了面板级别的 styles 和 classNames 与全局配置的合并行为：

• 确认了全局和面板级别的类名同时应用
• 确认了面板级别的样式正确覆盖全局样式
• 覆盖了 header、body、title、icon 四个语义化部分

测试逻辑清晰，使用 toHaveStyle() 进行样式断言符合最佳实践。

src/hooks/useItems.tsx (1)

63-89: 合并逻辑实现正确，支持所有语义化部分。

样式和类名的合并逻辑实现得很好：

• mergeClassNames 使用 clsx 正确组合全局和面板级别的类名
• mergeStyles 使用对象展开正确实现样式覆盖
• 完整支持 header、body、title、icon 四个语义化部分
• 合并顺序正确，面板级别的设置可以覆盖全局设置

这个实现符合之前评审中提出的合并关系需求。

---

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[bot]]

Summary of Changes

Hello @keiseiTi, I'm Gemini Code Assist[^1]! 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 addresses an issue where custom styles and classNames applied to individual panels within a collapse component were not being correctly rendered. The changes introduce a robust mechanism to ensure that panel-specific styling takes precedence, falling back to the collapse component's general styling only when no specific styles or classes are provided for a panel. This enhances the flexibility and customization options for users of the component.

Highlights

• Style and ClassName Prioritization: Implemented logic to prioritize styles and classNames defined directly on individual panel items over the general styles and classNames provided to the collapse component.
• Prop Renaming: Renamed the styles prop from the main collapse component to collapseStyles to avoid naming conflicts when extracting panel-specific styles.
• Panel-Specific Style Extraction: Modified the useItems hook to extract classNames and styles directly from each item object, enabling individual panels to have unique styling.

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 :thumbsup: and :thumbsdown: 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.

[^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.

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 99.18%. Comparing base (c1a28dc) to head (d57c865). :warning: Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #409      +/-   ##
==========================================
+ Coverage   99.16%   99.18%   +0.01%     
==========================================
  Files           5        5              
  Lines         120      122       +2     
  Branches       45       44       -1     
==========================================
+ Hits          119      121       +2     
  Misses          1        1              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.