Skip to content

[PGE-142700] Align input and dropdown text with the 14px scale - #1142

Merged
Yayo-Arellano merged 4 commits into
v4from
feature/pge-142700
Sep 7, 2026
Merged

Yayo-Arellano merged 4 commits into
v4from
feature/pge-142700

Conversation

@iu-glints

@iu-glints iu-glints commented Sep 7, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

The new typography scale sets body text to 14px, but the shared input and dropdown styles still hard-code 16px on desktop.

  • Set input text, inherited prefix/suffix text, dropdown activators, and searchable selected values to 14px.
  • Remove the redundant mobile font-size overrides.
  • Change the textarea floating-label Storybook example from 16px to 14px. Textarea content and menu option labels already use the updated body typography.
  • Refresh 80 affected Playwright screenshot baselines, including inputs embedded in Modal and SimplePagination, using the CI Playwright v1.29.0 Focal container.

This covers the @next text, 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:

Text Before After
Input value and placeholder 16px 14px
Searchable selected value 16px 14px
Textarea content 14px 14px
Textarea floating-label example 16px 14px
OTP screenshot before OTP screenshot after
16px OTP digits 14px OTP digits

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

@iu-glints iu-glints self-assigned this Sep 7, 2026
@github-actions

github-actions Bot commented Sep 7, 2026 •

Copy link
Copy Markdown

@iu-glints

Copy link
Copy Markdown
Collaborator Author

Tested commit 3f5f8c0.

  • PASS: 30 relevant @next stories at 1440, 769, 768 and 390px widths, 120 story/viewport checks. Visible field text and placeholders are 14px with 21px line height and weight 400.
  • PASS: text/password/number/textarea entry and retention, currency formatting, six-digit OTP entry, searchable and non-searchable selection, multi-select/combobox selection, search filtering, disabled and error states at desktop/mobile widths. Default input height is 36px with 0px 12px padding.
  • CI validate and deploy passed. Previously recorded local suite: 554 tests passed.
  • CI visual shard 1: 94 passed, 2 failed. Both failures are AuthenticationInput screenshots after filling the first digit or all digits. Inspected expected/actual/diff images: differences are confined to the digit glyphs, consistent with the intended 16px-to-14px change; boxes and spacing match. The other three shards were cancelled.

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

@iu-glints

Copy link
Copy Markdown
Collaborator Author

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:
https://github.com/glints-dev/glints-aries/actions/runs/34118563969

This resolves the previously reported visual-baseline failures. Ready for review, @Yayo-Arellano.

@Yayo-Arellano
Yayo-Arellano merged commit 9fae050 into v4 Sep 7, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants