Skip to content

Conversation

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Oct 20, 2025

Summary by CodeRabbit

发布说明

  • 新功能
    • 为选择器组件新增更多语义化样式钩子,支持对占位符、内容区、项及项子元素(项内容、项删除按钮)进行独立类名与内联样式定制,单选与多选场景均生效。
  • 测试
    • 新增语义样式相关测试,覆盖类名与样式在不同显示模式及清除控件下的应用验证。

@vercel
Copy link

vercel bot commented Oct 20, 2025

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

Project Deployment Preview Comments Updated (UTC)
select Ready Ready Preview Comment Oct 20, 2025 9:47am

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

@gemini-code-assist
Copy link

Summary of Changes

Hello @zombieJ, 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 significantly enhances the BaseSelect component's styling capabilities by introducing a more detailed semantic structure. It expands the available semantic names and integrates classNames and styles props into key sub-components. This change provides developers with fine-grained control over the appearance of various elements within the select component, such as the placeholder, content display, and individual selected items, facilitating greater UI customization. The addition of new tests ensures the reliability of these styling enhancements.

Highlights

  • Expanded Semantic Naming: The BaseSelectSemanticName type has been extended to include new semantic identifiers such as 'placeholder', 'content', 'item', 'itemContent', and 'itemRemove', allowing for more granular targeting of component parts.
  • Enhanced Styling Customization: Introduced classNames and styles props to various internal components, including Placeholder, MultipleContent, and SingleContent. This enables developers to apply custom CSS classes and inline styles directly to specific elements like the placeholder, content area, individual selected items, and their remove buttons.
  • Comprehensive Test Coverage: A new test file, tests/semantic.test.tsx, has been added to thoroughly validate the correct application of these new semantic classNames and styles across different parts of the BaseSelect component, ensuring robustness and expected behavior.
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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 20, 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

该 PR 扩展了 BaseSelect 的语义名称集合,并在 SingleContent、MultipleContent、Placeholder 中通过 useBaseProps 接入并应用 classNames/styles,同时新增语义化样式相关的单元测试,Placeholder 增加了基于 displayValues 的早退逻辑。

Changes

内聚体 / 文件(s) 变更摘要
BaseSelect 类型扩展
src/BaseSelect/index.tsx
BaseSelectSemanticName 从 `'prefix'
单内容组件样式钩子集成
src/SelectInput/Content/SingleContent.tsx
通过 useBaseProps 获取并应用 classNames.contentstyles.content 到根容器(使用 clsx 和内联样式)。
多内容组件样式钩子集成
src/SelectInput/Content/MultipleContent.tsx
通过 useBaseProps 注入 classNames/styles,并将 classNames?.itemitemContentitemRemovecontent 与对应 styles 应用到项、项内容、移除按钮和溢出容器。
占位符组件增强
src/SelectInput/Content/Placeholder.tsx
引入 clsxuseBaseProps,应用 classNames.placeholderstyles.placeholder,并在 displayValues 非空时早退不渲染。
测试:语义化样式覆盖
tests/semantic.test.tsx, tests/BaseSelect.test.tsx
新增 tests/semantic.test.tsx 验证各语义 classNames/styles 在 single/multiple/allowClear 场景下的映射;修正 tests/BaseSelect.test.tsxOptionList 的导入路径。

Sequence Diagram(s)

sequenceDiagram
  participant BaseSelect
  participant useBaseProps
  participant SingleContent
  participant MultipleContent
  participant Placeholder

  BaseSelect->>useBaseProps: 读取/传递 classNames & styles
  useBaseProps-->>BaseSelect: 返回 { classNames, styles, ... }
  BaseSelect->>SingleContent: render(props, classNames/styles)
  SingleContent->>SingleContent: 应用 classNames.content / styles.content
  BaseSelect->>MultipleContent: render(props, classNames/styles)
  MultipleContent->>MultipleContent: 应用 classNames.item/itemContent/itemRemove/content 与 styles
  BaseSelect->>Placeholder: render(displayValues, classNames/styles)
  Placeholder->>Placeholder: 若 displayValues 非空 -> 早退 (不渲染)
Loading

Estimated code review effort

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

Possibly related PRs

Poem

🐰 新名入篓语义新,
我在草间缝类纹。
占位若果静默躺,
内容与项皆加印。
测试轻跳报无尘。

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 标题"feat: add more semantic structure"准确反映了PR的核心变更。该PR通过扩展BaseSelectSemanticName类型以包含placeholder、content、item、itemContent和itemRemove等新语义名称,并在MultipleContent、Placeholder和SingleContent组件中应用这些语义钩子的样式支持,从而增加了更多的语义结构。标题简洁明了,避免了冗余信息,清晰地传达了主要变更意图。
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 semantic

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.

@codecov
Copy link

codecov bot commented Oct 20, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.41%. Comparing base (931b7a0) to head (bab3934).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1168   +/-   ##
=======================================
  Coverage   99.41%   99.41%           
=======================================
  Files          31       31           
  Lines        1191     1192    +1     
  Branches      420      400   -20     
=======================================
+ Hits         1184     1185    +1     
  Misses          7        7           

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

Copy link

@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 enhances the semantic structure of the BaseSelect component by introducing classNames and styles props for more granular customization of elements like items, content, and placeholders. The changes are consistently applied across the relevant components. It's great to see that you've also added a new test file to cover this new functionality. My feedback is focused on improving the setup of these new tests to ensure they are robust and maintainable.

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 (2)
tests/semantic.test.tsx (2)

16-53: 建议移除未测试的 className 定义

在此测试中,classNames 对象定义了 clearitemitemContentitemRemove 等属性(第 21、24-26 行),但这些在断言中并未被验证。这些样式在后续的专门测试中(第 94 行的 multiple mode 测试和第 138 行的 clear icon 测试)才会被测试。

为了提高测试的清晰度和可维护性,建议只保留在当前测试中实际验证的 className 定义。

应用此 diff 来简化 classNames 对象:

   it('should apply semantic classNames correctly', () => {
     const classNames = {
       prefix: 'custom-prefix',
       suffix: 'custom-suffix',
       input: 'custom-input',
-      clear: 'custom-clear',
       placeholder: 'custom-placeholder',
       content: 'custom-content',
-      item: 'custom-item',
-      itemContent: 'custom-item-content',
-      itemRemove: 'custom-item-remove',
     };

55-92: 建议移除未测试的 style 定义

与第一个测试类似,此测试的 styles 对象定义了 clearitemitemContentitemRemove 等属性(第 60、63-65 行),但在断言中并未被验证。这些样式在后续的专门测试中才会被测试。

为了保持测试的简洁性,建议只保留在当前测试中实际验证的 style 定义。

应用此 diff 来简化 styles 对象:

   it('should apply semantic styles correctly', () => {
     const styles = {
       prefix: { color: 'red' },
       suffix: { color: 'blue' },
       input: { fontSize: '16px' },
-      clear: { cursor: 'pointer' },
       placeholder: { opacity: 0.6 },
       content: { padding: '4px' },
-      item: { margin: '2px' },
-      itemContent: { fontWeight: 'bold' },
-      itemRemove: { background: 'transparent' },
     };
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 34ce21d and bab3934.

📒 Files selected for processing (1)
  • tests/semantic.test.tsx (1 hunks)
🔇 Additional comments (3)
tests/semantic.test.tsx (3)

1-14: 测试设置结构合理

导入语句和 defaultProps 配置看起来是合理的,为测试提供了必要的基础设置。


94-136: LGTM!

此测试正确验证了多选模式下的 item 相关语义样式(item、itemContent、itemRemove),测试覆盖了 className 和 style 两个方面,逻辑清晰且完整。


138-161: LGTM!

此测试正确验证了启用 allowClear 时清除图标的语义样式,通过提供 value 确保清除图标可见,测试逻辑正确。

@zombieJ zombieJ merged commit 6b7ec1e into master Oct 20, 2025
12 checks passed
@zombieJ zombieJ deleted the semantic branch October 20, 2025 09:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant