SE: [FAC] Design System: V1 & V3 component adoption

[mmiddaugh]

Description

As part of the 21st Century Integrated Digital Experience Act (IDEA) which was signed into law in December 2018, many of the components the VA shares with the USWDS have been synced to the design, styling, and functionality of the US System while retaining elements necessary to the VA.

This is a 3-part epic:

1. Adopt V3 components, for any existing V1 components that have a V3 counterpart (#17653 sub-epic)

Teams are asked to begin using the USWDS V3 versions of web-components and opt-in to the codified pattern by February 2024. V3-based versions of the components were designed to work alongside our current components so most have only slight differences in appearance or functionality. Some will need to be updated in preparation for global color and typography changes that the v3 variation will accept.

The converted components are marked with a USWDS V3 badge at the top of their component page in the VA.gov Design system

V1 with V3 counterpart components will be deprecated.

2. Adopt V3 and/or V1 components for any code that could use components and currently doesn't

These are sometimes being referred to as "impostor" components. This includes cases from templates created early in the modernization effort where things like breadcrumbs, pagination, "Back to top" may be using custom code rather than the now-available components.

3. Future: Adopt new V3 components as they are made available for remaining V1 components

All

• review governance rules for using v3-based components
• Identify where v1, v3, or no component is being used in Facilities products (Facility Locator, VAMC pages, Vet Center pages, and VBA design) which need to transition to the codified pattern and create relevant tickets - including
  • accordions
  • additional info
  • alert
  • breadcrumbs
  • button
• learn about upcoming global color and typography changes to identify changes which will occur automatically and which may require manual changes to our products

Acceptance criteria

[jilladams]

Audit spreadsheet I started: https://docs.google.com/spreadsheets/d/1A7mQMnL2d5JcDKHZ2daVYQVr85qOljrwM0aUk_inO88/edit#gid=1489013257

[xiongjaneg]

Proposal from Slack: Opt out process: On 2/16, V1 components will default to V3. At that point, we'll be force upgraded unless we opt out proactively. Opting out means: modifying those existing V1 components to pass in the uswds={false}. So: opting out is still a bunch of code changes.

Opting in estimate: If we say: just opt in and verify everything looks right, the PW estimate is that this would take 1 person 1 sprint, to verify all the affected templates and make any test updates as needed. (Chris flagged that recent component change for pagination did have test impact, so this may occur more for other components, tbd.)

Near term proposal: Rather than trying to opt in under the gun, we'd like to bias for action here and proactively opt out. Then we can schedule in opting back in, verifying behavior, and updating tests as needed.

Fran has cut tickets for opting in that we can prioritize when we're able. It would be wise to act on these sooner than later, as DS has said they plan to deprecate V1 as soon as they're able. (No estimated timeline yet, here).

[laflannery]

This is a slack post about v3 breadcrumbs. It mentions documentation that should be followed when the breadcrumb component gets migrated to v3 so I think it may be helpful when these tickets get pulled in

[laflannery]

Adding important deadlines:

• v1 deprecation is scheduled for 4/19
• Typography update (which has the potential to possibly break elements that currently aren't using components) is happening most likely "next month". Matt Dingee has said there will be a more formal announcement when there is more info to share but this is currently what we know

Slack thread for reference

[aklausmeier]

@xiongjaneg @mmiddaugh v1 deprecation was moved to May 3, slack thread.

the retirement and removal date for v1 components has been moved to May 3 (5/3)

cc @FranECross