kasiazjc opened a new pull request, #34534:
URL: https://github.com/apache/superset/pull/34534
### SUMMARY
Replace inconsistent custom spacing values with Ant Design's standardized
`marginXS` token for consistent label-to-form-control spacing across the
application. This ensures all form elements follow Ant Design's vanilla spacing
standards.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
**Before:** Inconsistent spacing ranging from 2px to 8px between labels and
form controls
**After:** Consistent `marginXS` spacing (8px) throughout the application
### TESTING INSTRUCTIONS
1. Navigate to various forms throughout the application:
- List view filters (Dashboards, Charts, Datasets pages)
- Explore controls panel (chart creation/editing)
- Database connection modal
- Report scheduling modal
2. Verify that label-to-control spacing appears consistent across all forms
3. Check that the spacing feels natural and follows Ant Design standards
4. Test responsive behavior to ensure spacing remains appropriate on mobile
### ADDITIONAL INFORMATION
- [ ] 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
### Detailed Changes Made:
**1. ListView Filters (`/src/components/ListView/Filters/Base.ts:34`)**
- **Before:** `margin-bottom: ${theme.sizeUnit}px` (4px)
- **After:** `margin-bottom: ${theme.marginXS}px` (8px)
- **Impact:** Search filters, date range filters, select filters in list
views
**2. Explore ControlHeader
(`/src/explore/components/ControlHeader.tsx:120`)**
- **Before:** `margin-bottom: ${theme.sizeUnit * 0.5}px` (2px)
- **After:** `margin-bottom: ${theme.marginXS}px` (8px)
- **Impact:** All form controls in chart explore interface
**3. SelectControl Type Labels
(`/src/explore/components/controls/SelectControl.jsx:265`)**
- **Before:** `margin-right: ${theme.sizeUnit * 2}px` (8px)
- **After:** `margin-right: ${theme.marginXS}px` (8px)
- **Impact:** Select dropdown type labels (minimal visual change)
**4. Database Modal Labels
(`/src/features/databases/DatabaseModal/styles.ts:33`)**
- **Before:** `margin-bottom: ${theme.sizeUnit * 2}px` (8px)
- **After:** `margin-bottom: ${theme.marginXS}px` (8px)
- **Impact:** Database connection form labels (minimal visual change)
**5. Report Modal Components
(`/src/features/reports/ReportModal/styles.tsx:54,66,71`)**
- **Before:** `margin-right: ${theme.sizeUnit * 2}px` (8px), `margin-bottom:
${theme.sizeUnit * 3}px` (12px)
- **After:** `margin-right: ${theme.marginXS}px` (8px), `margin-bottom:
${theme.marginXS}px` (8px)
- **Impact:** Report scheduling modal icons and form spacing
### Benefits:
- **Consistency:** All label-to-control spacing now uses the same Ant Design
token
- **Maintainability:** Easier to update spacing globally by modifying theme
tokens
- **Design System Compliance:** Follows Ant Design's established spacing
patterns
- **Future-proofing:** Changes to Ant Design spacing tokens will
automatically apply
🤖 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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
