Upgrade Ant Design to 6.6.1 and fix visual regressions - #608
Merged
Conversation
Re-applies the antd 6.6.1 upgrade, this time verified pixel-by-pixel against 6.2.1 baselines: full-page screenshots of the login, prioritization (cards, patients, prescriptions, expanded advanced filter), screening (drugs tab, checked state, interventions tab), interventions list and admin exams (list + modal) pages were captured on 6.2.1 and the upgraded pages now render pixel-identical to all of them. Class renames handled (custom overrides/queries retargeted): - Tabs: ant-tabs-content/-holder -> ant-tabs-body/-holder; ant-tabs-tabpane(-hidden) -> ant-tabs-content(-hidden), including the Screening keyboard-navigation querySelectors. - Checkbox: ant-checkbox-inner removed; border/background live on ant-checkbox itself. - Select: ant-select-content-value merged into ant-select-content-has-value on the content element. - Spin: the nested wrapper ant-spin-nested-loading is now ant-spin. Rendering changes in antd >= 6.3 that broke page layouts, counteracted in Reboot.jsx / ConfigProvider so everything keeps the 6.2 look: - The Spin wrapper now sets font-size/line-height, so whole page bodies (most pages render inside a Spin) inherited antd's 1.5714 line-height instead of the app's 1.15 and every block below shifted/grew. Restored inheritance on wrappers that contain an ant-spin-container. - Button icons are now centered inline-flex with an \00a0 ::before strut that redefines the icon baseline, nudging every in-button icon glyph ~1-3px. Restored the inline rendering and removed the strut. - The collapsed sider menu lays items out with flexbox, centering each icon 1px lower; compensated on the icon. - boxShadowTertiary got darker; pinned the previous value via the ConfigProvider theme token. Also scopes the mocked e2e "Fechar" modal locators to the footer since antd 6.6 adds an aria-labelled close button to modal headers. Verified: tsc + vite build passes, eslint clean (0 errors, pre-existing warnings only), full mocked e2e suite 52/52, and an 11-page visual regression suite matches the 6.2.1 baselines exactly.
Screenshots 11 page states (prioritization, screening, interventions, admin, login) with a frozen clock and fixed fixture dates so two runs are pixel-comparable. Record baselines with --update-snapshots before a bump, re-run after it to diff. Baselines are machine-specific, so the snapshot directory is gitignored and the suite skips itself in CI.
![amazon-q-developer[bot]](https://avatars.githubusercontent.com/in/1220912?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
The Ant Design upgrade from 6.2.1 to 6.6.1 with corresponding CSS fixes appears well-executed. The changes appropriately address DOM structure changes introduced in Ant Design 6.3+ through targeted CSS selector updates and theme token adjustments. The addition of a visual regression test suite provides valuable tooling for future dependency upgrades. All changes maintain backward compatibility and no blocking defects were identified.
You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Upgrades Ant Design from 6.2.1 to 6.6.1 and applies targeted CSS fixes to maintain visual consistency across the application. Adds a visual regression test harness for future UI-affecting dependency bumps.
Key Changes
Dependency upgrade: Ant Design 6.2.1 → 6.6.1
CSS fixes for antd 6.3+ layout changes:
boxShadowTertiaryto maintain card/popup appearanceComponent selector updates for antd 6.3+ DOM changes:
.ant-tabs-tabpane→.ant-tabs-content(Screening, Patient styles).ant-tabs-tabpane-hidden→.ant-tabs-content-hidden.ant-tabs-content→.ant-tabs-body(tab container wrapper).ant-spin-nested-loading→.ant-spin(DataViewer).ant-select-content-value→.ant-select-content-has-value(Prioritization)Checkbox styling: Updated selectors to target new antd 6.3+ DOM structure (
.ant-checkboxinstead of.ant-checkbox-inner)Test updates: Fixed modal footer button selectors in permission/config tests (
.ant-modal-footerscope added for specificity)Visual regression test suite: Added
tests/mocked/visual.antd.spec.ts— a local-only harness for pixel-by-pixel comparison of UI changes across dependency bumps. Includes frozen timestamps, fixture hydration, and baseline snapshots (gitignored, machine-specific).Implementation Details
https://claude.ai/code/session_01RTmKkYCb6gwApZuQ1Sg5jb