feat(tree-select): Support better customization with semantic classNames/styles as function by meet-student · Pull Request #54967 · ant-design/ant-design

meet-student · 2025-09-12T01:57:33Z

🤔 This is a ...

🔗 Related Issues

Describe the source of related requirements, such as links to relevant issue discussions.

For example: close #xxxx, fix #xxxx

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog! Track your changes, like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	Support better customization with semantic classNames/styles as function
🇨🇳 Chinese	Support better customization with semantic classNames/styles as function

bolt-new-by-stackblitz · 2025-09-12T01:57:36Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-09-12T01:57:40Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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.

✨ Finishing touches

🧪 Generate unit tests

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

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

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

gemini-code-assist

Summary of Changes

Hello @meet-student, 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 significantly enhances the customization capabilities of the TreeSelect component. By allowing classNames and styles to be defined as functions that receive component properties, developers gain fine-grained control over the component's appearance, enabling dynamic styling based on its current state or configuration. This change promotes greater flexibility and semantic styling, making it easier to integrate the component into diverse design systems.

Highlights

Enhanced Customization for TreeSelect: The TreeSelect component now accepts functions for its classNames and styles props, providing more flexible customization options.
Dynamic Styling with Component Props: These functions receive the component's internal props (e.g., disabled, size, status, variant), enabling developers to apply dynamic CSS classes and inline styles based on the component's current state or configuration.
Updated Documentation and Demo: New documentation and a dedicated demo have been added to showcase this enhanced customization capability, illustrating both object and function-based approaches for classNames and styles.
Type Definition Updates: The type definitions for TreeSelectProps have been updated to reflect the new function signature for classNames and styles, ensuring type safety and improved developer experience.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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

github-actions · 2025-09-12T01:59:22Z

👁 Visual Regression Report for PR #54967 Failed ❌

🎯 Target branch: next (77e7238)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 2 changed, 🆕 3 added

Expected (Branch next)	Actual (Current PR)	Diff
table-sticky.dark.png	table-sticky.dark.png
table-sticky.default.png	table-sticky.default.png
	tree-select-style-class.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	tree-select-style-class.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	tree-select-style-class.default.png	🆕🆕🆕 Added 🆕🆕🆕

Important

There are 5 diffs found in this PR: 🔄 2 changed, 🆕 3 added.
Please check all items:

Visual diff is acceptable

gemini-code-assist

Code Review

This pull request introduces a valuable enhancement to the TreeSelect component by adding support for classNames and styles as functions. This allows for dynamic styling based on the component's props, providing greater customization flexibility. The implementation is well-structured, with good use of hooks and type definitions. The new demo and documentation are clear and helpful. I have one suggestion to improve the test coverage for this new feature to make it more robust.

components/tree-select/__tests__/index.test.tsx

github-actions · 2025-09-12T01:59:30Z

codecov · 2025-09-12T02:12:19Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (53638e2) to head (4ff5e5b).
⚠️ Report is 7 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #54967   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          798       798           
  Lines        14749     14750    +1     
  Branches      3896      3896           
=========================================
+ Hits         14749     14750    +1

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

pkg-pr-new · 2025-09-21T10:03:15Z

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@54967

commit: 4ff5e5b

codecov · 2025-09-21T10:03:42Z

Bundle Report

Changes will increase total bundle size by 7.91MB (210.53%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name	Size	Change
antd.min-array-push	11.66MB	7.91MB (210.53%) ⬆️⚠️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.js` (New)	6.14MB	6.14MB	100.0% 🚀
`antd.js` (New)	5.52MB	5.52MB	100.0% 🚀
~~`antd-with-locales.min.js`~~ (Deleted)	-2.07MB	0 bytes	-100.0% 🗑️
~~`antd.min.js`~~ (Deleted)	-1.69MB	0 bytes	-100.0% 🗑️

accesslint

There are accessibility issues in these changes.

accesslint · 2025-09-25T17:10:27Z

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

+        <span
+          class="ant-select-selection-search"
+        >
+          <input


Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

accesslint · 2025-09-25T17:10:27Z

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

+        <span
+          class="ant-select-selection-search"
+        >
+          <input


Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.

meet-student · 2025-09-25T17:42:00Z

skip

Copilot

Pull Request Overview

This PR enhances the TreeSelect component by adding support for function-based classNames and styles props, allowing for better customization of semantic DOM structures based on component state.

Enhanced classNames and styles props to accept both object and function forms for dynamic styling
Added comprehensive test coverage for the new functionality
Added demo showcasing both object and function-based styling approaches

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
components/tree-select/index.tsx	Core implementation of function-based classNames/styles with proper type definitions and semantic merging
components/tree-select/index.en-US.md	Updated English documentation to reflect function-based API
components/tree-select/index.zh-CN.md	Updated Chinese documentation to reflect function-based API
components/tree-select/demo/style-class.tsx	Added comprehensive demo showing both object and function-based styling
components/tree-select/demo/style-class.md	Documentation for the new demo
components/tree-select/demo/_semantic.tsx	Minor data update for semantic demo
components/tree-select/tests/index.test.tsx	Added test cases for function-based classNames/styles
components/tree-select/tests/snapshots/*.snap	Updated snapshots to reflect new demo

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

components/tree-select/index.tsx

zombieJ · 2025-09-29T03:56:35Z

components/tree-select/demo/style-class.tsx

+import type { TreeSelectProps } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => ({


一样的内边距问题：

thinkasany · 2025-09-30T04:33:51Z

…mes/styles as function

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

Signed-off-by: lijianan <574980606@qq.com>

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

Signed-off-by: lijianan <574980606@qq.com>

accesslint

There are accessibility issues in these changes.

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap

accesslint bot reviewed Sep 12, 2025

View reviewed changes

gemini-code-assist bot reviewed Sep 12, 2025

View reviewed changes

components/tree-select/__tests__/index.test.tsx Show resolved Hide resolved

meet-student mentioned this pull request Sep 13, 2025

Support better customization with semantic classNames/styles #54995

Closed

63 tasks

accesslint bot reviewed Sep 25, 2025

View reviewed changes

thinkasany requested a review from Copilot September 28, 2025 12:16

Copilot AI reviewed Sep 28, 2025

View reviewed changes

components/tree-select/index.tsx Show resolved Hide resolved

components/tree-select/index.tsx Show resolved Hide resolved

zombieJ reviewed Sep 29, 2025

View reviewed changes

meet-student added 3 commits September 30, 2025 21:03

feat(tree-select): Support better customization with semantic classNa…

6ea46d6

…mes/styles as function

update demo and snap

9e505bb

chore: update demo

62f43a5

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

chore: update demo

02e8e9d

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

Merge branch 'next' into tree-select

d2bee7d

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

Merge branch 'next' into tree-select

ea7f265

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

Update index.tsx

4be2fe4

Signed-off-by: lijianan <574980606@qq.com>

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

Replace 'clsx' with 'classnames' for class handling

4ff5e5b

Signed-off-by: lijianan <574980606@qq.com>

accesslint bot reviewed Sep 30, 2025

View reviewed changes

components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap Show resolved Hide resolved

zombieJ approved these changes Sep 30, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 30, 2025

zombieJ merged commit f6e8346 into ant-design:next Sep 30, 2025
39 checks passed

thinkasany approved these changes Sep 30, 2025

View reviewed changes

meet-student deleted the tree-select branch October 1, 2025 02:46

zombieJ mentioned this pull request Nov 4, 2025

docs: changelog of 6.0.0-alpha.4 #55604

Merged

17 tasks

Uh oh!

Conversation

meet-student commented Sep 12, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Sep 12, 2025

Uh oh!

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

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions bot commented Sep 12, 2025 • edited by zombieJ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #54967 Failed ❌

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

github-actions bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

pkg-pr-new bot commented Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

accesslint bot Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

meet-student commented Sep 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

zombieJ Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

thinkasany commented Sep 30, 2025

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

accesslint bot left a comment

coderabbitai bot commented Sep 12, 2025 •

edited

Loading

github-actions bot commented Sep 12, 2025 •

edited by zombieJ

Loading

github-actions bot commented Sep 12, 2025 •

edited

Loading

codecov bot commented Sep 12, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 21, 2025 •

edited

Loading

codecov bot commented Sep 21, 2025 •

edited

Loading