Font resize component fixes: Phase 2 by amyleadem · Pull Request #1800 · department-of-veterans-affairs/component-library

amyleadem · 2025-09-29T21:23:28Z

Chromatic

https://4881-font-resizing-fixes--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Fixed font resizing issues in the following components:

va-additional-info (issue found in a text input variant)
va-date
va-memorable-date
va-search-input
va-telephone-input
va-text-input

For reference, these issues are documented in the component stories spreadsheet (Google docs 🔒)

Screenshots

va-additional-info (as found in va-text-input)

va-date

va-memorable-date

va-search-input

va-telephone-input

va-text-input

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

Engineering: platform-design-system-fe
Accessibility: platform-design-system-a11y
Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

🌱 New Component Variation Added

The PR has the minor label
The variation matches its Figma design.
Any new properties, custom events, or utility functions have e2e and/or unit tests
A new story has been added to the component's existing Storybook page
Any Chromatic UI snapshot changes have been accepted by a design reviewer
Tested in vets-website using Verdaccio
Engineering has approved the PR
Design has approved the PR

🐞 Component Fix

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any markup changes are evaluated for impact on vets-website.
- Will any vets-website tests fail from the change?
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

♿️ Component Fix - Accessibility

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR
Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

The PR has the major label
vets-website and content-build have been evaluated to determine the impact of the breaking change
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Tested in vets-website using Verdaccio
Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

The PR has the minor label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

📖 Storybook Update

The PR has the ignore-for-release label
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

🎨 CSS-Library Update

The PR has the css-library label
vets-website and content-build have been checked to determine the impact of any breaking changes
Engineering has approved the PR

…te and memorable date

amyleadem · 2025-09-30T15:27:36Z

 .select-month {
-  width: 8.125rem;
-  margin-right: 0.9375rem;
+  width: 16ch;


Note
Replaced rem with ch here because the width is determined primarily by the number of characters expected/allowed. I did not use the current input width tokens because they rely on ex units, which is intended primarily for vertical height of the letters, rather than width.

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

amyleadem · 2025-09-30T15:32:19Z


 .select-month {
-  width: 8.125rem;
-  margin-right: 0.9375rem;


Note
Replaced margin-right here with a column-gap on .date-container. This simplified implementation and standardized it to more closely match the spacing in memorable date.

amyleadem · 2025-09-30T15:33:06Z

 .usa-memorable-date {
-  margin-top: 16px;
-  // USWDS v3.7.1 set flex-wrap: wrap; This caused the year to always wrap when the month select option was active.
-  flex-wrap: nowrap;


Note
We want to allow wrap here to accommodate zoom and text resizing.

amyleadem · 2025-09-30T21:59:49Z

+            <div>
+              <input
+                class="usa-input"
+                id="search-field"
+                name="search"
+                type="search"
+                ref={el => (this.inputRef = el as HTMLInputElement)}
+                aria-autocomplete={ariaAutoComplete}
+                aria-controls={ariaControls}
+                aria-expanded={ariaExpanded}
+                aria-haspopup={ariaHasPopup}
+                aria-label={label}
+                autocomplete="off"
+                onFocus={handleInputFocus}
+                onInput={handleInput}
+                onKeyDown={handleInputKeyDown}
+                role={role}
+                value={value}
              />
-            </button>
+              <button type="button" onClick={handleClearButtonClick} class={clearButtonClasses} aria-label="Clear the search contents">
+                <va-icon
+                  class="usa-search__clear-icon"
+                  icon="close"
+                  size={3}
+                />
+              </button>
+            </div>


Note
Adding this wrapper div lets us position the clear icon relative to the nested div, rather than having to position it relative to the calculated widths of the search button. This new structure should make the styles more resilient, but a markup change has the potential to cause breaks, so curious to hear feedback.

jamigibbs

I think dev looks good but I do have a question/concern about how the USWDS label style is being imported in va-date. I think we could do the same thing with the component module import pattern like the other USWDS-isified components. We'd just need to change the stylesheet to scss and add the CSS class. You are much more in the weeds here so I might not have the full context what what is needing to be done.

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

jamigibbs

It feels like a small miracle that there are no UI test changes to accept but dev looks good to me! Thank you! 🚀

amyleadem · 2025-10-02T23:37:39Z

I feel like it should be reporting changes in the UI tests :/
Va-date at least has a clear visual change in the default font size and display:

@jamigibbs Is it normal for Chromatic to miss them? Any tips to re-run the tests so they catch the differences?

jamigibbs · 2025-10-03T13:21:40Z

@jamigibbs Is it normal for Chromatic to miss them? Any tips to re-run the tests so they catch the differences?

@amyleadem What has worked in the past is updating the onlyChanged setting in the workflow to false. That should force it to create a full snapshot run and pick up the changes. Before merging, just revert it back to true.

component-library/.github/workflows/chromatic.yml

Line 36 in c647d75

onlyChanged: true

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

amyleadem · 2025-10-03T20:37:16Z

Thanks @jamigibbs, that worked! Re-running Chromatic caught 30 changes (😮), but thankfully all of them are expected. If you could take a look and let me know if you have any concerns, that would be great.

jeana-adhoc

I don't know how/why this has sat since October, but I just reviewed this, and it looks good.

I did not merge main down into this, but we ought to and hope nothing... breaks.

amyleadem added 2 commits September 29, 2025 10:16

Convert va-date fixed units to relative units

dca7074

Replaced fixed units with relative units for memorable date; align da…

f20c646

…te and memorable date

amyleadem added the patch Patch change in semantic versioning label Sep 29, 2025

amyleadem and others added 6 commits September 29, 2025 15:50

Fix font resizing issues in search input

127a7b1

Improve clarity in comments

c9aa502

Fix font resizing issues in telephone input

7655ec3

Fix font resizing issues in text-input and additional info

165a618

Update search input e2e test

5df22ba

Merge branch 'main' into 4881-font-resizing-fixes

37f949a

amyleadem commented Sep 30, 2025

View reviewed changes

amyleadem added 2 commits September 30, 2025 08:28

Fix bottom margin on date and memorable date label

4d46de0

Merge branch '4881-font-resizing-fixes' of https://github.com/departm…

12f94de

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

amyleadem commented Sep 30, 2025

View reviewed changes

amyleadem marked this pull request as ready for review September 30, 2025 19:43

amyleadem requested a review from a team as a code owner September 30, 2025 19:43

amyleadem commented Sep 30, 2025

View reviewed changes

Remove unused import

249063e

jamigibbs reviewed Oct 1, 2025

View reviewed changes

Comment thread packages/web-components/src/components/va-date/va-date.scss Outdated

amyleadem and others added 4 commits October 1, 2025 16:14

Use .usa- classes on form elements; standardize with memorable date

3adb1d3

Merge branch 'main' into 4881-font-resizing-fixes

99bb5c4

Update va-date tests

7056c05

Merge branch '4881-font-resizing-fixes' of https://github.com/departm…

56ddcee

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

amyleadem requested a review from jeana-adhoc October 1, 2025 23:38

jamigibbs approved these changes Oct 2, 2025

View reviewed changes

amyleadem changed the base branch from main to 4878-font-resize-phase-1 October 2, 2025 23:08

amyleadem changed the base branch from 4878-font-resize-phase-1 to main October 2, 2025 23:08

amyleadem changed the base branch from main to 4878-font-resize-phase-1 October 2, 2025 23:11

amyleadem changed the base branch from 4878-font-resize-phase-1 to main October 2, 2025 23:15

Empty commit to retrigger UI tests

c647d75

amyleadem and others added 5 commits October 3, 2025 12:27

Temporarily change Chromatic onlyChanged to false

dc13b26

Merge branch 'main' into 4881-font-resizing-fixes

28336e0

Revert onlyChanged back to true

69f1479

Merge branch '4881-font-resizing-fixes' of https://github.com/departm…

50060ed

…ent-of-veterans-affairs/component-library into 4881-font-resizing-fixes

Make tel input narrower to prevent line break in error state

f1844fc

Merge branch 'main' into 4881-font-resizing-fixes

d322a29

jeana-adhoc mentioned this pull request Oct 7, 2025

Font size part 2 PR: Evaluate visual design changes department-of-veterans-affairs/vets-design-system-documentation#4952

Closed

1 task

jeana-adhoc approved these changes Mar 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font resize component fixes: Phase 2#1800

Font resize component fixes: Phase 2#1800
amyleadem wants to merge 22 commits into
mainfrom
4881-font-resizing-fixes

amyleadem commented Sep 29, 2025 •

edited

Loading

Uh oh!

amyleadem Sep 30, 2025 •

edited

Loading

Uh oh!

amyleadem Sep 30, 2025

Uh oh!

amyleadem Sep 30, 2025

Uh oh!

amyleadem Sep 30, 2025 •

edited

Loading

Uh oh!

jamigibbs left a comment

Uh oh!

Uh oh!

jamigibbs left a comment

Uh oh!

amyleadem commented Oct 2, 2025 •

edited

Loading

Uh oh!

jamigibbs commented Oct 3, 2025 •

edited

Loading

Uh oh!

amyleadem commented Oct 3, 2025

Uh oh!

jeana-adhoc left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

amyleadem commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chromatic

Description

Related tickets and links

Screenshots

va-additional-info (as found in va-text-input)

va-date

va-memorable-date

va-search-input

va-telephone-input

va-text-input

Testing and review

Approvals

QA checklists

Uh oh!

amyleadem Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

amyleadem Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

amyleadem Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jamigibbs commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amyleadem commented Oct 3, 2025

Uh oh!

jeana-adhoc left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amyleadem commented Sep 29, 2025 •

edited

Loading

amyleadem Sep 30, 2025 •

edited

Loading

amyleadem Sep 30, 2025 •

edited

Loading

amyleadem commented Oct 2, 2025 •

edited

Loading

jamigibbs commented Oct 3, 2025 •

edited

Loading