Experimental Design [va-button-pair] (USWDS v3) - Allow for custom button labels

[brianseek]

What

Give a brief description of the component or pattern you want to propose.

We would like the ability to use the button pair with labels other than yes/no and back/continue. In the check-in application, we utilize yes/no for travel claim questions, but the review page uses a pair of "Agree to these terms/File later". All of these pages use the same page component but this last page means we can't use the same button pair component within it.

I dug around through the guidance both here and on the USWDS and I didn't see how different text would be counter to any of it as long as the two options were related/inverse choices.

Purpose

What problem does this component or pattern solve for the user?

Allows the user to see a more specific choice in the buttons when its needed.

Usage

Context or task: Explain the scenario or user tasks where this component is, or could be, used.

Travel pay claim within check-in.

Behavior

Describe the key interactions for this component, calling out any specific considerations for mobile.

Same as default except with different button text.

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

A travel page with yes/no The review travel page with different button choices

Accessibility

Include any accessibility considerations.

No additional accessibility considerations.

Guidance

What would you want to tell other teams about this component or pattern?

To only choose custom text with the context of the situation calls for it and to default to one of the pre-determined text choices.

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Code (optional)

Include any existing code.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@brianseek This is on the agenda for the Jan 19 DSC meeting at 1pm ET. I've added you to the meeting invite.

[benbrasso-agile6]

@kellysmith1008 @cgednalske

[caw310]

Notes from DSC meeting. Final Decision

• Approved to open up button pair to free form labels.
• List approved content button labels.
• Translate Button Pair component labels that are currently used.

Action Items

• Open up button pair to free form labels
• Add list of approved button labels to the Button Labels page in Content Style Guide
• Matt to define with Danielle and Beth how we’ll move content database (for error messaging and other labels) into the Design System in a repeatable fashion (csv exprot to _data in Jekyll?)

https://docs.google.com/document/d/1wUDWXs0BOKgeAVTqb5ZOJpICCjrbyaQB7uJ0zDkINhE/edit?usp=sharing

[caw310]

Here is the ticket to update content style guide for button label text. https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3168

[caw310]

This is the ticket for development work to allow for custom button labels. https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3167