Repository navigation
refactor(Button): Upgrade Button component to Antd5 - #31623
Conversation
|
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
|
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Fix Detected |
|---|---|---|
| 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-reviewon 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-reviewcommand in a comment at the root of your PR.- You can ask Korbit to generate a new PR description using the
/korbit-generate-pr-descriptioncommand in any comment on your PR.- Too many Korbit comments? I can resolve all my comment threads if you use the
/korbit-resolvecommand 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
| 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) { |
There was a problem hiding this comment.
Invalid Ant Design v5 Button Class Names 
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.
…andrusoare/refactor/button
|
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 |
|
/testenv up |
SUMMARY
Fixes #31566
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
BEFORE

AFTER

BEFORE

AFTER

BEFORE

AFTER

TESTING INSTRUCTIONS
ADDITIONAL INFORMATION