feat(Pagination): three size by guoyunhe · Pull Request #56009 · ant-design/ant-design

guoyunhe · 2025-12-01T12:48:35Z

🤔 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

Pagination 实际上和 Button/Input/Select 等输入控件更接近，于是此变更也让它拥有了大中小三种尺寸。

📝 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(Pagination): three size
🇨🇳 Chinese	feat(Pagination): 三种大小

bolt-new-by-stackblitz · 2025-12-01T12:48:38Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-12-01T12:48:41Z

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 (beta)

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-12-01T12:48:44Z

github-actions · 2025-12-01T12:48:45Z

👁 Visual Regression Report for PR #56009 Failed ❌

🎯 Target branch: feature (3d152a7)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 40 changed

Expected (Branch feature)	Actual (Current PR)	Diff
config-provider-size.compact.png	config-provider-size.compact.png
config-provider-size.dark.png	config-provider-size.dark.png
config-provider-size.default.png	config-provider-size.default.png
list-vertical.dark.png	list-vertical.dark.png
pagination-component-token.compact.png	pagination-component-token.compact.png
pagination-component-token.dark.png	pagination-component-token.dark.png
pagination-component-token.default.png	pagination-component-token.default.png
pagination-mini.compact.png	pagination-mini.compact.png

Warning

There are more diffs not shown in the table. Please check the Full Report for details.

Important

There are 40 diffs found in this PR: 🔄 40 changed.
Please check all items:

Checked all diffs in the full report
Visual diff is acceptable

gemini-code-assist · 2025-12-01T12:48:50Z

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 significant enhancement to the Pagination component by adding a large size option. This change aims to standardize the sizing behavior of Pagination with other interactive UI elements like Button, Input, and Select, providing greater flexibility for developers to integrate the component seamlessly into various design contexts. The update involves modifying the component's type definitions and class application logic to support the new size, while also deprecating an older size-related class.

Highlights

Pagination Size Enhancement: The Pagination component now supports a large size option, expanding its sizing capabilities beyond default and small.
Type Definition Update: The size prop in PaginationProps has been updated to include 'large' as a valid type.
Dynamic Class Application: A new class, ${prefixCls}-${mergedSize}, is dynamically applied to the Pagination component, ensuring proper styling based on the selected size.
Deprecation Notice: The prefixCls-mini class has been marked as deprecated, indicating it will be removed in a future major version (v7).

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.

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 旨在为 Pagination 组件添加大、中、小三种尺寸，使其与其他输入组件保持一致。目前已经更新了 PaginationProps 的 size 类型定义，并添加了根据 size 生成相应 CSS class 的逻辑。这是一个很好的改进。不过，我发现 mergedSize 的计算逻辑存在一些问题，可能会导致 bug，具体请看我的评论。另外，作为 WIP 的 PR，目前只添加了 class name，相关的 CSS 样式还未实现，期待后续的更新。

components/pagination/Pagination.tsx

pkg-pr-new · 2025-12-01T12:54:04Z

More templates

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

commit: 27300e0

codecov · 2025-12-01T12:54:38Z

Bundle Report

Changes will decrease total bundle size by 72 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.86MB	-72 bytes (-0.0%) ⬇️

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`	-36 bytes	2.12MB	-0.0%
`antd.min.js`	-36 bytes	1.74MB	-0.0%

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

./components/pagination/style/index.ts → Total Size: 16.66kB
./components/input/style/index.ts → Total Size: 17.28kB

Files in antd.min.js:

./components/pagination/style/index.ts → Total Size: 16.66kB
./components/input/style/index.ts → Total Size: 17.28kB

codecov · 2025-12-02T04:47:09Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (3d152a7) to head (27300e0).
⚠️ Report is 33 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #56009   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          805       805           
  Lines        14848     14854    +6     
  Branches      3927      3926    -1     
=========================================
+ Hits         14848     14854    +6

☔ 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/pagination/demo/mini.tsx

components/pagination/style/index.ts

…gination-size' of github.com:guoyunhe/ant-design into pagination-size

socket-security · 2025-12-30T07:55:28Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality
	circular-dependency-plugin@5.2.2
	dekko@0.2.1
	cypress-image-diff-html-report@2.2.0
	dumi-plugin-color-chunk@2.1.0
	env-paths@3.0.0
	clsx@2.1.1
	csstree-validator@4.0.1
	cli-progress@3.12.0
	throttle-debounce@5.0.2
	scroll-into-view-if-needed@3.1.0
	adm-zip@0.5.16
	fast-glob@3.3.3
	father@4.6.13
	cross-env@10.1.0
	css-tree@3.1.0
	ajv@6.12.6 ⏵ 8.17.1
	chalk@2.4.2 ⏵ 5.6.2	⁺¹		⁺¹
	eslint-plugin-compat@6.0.2
	antd-img-crop@4.27.0
	dumi@2.4.21
	gh-pages@3.2.3 ⏵ 6.3.0		⁺⁷⁵
	cheerio@1.1.2
	eslint-plugin-jsx-a11y@6.10.2
	react@19.2.3
	github-slugger@2.0.0
	dayjs@1.11.19
	dotenv@17.2.3
	fs-extra@7.0.1 ⏵ 11.3.3	⁺¹
	antd-token-previewer@3.0.0
	ali-oss@6.23.0
	axios@1.13.2
	antd-style@4.1.0
	react-dom@19.2.3
See 4 more rows in the dashboard

View full report

feat(Pagination): three size

fdd11e1

gemini-code-assist bot reviewed Dec 1, 2025

View reviewed changes

components/pagination/Pagination.tsx Outdated Show resolved Hide resolved

guoyunhe added 5 commits December 2, 2025 10:11

feat(Pagination): three size

a8d79e0

feat(Pagination): three size

f50b31a

feat(Pagination): three size

333ab66

feat(Pagination): three size

bd34ac0

feat(Pagination): three size

8c13d37

guoyunhe changed the title ~~WIP: feat(Pagination): three size~~ feat(Pagination): three size Dec 2, 2025

feat(Pagination): three size

e87abed

guoyunhe added 3 commits December 3, 2025 13:44

Merge branch 'feature' into pagination-size

3db1f48

Merge branch 'feature' into pagination-size

65dbfc0

Merge branch 'feature' into pagination-size

c43f495

zombieJ reviewed Dec 19, 2025

View reviewed changes

components/pagination/demo/mini.tsx Show resolved Hide resolved

guoyunhe added 2 commits December 19, 2025 14:17

test(Pagination): update snapshots

abfddc7

test(Pagination): update snapshots

a40c202

guoyunhe requested a review from zombieJ December 19, 2025 09:29

guoyunhe and others added 5 commits December 22, 2025 10:00

Merge branch 'feature' into pagination-size

8332779

Merge branch 'feature' into pagination-size

d9020d3

Merge branch 'feature' into pagination-size

6278b43

Merge branch 'feature' into pagination-size

5befdf0

Merge branch 'feature' into pagination-size

d7e70fe

zombieJ reviewed Dec 30, 2025

View reviewed changes

components/pagination/style/index.ts Show resolved Hide resolved

guoyunhe added 2 commits December 30, 2025 15:30

Merge branch 'feature' into pagination-size

98f410f

Merge branch 'master' of github.com:ant-design/ant-design; branch 'pa…

9fd110d

…gination-size' of github.com:guoyunhe/ant-design into pagination-size

guoyunhe added 3 commits December 30, 2025 16:32

fix(Pagination): use css var style

3643c86

fix(Pagination): use css var style

6f5ce7b

Merge branch 'feature' into pagination-size

27300e0

zombieJ approved these changes Jan 4, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 4, 2026

zombieJ merged commit 9123bbb into ant-design:feature Jan 4, 2026
37 checks passed

dosubot bot mentioned this pull request Jan 13, 2026

翻页器设置字体大小后上下未对齐 #56586

Closed

zombieJ mentioned this pull request Jan 13, 2026

docs: Changelog of 6.2.0 #56588

Merged

17 tasks

Uh oh!

Conversation

guoyunhe commented Dec 1, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Dec 1, 2025

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

👁 Visual Regression Report for PR #56009 Failed ❌

Uh oh!

gemini-code-assist bot commented Dec 1, 2025

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!

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Dec 1, 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 Dec 2, 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!

socket-security bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Dec 1, 2025 •

edited

Loading

github-actions bot commented Dec 1, 2025 •

edited

Loading

github-actions bot commented Dec 1, 2025 •

edited by zombieJ

Loading

pkg-pr-new bot commented Dec 1, 2025 •

edited

Loading

codecov bot commented Dec 1, 2025 •

edited

Loading

codecov bot commented Dec 2, 2025 •

edited

Loading

socket-security bot commented Dec 30, 2025 •

edited

Loading