Skip to content

refactor(Button): Upgrade Button component to Antd5 - #31623

Merged
geido merged 8 commits into
apache:masterfrom
alexandrusoare:alexandrusoare/refactor/button
Jan 9, 2025
Merged

geido merged 8 commits into
apache:masterfrom
alexandrusoare:alexandrusoare/refactor/button

Conversation

@alexandrusoare

Copy link
Copy Markdown
Contributor

SUMMARY

Fixes #31566

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE
image

AFTER
image

BEFORE
image

AFTER
image

BEFORE
image

AFTER
image

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@korbit-ai

korbit-ai Bot commented Dec 26, 2024

Copy link
Copy Markdown

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

@geido geido added hold! On hold preset:bounty Issues that have been selected by Preset and have a bounty attached. labels Dec 27, 2024
@alexandrusoare
alexandrusoare marked this pull request as ready for review January 1, 2025 19:26
@dosubot dosubot Bot added change:frontend Requires changing the frontend frontend:refactor:antd5 labels Jan 1, 2025

@korbit-ai korbit-ai Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Fix Detected
Functionality Invalid Ant Design v5 Button Class Names ▹ view
Files scanned ​
File Path Reviewed
superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx ✅
superset-frontend/src/components/DropdownButton/index.tsx ✅
superset-frontend/src/features/datasets/styles.ts ✅
superset-frontend/src/components/IconButton/index.tsx ✅
superset-frontend/src/components/DropdownSelectableIcon/index.tsx ✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx ✅
superset-frontend/src/components/PageHeaderWithActions/index.tsx ✅
superset-frontend/src/theme/index.ts ✅
superset-frontend/src/components/Button/index.tsx ✅
superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx ✅
superset-frontend/cypress-base/cypress/support/directories.ts ✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

  • You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
  • You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
  • Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
  • Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
  • Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

  • Check out our docs on how you can make Korbit work best for you and your team.
  • Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings ​
Setting Value
Review Schedule Automatic excluding drafts
Max Issue Count 10
Automatic PR Descriptions ❌
Issue Categories ​
Category Enabled
Naming ✅
Database Operations ✅
Documentation ✅
Logging ✅
Error Handling ✅
Systems and Environment ✅
Objects and Data Structures ✅
Readability and Maintainability ✅
Asynchronous Processing ✅
Design Patterns ✅
Third-Party Libraries ✅
Performance ✅
Security ✅
Functionality ✅

Feedback and Support

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

Comment on lines 43 to +47
const StyledDropdownButton = styled(DropdownButton as FC<DropdownButtonProps>)`
button.ant-btn:first-of-type {
button.antd5-btn:first-of-type {
display: none;
}
> button.ant-btn:nth-of-type(2) {
> button.antd5-btn:nth-of-type(2) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Invalid Ant Design v5 Button Class Names category Functionality

Tell me more
What is the issue?

The CSS selector 'antd5-btn' is incorrect. Ant Design v5 uses the class name 'ant-btn' for buttons, not 'antd5-btn'.

Why this matters

The styled components won't properly target and style the buttons because the CSS selectors are targeting non-existent classes, breaking the intended button styling functionality.

Suggested change

Replace 'antd5-btn' with 'ant-btn' in both CSS selectors:

button.ant-btn:first-of-type {
    display: none;
  }
  > button.ant-btn:nth-of-type(2) {
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

@sadpandajoe
sadpandajoe requested a review from kasiazjc January 7, 2025 18:26
@rusackas

rusackas commented Jan 7, 2025 •

Copy link
Copy Markdown
Member

This is a good opportunity to remove any custom styling and move closer to AntD's native button, if there's interest in doing so. CC @kasiazjc

@geido

geido commented Jan 9, 2025

Copy link
Copy Markdown
Member

/testenv up

@geido

geido commented Jan 9, 2025

Copy link
Copy Markdown
Member

This is a good opportunity to remove any custom styling and move closer to AntD's native button, if there's interest in doing so. CC @kasiazjc

I agree. @kasiazjc let me know if we want to proceed with this I can create a separate issue to keep the scope manageable.

@geido geido left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks for this!

@apache apache deleted a comment from github-actions Bot Jan 9, 2025
@apache apache deleted a comment from github-actions Bot Jan 9, 2025
@geido geido removed the hold! On hold label Jan 9, 2025
@geido
geido merged commit 9cd3a8d into apache:master Jan 9, 2025
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 5.0.0 First shipped in 5.0.0 labels Jul 29, 2025
qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels change:frontend Requires changing the frontend frontend:refactor:antd5 preset:bounty Issues that have been selected by Preset and have a bounty attached. size/L 🚢 5.0.0 First shipped in 5.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ant Design 5: Upgrade Button component

4 participants