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

meet-student · 2025-09-11T10:02:21Z

🤔 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

coderabbitai · 2025-09-11T10:02:29Z

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

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

github-actions · 2025-09-11T10:02:30Z

👁 Visual Regression Report for PR #54948 Failed ❌

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

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

Important

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

Visual diff is acceptable

github-actions · 2025-09-11T10:02:34Z

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 improves the customization capabilities of the Anchor component. It introduces the ability to define classNames and styles as functions, enabling developers to apply dynamic styling based on the component's current props. This change provides greater flexibility for adapting the Anchor component's appearance to various contexts and states.

Highlights

Enhanced Customization for Anchor Component: The Anchor component now supports classNames and styles props that can accept functions, allowing for dynamic styling based on component properties. This provides greater flexibility in adapting the component's appearance.
Integration of useMergeSemantic Hook: A new utility hook, useMergeSemantic, has been introduced and integrated into the Anchor component. This hook efficiently handles the merging of both static and dynamic (function-based) classNames and styles.
Updated Type Definitions: The AnchorProps interface has been updated to reflect the new functional capabilities for classNames and styles, ensuring improved type safety and a better developer experience when utilizing these new customization options.
New Demo and Test Coverage: A new demo (style-class.tsx) and a corresponding test file (style-class.test.tsx) have been added. These additions showcase the new dynamic styling features and validate their correct implementation and 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 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. ↩

bolt-new-by-stackblitz · 2025-09-11T10:02:57Z

Run & review this pull request in StackBlitz Codeflow.

gemini-code-assist

Code Review

This pull request introduces a valuable enhancement to the Anchor component by allowing classNames and styles props to be functions, providing greater flexibility for dynamic styling. The implementation is well-structured, centralizing the logic in the useMergeSemantic hook. The addition of a new demo and tests is great.

My feedback includes a suggestion to improve the performance and clarity of how mergedProps is created in Anchor.tsx, and a note on a version number inconsistency in the documentation. Overall, this is a solid contribution.

components/anchor/Anchor.tsx

components/anchor/index.zh-CN.md

pkg-pr-new · 2025-09-11T10:06:18Z

More templates

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

commit: ea5214a

codecov · 2025-09-11T10:06:52Z

Bundle Report

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

Bundle name	Size	Change
antd.min-array-push	11.68MB	7.93MB (211.1%) ⬆️⚠️

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.54MB	5.54MB	100.0% 🚀
~~`antd-with-locales.min.js`~~ (Deleted)	-2.07MB	0 bytes	-100.0% 🗑️
~~`antd.min.js`~~ (Deleted)	-1.69MB	0 bytes	-100.0% 🗑️

codecov · 2025-09-11T10:12:43Z

Codecov Report

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

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #54948   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          793       793           
  Lines        14621     14621           
  Branches      3889      3889           
=========================================
  Hits         14621     14621

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

components/anchor/index.en-US.md

components/anchor/demo/style-class.tsx

…tyles as function

li-jia-nan · 2025-09-17T21:17:44Z

components/anchor/Anchor.tsx

  );

+  // =========== Merged Props for Semantic ==========
+  const mergedProps = React.useMemo<AnchorProps>(() => {


这 useMemo 没意义的，下面 gemini 都给你提示了，结果你直接忽略了

然后社区的贡献者都参考这个 PR，加了一个没意义的 useMemo

参考pr时注意下这里，我的问题，没注意到. 后续我调整下

li-jia-nan · 2025-09-18T19:23:41Z

components/anchor/__tests__/style-class.test.tsx

+    const { container, rerender } = render(
+      <Anchor items={items} classNames={classNames} styles={styles} />,
+    );
+    let root = container.querySelector('.ant-anchor-wrapper')!;


这里为啥要用 let，然后在下面重新赋值一遍？

直接用 const 就行，rerender 会自动更新 dom，不需要重新 query 一次

gemini-code-assist bot reviewed Sep 11, 2025

View reviewed changes

components/anchor/Anchor.tsx Show resolved Hide resolved

components/anchor/index.zh-CN.md Outdated Show resolved Hide resolved

meet-student mentioned this pull request Sep 13, 2025

Support better customization with semantic classNames/styles #54995

Closed

63 tasks

zombieJ reviewed Sep 16, 2025

View reviewed changes

components/anchor/index.en-US.md Outdated Show resolved Hide resolved

zombieJ reviewed Sep 16, 2025

View reviewed changes

components/anchor/demo/style-class.tsx Outdated Show resolved Hide resolved

feat(anchor): Support better customization with semantic classNames/s…

ea5214a

…tyles as function

zombieJ approved these changes Sep 16, 2025

View reviewed changes

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

zombieJ merged commit 8528f25 into ant-design:next Sep 16, 2025
39 checks passed

li-jia-nan reviewed Sep 17, 2025

View reviewed changes

li-jia-nan reviewed Sep 18, 2025

View reviewed changes

meet-student deleted the anchor branch October 1, 2025 02:47

zombieJ mentioned this pull request Nov 4, 2025

docs: changelog of 6.0.0-alpha.4 #55604

Merged

17 tasks

Uh oh!

Comments

Conversation

meet-student commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

coderabbitai bot commented Sep 11, 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!

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

Uh oh!

👁 Visual Regression Report for PR #54948 Failed ❌

Uh oh!

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

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!

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

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Sep 11, 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!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

li-jia-nan Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

meet-student Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

li-jia-nan Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

li-jia-nan Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

meet-student commented Sep 11, 2025 •

edited

Loading

coderabbitai bot commented Sep 11, 2025 •

edited

Loading

github-actions bot commented Sep 11, 2025 •

edited by zombieJ

Loading

github-actions bot commented Sep 11, 2025 •

edited

Loading

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

edited

Loading

codecov bot commented Sep 11, 2025 •

edited

Loading

codecov bot commented Sep 11, 2025 •

edited

Loading

meet-student Sep 18, 2025 •

edited

Loading

li-jia-nan Sep 18, 2025 •

edited

Loading