Skip to content

feat(Upload): upload support to setting upload button class names style#56578

Merged
afc163 merged 13 commits intoant-design:featurefrom
QdabuliuQ:feat/upload-add-uploadButton-classNames-style
Jan 26, 2026
Merged

feat(Upload): upload support to setting upload button class names style#56578
afc163 merged 13 commits intoant-design:featurefrom
QdabuliuQ:feat/upload-add-uploadButton-classNames-style

Conversation

@QdabuliuQ
Copy link
Contributor

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ⌨️ Accessibility improvement
  • ❓ Other (about what?)

🔗 Related Issues

issues: 56571

💡 Background and Solution

Upload component lacks semantic customization support for the upload button container.
Add uploadButton to classNames and styles props for controlling the upload button container (ant-upload-select) styles.

📝 Change Log

Language Changelog
🇺🇸 English upload add classNames.uploadButton and styles.uploadButton props
🇨🇳 Chinese upload 新增 classNames.uploadButton 和 styles.uploadButton 属性

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 12, 2026

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

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
Copy link
Contributor

github-actions bot commented Jan 12, 2026

👁 Visual Regression Report for PR #56578 Failed ❌

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

Expected (Branch feature) Actual (Current PR) Diff
button-debug-color-variant.compact.png button-debug-color-variant.compact.png button-debug-color-variant.compact.png button-debug-color-variant.compact.png
button-debug-color-variant.dark.png button-debug-color-variant.dark.png button-debug-color-variant.dark.png button-debug-color-variant.dark.png
button-debug-color-variant.default.png button-debug-color-variant.default.png button-debug-color-variant.default.png button-debug-color-variant.default.png
pagination-component-token.compact.png pagination-component-token.compact.png pagination-component-token.compact.png pagination-component-token.compact.png
pagination-component-token.dark.png pagination-component-token.dark.png pagination-component-token.dark.png pagination-component-token.dark.png
pagination-component-token.default.png pagination-component-token.default.png pagination-component-token.default.png pagination-component-token.default.png
pagination-mini.compact.png pagination-mini.compact.png pagination-mini.compact.png pagination-mini.compact.png
pagination-style-class.compact.png pagination-style-class.compact.png pagination-style-class.compact.png pagination-style-class.compact.png

Warning

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


Important

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

  • Checked all diffs in the full report
  • Visual diff is acceptable

@github-actions
Copy link
Contributor

github-actions bot commented Jan 12, 2026

Preview is ready

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @QdabuliuQ, I'm Gemini Code Assist1! 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 Upload component by introducing dedicated classNames and styles properties specifically for its upload button. This change empowers developers with greater flexibility to customize the visual presentation of the upload button container, ensuring it can be seamlessly integrated into various design systems and themes. The update improves the component's semantic styling capabilities, making it more adaptable and user-friendly for custom UI requirements.

Highlights

  • New Customization Props: Introduced classNames.uploadButton and styles.uploadButton props to the Upload component, allowing developers to apply custom CSS classes and inline styles directly to the upload button container.
  • Enhanced Semantic Styling: This feature addresses the previous lack of semantic customization support for the upload button, providing more granular control over its appearance.
  • Updated Interfaces and Demos: The UploadSemanticClassNames and UploadSemanticStyles interfaces have been updated to include the new uploadButton properties. Demo files and test snapshots were also updated to reflect and validate these changes.

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

Footnotes

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

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request successfully adds support for classNames.uploadButton and styles.uploadButton to the Upload component, allowing for better customization of the upload button container. The implementation is clean, follows existing patterns in the codebase, and is well-tested with new unit tests and demo updates. The changes are correct and address the feature request effectively. I have no further suggestions for improvement.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 12, 2026

@meet-student meet-student requested a review from zombieJ January 12, 2026 07:15
@codecov
Copy link

codecov bot commented Jan 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (e5328f6) to head (6122c24).
⚠️ Report is 6 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #56578   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          807       807           
  Lines        14946     14946           
  Branches      3943      3943           
=========================================
  Hits         14946     14946           

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

@codecov
Copy link

codecov bot commented Jan 12, 2026

Bundle Report

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

Detailed changes
Bundle name Size Change
antd.min-array-push 3.86MB 536 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 268 bytes 2.12MB 0.01%
antd.min.js 268 bytes 1.74MB 0.02%

@QdabuliuQ QdabuliuQ changed the title feat: upload support to setting upload button class names style feat(Upload): upload support to setting upload button class names style Jan 12, 2026
root: 'Root container element with layout styles, disabled text color, user-select control, cursor styles and other basic styles',
list: 'File list container with layout arrangement, transition animations, spacing control and other styles',
item: 'File item element with padding, background color, border styles, hover effects, status colors, transition animations and other styles',
uploadButton:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个描述不对
应该 是 upload Button root 类似

@zombieJ 豆酱这个语义化名称 得定一下吧 , 这个感觉怪怪的

meet-student
meet-student previously approved these changes Jan 19, 2026
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 19, 2026
Co-authored-by: 𝑾𝒖𝒙𝒉 <wxh16144@qq.com>
Signed-off-by: thinkasany <480968828@qq.com>
@afc163 afc163 merged commit 7f1bd84 into ant-design:feature Jan 26, 2026
39 checks passed
thinkasany added a commit to QdabuliuQ/ant-design that referenced this pull request Jan 27, 2026
…le (ant-design#56578)

* feat: add uploadButton support to Upload classNames and styles

* fix: rename uploadButton style key to trigger in Upload

* feat: support custom trigger class and style in Upload

* Update components/upload/demo/_semantic.tsx

Co-authored-by: 𝑾𝒖𝒙𝒉 <wxh16144@qq.com>
Signed-off-by: thinkasany <480968828@qq.com>

* chore: updare upload snapshot file

---------

Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: 𝑾𝒖𝒙𝒉 <wxh16144@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants