[PGE-142700] Align input and dropdown text with the 14px scale - #1142
Conversation
|
Storybook Preview: https://615abff875b8f5004aa277ac-iigxmkmnhl.chromatic.com/ |
|
Tested commit 3f5f8c0.
Result: font metrics and tested interactions pass; visual CI is not green. Refresh the intended authentication-input baselines in the prescribed Playwright environment, then rerun all visual shards to identify any further expected differences. The Chromatic preview requires sign-in, so browser verification used local Storybook at the exact PR commit. React controlled/uncontrolled warnings appeared during searchable-select interactions. CI report: https://github.com/glints-dev/glints-aries/actions/runs/34109640497/artifacts/10013966056 |
|
Updated 80 affected screenshot baselines for the 14px scale, including the shared inputs embedded in Modal and SimplePagination. Regenerated in mcr.microsoft.com/playwright:v1.29.0-focal and visually reviewed. OTP and editable-pagination images match the earlier CI actual images byte-for-byte. Latest commit: e53f0d6. All four visual-test shards, validate, and deploy now pass on the latest commit: This resolves the previously reported visual-baseline failures. Ready for review, @Yayo-Arellano. |
Summary
The new typography scale sets body text to 14px, but the shared input and dropdown styles still hard-code 16px on desktop.
This covers the
@nexttext, password, number, currency, authentication, combobox, select, and textarea stories.Visual comparison
Computed browser styles, comparing the deployed Storybook with this branch at a 1440px viewport:
All updated screenshot dimensions are preserved. The OTP and editable pagination baselines were also checked byte-for-byte against CI's actual images. React controlled/uncontrolled input warnings appeared in the local searchable-select stories during interaction checks.
Tracking