66753 Adjustments for Formation base font-size change

[powellkerry]

Chromatic

https://66753-formation-typography--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Adjustments to components and heading font-sizes due to the base font-size changing in Formation. These changes include the removal of the formation_overrides.scss file.

Component updates were made in the following:

• Accordion
• Alert
• Breadcrumb
• Button-pair
• Button
• Checkbox-group
• Checkbox
• File-input
• Icon
• Memorable-date
• Modal
• Pagination
• Process-list*
• Radio-option
• Radio
• Search-input
• Segmented-progress-bar*
• Select
• Summary-box
• Text-input
• Text-area

* Visual differences were noticed, but they seem to align with USWDS. A designer should review to decide which version is correct. These differences include a slightly larger size in font for the number bubbles.

Closes department-of-veterans-affairs/vets-design-system-documentation#2566

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Component font differences that now align better with USWDS:

Before	After

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

v3 components are looking good so far! Amazing progress with all of this!

I just had a question about the color token that was removed and also we will want to re-run the Chromatic visual diff when the v1 rem adjustments are added.

Can you also double check for rem values in the Storybook files like here and adjust any of those values too?

• https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/storybook/stories/va-segmented-progress-bar.stories.jsx#L29-L43

• https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/storybook/.storybook/style.scss#L23

[jamigibbs]

I'm curious why this color needed to be removed? Is it cleanup from a previous tokens ticket we had been working on?

[powellkerry]

Yes its cleanup, the build was failing because this variable didn't exist in USWDS. It needed to be "uswds-system-color-red-cool-vivid-10"

[danbrady]

Thanks @powellkerry, I'll review the text size differences. However, I'm seeing some other differences in the left margin/padding in process list. It might be in other components, but I'm thinking it would be the same issue.

[danbrady]

I just had a question about the color token that was removed and also we will want to re-run the Chromatic visual diff when the v1 rem adjustments are added.

Just a heads up that I noticed that Progress Bar - Segmented (USWDS) diff with last build seems to be missing. (Unless I'm just not seeing it?)

CC @jamigibbs

[powellkerry]

@danbrady For the process-list padding, it looks like those padding styles are coming from USWDS. This is another one of those instances where the formation_overrides file included some custom VA styles. Should we create an override in process-list.scss to make it consistent with what we had or should we adopt what USWDS has?

I did notice that there is a margin left style from formation on the ol that we could/should probably override in this component?

Let me know what the course of action is for this.

[jamigibbs]

This is another one of those instances where the formation_overrides file included some custom VA styles.

@powellkerry Oh really? Darn, I was hoping custom stuff didn't sneak in there. If we need to move those styles into the component now, then we should do that. But ideally all styles would just be coming from the USWDS modules.

[danbrady]

These differences include a slightly larger size in font for the number bubbles.

I noticed that our Process List numbers render out to 23.36px but USWDS is 21.28px. Shouldn't these be pretty close if not equal?

[danbrady]

FYI: Left a few comments and questions in Chromatic.

[jamigibbs]

Can we remove this file now too?

https://github.com/department-of-veterans-affairs/component-library/blob/4862ffb48c0a6edabf4eebe06f72e1663c9f46c2/packages/web-components/src/global/_functions.scss

[jamigibbs]

Approving for pre-release