kasiazjc opened a new pull request, #34658:
URL: https://github.com/apache/superset/pull/34658
## SUMMARY
<\!--- Describe the change below, including rationale and design decisions
-->
This PR improves the visual design of the SaveDatasetModal in SQL Lab by
fixing layout hierarchy issues and implementing proper theme compliance.
**Problems Fixed:**
- Form fields were incorrectly positioned inline with radio buttons causing
poor UX
- Hardcoded spacing and sizing that didn't respect theme tokens
- Inconsistent form field heights and styling
- Poor visual hierarchy that made the modal hard to scan
**Design Changes:**
- **Restructured Layout**: Changed from inline to vertical stacking with
proper indentation
- **Theme Compliance**: Replaced all hardcoded values with theme spacing
tokens (`theme.sizeUnit`)
- **Typography**: Updated to use theme color tokens (`theme.colorText`,
`theme.colorTextSecondary`) and font weights
- **Form Fields**: Standardized heights, added placeholders, and consistent
max-width (400px)
- **Spacing**: Added consistent gaps between options and proper form field
indentation
## BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<\!--- Skip this if not applicable -->
**Before:**
- Radio buttons with form fields positioned inline creating messy layout
- Hardcoded spacing causing inconsistencies across themes
- Poor visual hierarchy
**After:**
- Clean vertical hierarchy following the pattern:
```
│ (⚫️) Save as new │
│ [form field] │
│ │
│ ( ) Overwrite existing │
│ [form field] │
```
- Theme-aware spacing and colors
- Consistent form field styling
## TESTING INSTRUCTIONS
<\!--- Required\! What steps can be taken to manually verify the changes? -->
1. Navigate to SQL Lab
2. Execute a query that returns results
3. Click on "Save as Dataset" or similar action to open the SaveDatasetModal
4. Verify the new layout:
- Radio buttons stack vertically
- Form fields are properly indented under each radio option
- Consistent spacing between elements
- Form fields have proper height and styling
5. Test both radio options:
- "Save as new" - input field should be enabled when selected
- "Overwrite existing" - autocomplete field should be enabled when
selected
6. Test in both light and dark themes to verify theme token usage
7. Verify form validation and functionality remains unchanged
## ADDITIONAL INFORMATION
<\!--- Check any relevant boxes with "x" -->
<\!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] 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
**Technical Details:**
- Updated `SaveDatasetModal/index.tsx` with new styled-components structure
- Replaced hardcoded CSS values with theme tokens for better maintainability
- Maintained all existing functionality and behavior
- Improved accessibility with better form field structure
This change is part of ongoing UI/UX improvements to make Superset's
interface more consistent and theme-aware.
🤖 Generated with [Claude Code](https://claude.ai/code)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
