Initiative: Formation Deprecation

[micahchiang]

Status

Update each sprint until completed

Date	Status	Launch Date	Notes
Oct 28	in-progress	on-track	working on Sass Upgrade - vets-website initial migration work #3246
26 Nov	in-progress	on-track	working on core swap. Waiting for some teams to do QA
16 Dec	Done	done	Work has been completed.

Description

Original RFC

This initiative tracks the progress of sunsetting Formation in favor of the new CSS Library which will house all of the styles (element selectors, utility classes, variables, tokens, etc) VA.gov imports and uses. There are 3 high level steps in this migration:

1. Migrate global base styles from Formation to CSS Library
2. Migrate application utility class usage
3. Archive Formation

Problem statement

VA.gov Home | Veterans Affairs is currently using Formation as the base for its design system. The issue here is that Formation is running off of USWDS1 which is outdated, as USWDS is currently on version 3.

Hypothesis or Bet

Getting off of Formation will allow us to upgrade to v3 of USWDS so that we can use the latest USWDS components and stylesheets to build VA applications.

We will know we're done when... ("Definition of Done")

1. Migrate global base styles from Formation to CSS Library
2. Migrate application utility class usage
3. Archive Formation

Known Blockers/Dependencies

Projected Launch Date

Q4 2024

[humancompanion-usds]

@micahchiang and @caw310 - Can you provide an update on this initiative? I believe we have made progress on these 4 steps though I think there are more parts to this initiative.

[humancompanion-usds]

@micahchiang and @caw310 - I believe we can break some of the pieces out of this one now that we've done the discovery to know how we're going about this deprecation. I'd like to create distinct initiatives for the following:

Global changes DST is making

1. Global Typography changes
2. Global Breakpoint & grid changes (breakpoint perhaps Jami already did!?)
3. Global Iconography changes

Changes DST is asking VFS teams to make

I'm not 100% sure what goes in this bucket. I'm guessing there might be some changes around CSS library changes that we'll want teams to make? We need to determine which items are in this bucket.

For both buckets, for the initiatives we need to determine:

• Is there an action VFS teams need to take?
  • If so, by when do we need them to take that action?
  • If so, when are we telling them that they need to do that?
• What will users see on the site when this changes?
• What milestones exist within the initiative? In other words, if there is a deadline/date that we are trying to hit what is it and why did we set that date.

[caw310]

Here are the three sub epics under this initiative.
#75709
#75695
#75641

[caw310]

Update for Formation Deprecation in Q2
Deprecation of v1 components completed May 8. We are targeting all v1 web-components to be removed from code by the end of July.
This excludes these three v3 components that are still in-work:
* va-table - v3 borderless table available in Storybook; guidance now available. We will be adding sorting to va-table in Q3
* va-file-input - v3 version including multiple file input will be available in July
* va-number-input - will be deprecated and functionality will be added to va-text-input (such as prefix and suffix)

Specific updates have been provided in the three sub epics.

[humancompanion-usds]

• A number of PRs are forthcoming to make changes to breakpoint references to point at USWDS class names.
• Shared variables: This will take a large number of PRs so we'll ask front end devs to make this switch in their next PRs. It's a simple change but best distributed.
• Utilities: Need to determine best time to switch over to CSS Library.
• Grid classes: Putting !important on classes in CSS Library via USWDS config. Grid classes are generated as utility classes in CSS library so they get the !important declaration. Current grid in Formation do not have the !important keyword.
  • Can re-introduce grid in CSS library with the shorter naming convention. This would allow us to offer both and have !important on the new CSS library classes. But teams would have to shift, which takes longer. This is safer than changing the current classes. Blocks the node upgrade because we'd need teams to shift over. We can set a timeline. Clint suggested 6 months.
  • Lift and ship the grid styles. Stays the same but gets us off of Formation the repo faster. Kicks the tech debt down the road, more manual labor. Probably faster.

[humancompanion-usds]

@micahchiang and @caw310 - The team should revisit this strategy doc and update it with a revised plan. That plan ideally would show:

• How the plan unblocks the node upgrade
• What the ask is of our team
• What the ask if of VFS teams
• What breaks and how many instances would break - this is where we may need to pause and do some discovery or add more visual regression testing (potentially with teams)
• Timeline
• Tasks

If there are multiple paths then those can be documented with the information above so that we can make the best choice available to us.

[humancompanion-usds]

Pull requests:
department-of-veterans-affairs/vets-website#32199
https://github.com/department-of-veterans-affairs/vets-website/pull/32154/files
department-of-veterans-affairs/component-library#1359

Fixing up font-faces, heading styling, etc.

• Shared libraries - End of October
• Core import - End of November

[humancompanion-usds]

This is done!!!! 🥳 Just waiting a few days to close this out until we are sure we don't need to roll anything back. Then we will pop the 🍾

[micahchiang]

👋 We did it