feat: add marginSize prop for QRCode quiet zone by afc163 · Pull Request #56569 · ant-design/ant-design

afc163 · 2026-01-12T02:31:53Z

🤔 This is a ...

🔗 Related Issues

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

For example: close #xxxx, fix #xxxx

close #56458

💡 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	QRCode adds `marginSize` prop for quiet zone size.
🇨🇳 Chinese	QRCode 新增 marginSize 属性用于展示二维码留白区。

bolt-new-by-stackblitz · 2026-01-12T02:31:56Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2026-01-12T02:32:01Z

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.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/add-margin-size-prop

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

gemini-code-assist · 2026-01-12T02:32:06Z

Summary of Changes

Hello @afc163, 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 enhances the QRCode component by adding a marginSize prop, which provides granular control over the quiet zone surrounding the generated QR code. This allows for more flexible integration and visual customization of QR codes within applications, ensuring they meet specific design requirements for spacing and presentation.

Highlights

New marginSize Prop: Introduced a new marginSize prop to the QRCode component, allowing users to specify the size of the quiet zone (margin) around the QR code in modules. The default value is 0, meaning no margin.
Documentation Updates: The marginSize prop has been added to both the English (index.en-US.md) and Chinese (index.zh-CN.md) documentation files for the QRCode component, detailing its purpose, type (number), and default value.
Test Coverage: A new test case has been added to index.test.tsx to verify that the marginSize prop correctly influences the viewBox attribute of SVG-rendered QR codes, ensuring the quiet zone is properly applied.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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

github-actions · 2026-01-12T02:32:07Z

github-actions · 2026-01-12T02:32:08Z

👁 Visual Regression Report for PR #56569 Failed ❌

🎯 Target branch: feature (27826a8)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 2 changed

Expected (Branch feature)	Actual (Current PR)	Diff
table-sticky.dark.png	table-sticky.dark.png
table-sticky.default.png	table-sticky.default.png

Important

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

Visual diff is acceptable

cloudflare-workers-and-pages · 2026-01-12T02:32:13Z

Deploying ant-design-next with Cloudflare Pages

Latest commit:	`f817d55`
Status:	✅ Deploy successful!
Preview URL:	https://73fdff03.ant-design-next.pages.dev
Branch Preview URL:	https://feat-add-margin-size-prop.ant-design-next.pages.dev

View logs

gemini-code-assist

Code Review

This pull request introduces a marginSize prop to the QRCode component, allowing control over the quiet zone. The implementation involves passing this prop down to the underlying qrcode component. The changes are also reflected in the documentation, and a new test case has been added. My review focuses on improving the robustness of the new test case.

components/qr-code/__tests__/index.test.tsx

github-actions · 2026-01-12T02:33:28Z

size-limit report 📦

Path	Size
`dist/antd.min.js`	523.01 KB (+3 B 🔺)
`dist/antd-with-locales.min.js`	616.52 KB (+4 B 🔺)

pkg-pr-new · 2026-01-12T02:34:57Z

More templates

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

commit: d9da26b

cloudflare-workers-and-pages · 2026-01-12T02:39:07Z

Deploying ant-design with Cloudflare Pages

Latest commit:	`f817d55`
Status:	✅ Deploy successful!
Preview URL:	https://c48d7f8d.ant-design.pages.dev
Branch Preview URL:	https://feat-add-margin-size-prop.ant-design.pages.dev

View logs

codecov · 2026-01-12T02:39:40Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (27826a8) to head (f817d55).
⚠️ Report is 1 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #56569   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          807       807           
  Lines        14922     14922           
  Branches      3935      3935           
=========================================
  Hits         14922     14922

☔ 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/qr-code/__tests__/index.test.tsx

Signed-off-by: afc163 <afc163@gmail.com>

codecov · 2026-01-12T06:38:59Z

Bundle Report

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

Bundle name	Size	Change
antd.min-array-push	12.0MB	8.14MB (211.08%) ⬆️⚠️

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.31MB	6.31MB	100.0% 🚀
`antd.js` (New)	5.69MB	5.69MB	100.0% 🚀
~~`antd-with-locales.min.js`~~ (Deleted)	-2.12MB	0 bytes	-100.0% 🗑️
~~`antd.min.js`~~ (Deleted)	-1.73MB	0 bytes	-100.0% 🗑️

components/qr-code/index.en-US.md

components/qr-code/index.zh-CN.md

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: afc163 <afc163@gmail.com>

* feat: add marginSize prop for QRCode quiet zone * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * Update components/qr-code/index.en-US.md Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: afc163 <afc163@gmail.com> * Apply suggestions from code review Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: thinkasany <480968828@qq.com>

feat: add marginSize prop for QRCode quiet zone

fc461e8

Merge branch 'feature' into feat/add-margin-size-prop

e341632

gemini-code-assist bot reviewed Jan 12, 2026

View reviewed changes

components/qr-code/__tests__/index.test.tsx Show resolved Hide resolved

Merge branch 'feature' into feat/add-margin-size-prop

146c120

afc163 marked this pull request as ready for review January 12, 2026 05:40

afc163 commented Jan 12, 2026

View reviewed changes

components/qr-code/__tests__/index.test.tsx Show resolved Hide resolved

Apply suggestions from code review

3a4fa04

Signed-off-by: afc163 <afc163@gmail.com>

thinkasany reviewed Jan 12, 2026

View reviewed changes

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

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

afc163 and others added 3 commits January 12, 2026 20:45

Update components/qr-code/index.en-US.md

58e15b5

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: afc163 <afc163@gmail.com>

Apply suggestions from code review

d9da26b

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: afc163 <afc163@gmail.com>

Merge branch 'feature' into feat/add-margin-size-prop

f817d55

li-jia-nan approved these changes Jan 12, 2026

View reviewed changes

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

thinkasany approved these changes Jan 12, 2026

View reviewed changes

thinkasany merged commit 5b9b6f8 into feature Jan 12, 2026
43 of 44 checks passed

thinkasany deleted the feat/add-margin-size-prop branch January 12, 2026 13:44

zombieJ mentioned this pull request Jan 13, 2026

docs: Changelog of 6.2.0 #56588

Merged

17 tasks

Uh oh!

Conversation

afc163 commented Jan 12, 2026 • 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!

bolt-new-by-stackblitz bot commented Jan 12, 2026

Uh oh!

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

Uh oh!

Review skipped

Uh oh!

gemini-code-assist bot commented Jan 12, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

👁 Visual Regression Report for PR #56569 Failed ❌

Uh oh!

cloudflare-workers-and-pages bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ant-design-next with Cloudflare Pages

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 Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

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

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ant-design with Cloudflare Pages

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

codecov bot commented Jan 12, 2026 • 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!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

afc163 commented Jan 12, 2026 •

edited

Loading

coderabbitai bot commented Jan 12, 2026 •

edited

Loading

github-actions bot commented Jan 12, 2026 •

edited

Loading

github-actions bot commented Jan 12, 2026 •

edited by afc163

Loading

cloudflare-workers-and-pages bot commented Jan 12, 2026 •

edited

Loading

github-actions bot commented Jan 12, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 12, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 12, 2026 •

edited

Loading

codecov bot commented Jan 12, 2026 •

edited

Loading

codecov bot commented Jan 12, 2026 •

edited

Loading