sadpandajoe opened a new pull request, #42146:
URL: https://github.com/apache/superset/pull/42146
### SUMMARY
The Ant Design v5 → v6 upgrade (#41636) renamed many of antd's generated
internal
`.ant-*` DOM classes. Superset styles a number of those internals directly —
via
styled-components, `css` template literals, `*.styles.ts`, and runtime DOM
lookups
(`getPopupContainer`, `.closest()`, `querySelector`) — so when a class was
renamed
the override silently stopped matching. Nothing throws; the styling just
quietly
breaks, producing a range of visual regressions (mis-sized modals, broken
progress
bars, alert layout, spinner sizing, step connectors, popups escaping their
modal,
etc.).
This PR sweeps the frontend for every stale `.ant-*` reference left behind
by the
v6 rename and updates them to the v6 class names. The specific renames fixed:
| v5 class | v6 class | Affected areas |
|---|---|---|
| `.ant-modal-content` | `.ant-modal-container` | Modal wrapper styling;
Select/popup `getPopupContainer`/`.closest()` anchoring so menus stay clipped
inside modals |
| `.ant-progress-inner` | `.ant-progress-rail` | ProgressBar; DatabaseModal
upload progress |
| `.ant-progress-bg` | `.ant-progress-track` | ProgressBar striped gradient |
| `.ant-alert-message` | `.ant-alert-title` | ImportModal, DatabaseModal
warning alert |
| `.ant-alert-action` | `.ant-alert-actions` | SQL Lab editor, native-filter
modal footers |
| `.ant-spin-nested-loading .ant-spin .ant-spin-dot` | `.ant-spin
.ant-spin-dot` | Table / VirtualTable spinner sizing (wrapper element dropped
in v6) |
| `.ant-steps-item-tail` | `.ant-steps-item-rail` | ChartCreation step
connector line |
| `.ant-steps-item-description` (removed) | text now in
`.ant-steps-item-content` | ChartCreation step description styling |
To keep future antd bumps from re-introducing silent breakage, this PR also
extends
`antdDomContract.test.tsx` — a set of tests that render antd directly and
assert the
exact internal class names our CSS depends on. If a future antd upgrade
renames one
of these classes again, the contract test fails loudly with a clear pointer
instead
of shipping a visual regression.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
_N/A — these are internal DOM-class selector fixes. The "after" is the
restored v5
appearance across the affected surfaces (modals, progress bars, alerts,
spinners,
step wizards)._
### TESTING INSTRUCTIONS
- `cd superset-frontend && npm run test -- antdDomContract` — the DOM-class
contract
suite passes (it pins every class touched here against a real antd v6
render).
- Manual spot checks against the affected surfaces:
- Open any modal (e.g. Datasource editor, native-filter config) — content
fills the
modal correctly and Select dropdowns inside it stay clipped within the
modal.
- Database connection modal — upload progress bar and warning alert render
correctly.
- SQL Lab — the alert action buttons in the editor sit in the alert's
action slot.
- Chart creation wizard — step connector line is hidden and step
descriptions are
spaced correctly.
- Any table with a loading spinner (e.g. VirtualTable) — spinner is sized
correctly.
### 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
--
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]
