feat(Rate): size prop by guoyunhe · Pull Request #55028 · ant-design/ant-design

guoyunhe · 2025-09-15T08:43:54Z

🤔 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

Rate 支持 Size 提供三种不同大小的星星，适配对应大小的 form

📝 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	feat(Rate): support 3 sizes
🇨🇳 Chinese	feat(Rate): 支持 3 种大小

bolt-new-by-stackblitz · 2025-09-15T08:43:58Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-09-15T08:44:02Z

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-15T08:44:03Z

github-actions · 2025-09-15T08:44:04Z

👁 Visual Regression Report for PR #55028 Failed ❌

🎯 Target branch: next (ec8f9ea)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🆕 3 added

Expected (Branch next)	Actual (Current PR)	Diff
	rate-size.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	rate-size.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	rate-size.default.png	🆕🆕🆕 Added 🆕🆕🆕

Important

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

Visual diff is acceptable

gemini-code-assist

Summary of Changes

Hello @guoyunhe, 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 introduces a new size prop to the Rate component, enabling developers to easily control the visual size of the stars. This enhancement provides three distinct size options ('small', 'middle', 'large'), improving the component's adaptability and consistency when integrated into various form layouts and UI designs.

Highlights

New size prop for Rate component: Introduced a size prop to the Rate component, allowing users to specify 'small', 'middle', or 'large' star sizes, with 'middle' as the default.
Styling for different sizes: Implemented CSS styling to visually differentiate the star sizes, utilizing new starSizeSM and starSizeLG design tokens.
Updated test coverage: Migrated the test file to .tsx and added specific test cases to verify the correct application of small and large sizes.
Documentation updates: Updated both English and Chinese documentation for the Rate component to include details about the new size prop.

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

gemini-code-assist

Code Review

这个 PR 为 Rate 组件引入了 size 属性，这是一个很好的功能，可以适配不同尺寸的表单。实现上基本是正确的，包括添加属性、更新样式和文档。不过，我发现测试代码中存在一些问题需要修正。测试用例中使用了错误的类选择器，并且测试覆盖不够全面。另外，我也对样式代码提出了一点小建议，以提高可维护性。

gemini-code-assist · 2025-09-15T08:45:26Z

components/rate/__tests__/index.test.tsx

+  describe('size', () => {
+    it('size=small', () => {
+      const { container } = render(<Rate count={3} value={1} size="small" />);
+      expect(container.querySelector('.rc-rate-small')).toBeTruthy();


测试中的查询选择器 .rc-rate-small 是不正确的。这个 CSS 类是由 Ant Design 的包装组件添加的，而不是底层的 rc-rate 组件。ratePrefixCls 的值是 ant-rate，所以对应的类名应该是 .ant-rate-small。

Suggested change

expect(container.querySelector('.rc-rate-small')).toBeTruthy();

expect(container.querySelector('.ant-rate-small')).toBeTruthy();

Gemini 真是不得了……

gemini-code-assist · 2025-09-15T08:45:26Z

components/rate/__tests__/index.test.tsx

+    });
+    it('size=large', () => {
+      const { container } = render(<Rate count={3} value={1} size="large" />);
+      expect(container.querySelector('.rc-rate-large')).toBeTruthy();


同样，查询选择器 .rc-rate-large 也是不正确的。它应该是 .ant-rate-large。

Suggested change

expect(container.querySelector('.rc-rate-large')).toBeTruthy();

expect(container.querySelector('.ant-rate-large')).toBeTruthy();

gemini-code-assist · 2025-09-15T08:45:26Z

components/rate/__tests__/index.test.tsx

+  describe('size', () => {
+    it('size=small', () => {
+      const { container } = render(<Rate count={3} value={1} size="small" />);
+      expect(container.querySelector('.rc-rate-small')).toBeTruthy();
+    });
+    it('size=large', () => {
+      const { container } = render(<Rate count={3} value={1} size="large" />);
+      expect(container.querySelector('.rc-rate-large')).toBeTruthy();
+    });
+  });


size 属性的测试套件不完整。它只测试了 small 和 large 尺寸。还应该测试默认情况（不提供 size 属性）和显式提供 size="middle" 的情况。这能确保默认行为和所有选项都按预期工作。

建议增加对 middle 尺寸和默认尺寸的测试用例，以确保覆盖所有情况。

it('size=middle', () => { const { container } = render(<Rate count={3} value={1} size="middle" />); expect(container.querySelector('.ant-rate-middle')).toBeTruthy(); }); it('should be middle by default', () => { const { container } = render(<Rate count={3} value={1} />); expect(container.querySelector('.ant-rate-middle')).toBeTruthy(); });

gemini-code-assist · 2025-09-15T08:45:26Z

components/rate/style/index.ts

+  starSize: token.controlHeight * 0.625,
+  starSizeSM: token.controlHeightSM * 0.625,
+  starSizeLG: token.controlHeightLG * 0.625,


魔法数 0.625 在多处使用，降低了代码的可读性和可维护性。建议将其定义为具名常量（如 STAR_SIZE_RATIO），或者至少使用分数 (5 / 8) 来明确其含义。

Suggested change

starSize: token.controlHeight * 0.625,

starSizeSM: token.controlHeightSM * 0.625,

starSizeLG: token.controlHeightLG * 0.625,

starSize: token.controlHeight * (5 / 8),

starSizeSM: token.controlHeightSM * (5 / 8),

starSizeLG: token.controlHeightLG * (5 / 8),

这个魔法数字有啥讲究不

没有，就是单纯保持和之前的默认大小一致，small 和 large 的缩放比例，与 control 的缩放比例一致

codecov · 2025-09-15T08:47:45Z

Bundle Report

Changes will increase total bundle size by 320 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.75MB	320 bytes (0.01%) ⬆️

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.min.js`	160 bytes	2.06MB	0.01%
`antd.min.js`	160 bytes	1.69MB	0.01%

Files in antd-with-locales.min.js:

./components/rate/style/index.ts → Total Size: 2.79kB

Files in antd.min.js:

./components/rate/style/index.ts → Total Size: 2.79kB

pkg-pr-new · 2025-09-15T09:08:07Z

More templates

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

commit: 49c627d

codecov · 2025-09-15T09:42:16Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (f73f606) to head (49c627d).
⚠️ Report is 551 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #55028   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          793       793           
  Lines        14620     14623    +3     
  Branches      3889      3888    -1     
=========================================
+ Hits         14620     14623    +3

☔ 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/rate/style/index.ts

thinkasany · 2025-09-16T15:08:19Z

components/rate/index.zh-CN.md


 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本</code>
+<code src="./demo/size.tsx">尺寸</code>


新功能可以加个 verion="版本号"，更好的提示作用

gemini-code-assist bot reviewed Sep 15, 2025

View reviewed changes

guoyunhe force-pushed the next-rate-size branch from 4e74f88 to ec3cc45 Compare September 15, 2025 09:04

guoyunhe force-pushed the next-rate-size branch from ec3cc45 to 88660a8 Compare September 15, 2025 09:31

guoyunhe force-pushed the next-rate-size branch from 88660a8 to 032acfc Compare September 15, 2025 10:07

li-jia-nan reviewed Sep 15, 2025

View reviewed changes

components/rate/style/index.ts Outdated Show resolved Hide resolved

components/rate/style/index.ts Outdated Show resolved Hide resolved

guoyunhe force-pushed the next-rate-size branch from 032acfc to 09fed23 Compare September 16, 2025 04:13

thinkasany reviewed Sep 16, 2025

View reviewed changes

feat(Rate): size prop

49c627d

guoyunhe force-pushed the next-rate-size branch from 09fed23 to 49c627d Compare September 17, 2025 06:27

zombieJ approved these changes Sep 22, 2025

View reviewed changes

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

zombieJ merged commit cfb0426 into ant-design:next Sep 22, 2025
39 checks passed

zombieJ mentioned this pull request Nov 4, 2025

docs: changelog of 6.0.0-alpha.4 #55604

Merged

17 tasks

	expect(container.querySelector('.rc-rate-small')).toBeTruthy();
	expect(container.querySelector('.ant-rate-small')).toBeTruthy();

Uh oh!

Conversation

guoyunhe commented Sep 15, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

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

Uh oh!

coderabbitai bot commented Sep 15, 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 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

👁 Visual Regression Report for PR #55028 Failed ❌

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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!

gemini-code-assist bot Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

zombieJ Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

zombieJ Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

guoyunhe Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

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

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

Uh oh!

Uh oh!

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

thinkasany Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coderabbitai bot commented Sep 15, 2025 •

edited

Loading

github-actions bot commented Sep 15, 2025 •

edited

Loading

github-actions bot commented Sep 15, 2025 •

edited by zombieJ

Loading

codecov bot commented Sep 15, 2025 •

edited

Loading

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

edited

Loading

codecov bot commented Sep 15, 2025 •

edited

Loading