Experimental Design [International Phone number support]

[brian-wilke]

What

Either variation in the current phone number component or pattern to support international as well as domestic phone numbers.

Purpose

This supports veterans (and caregivers) who might have a phone number from a non-US based phone company.

Usage

In supplying contact information for the Foreign Medical Program as part of registration or claims, the input for phone may need to support an international variation.

Behavior

The user should be able to easily select the country of the phone carrier, then fill in the balance (local) of the phone number they are using. As the list of countries is extensive, we suggest an auto complete functionality, narrowing the list of recommended countries as the user types.

Examples

We based our provided options on the experience at: https://countrycode.org/ Additionally, we were influenced by: https://uxplanet.org/phone-number-field-design-best-practices-23957cbd86d5 We did not see anything at USWDS that fit this need. We did review the design system at UK.gov and the guidance they have for phone numbers.

https://www.figma.com/design/CToySzwbZYIf7cP9PHh5Hn/Phone-Number-Exploration?node-id=0%3A1&t=7pdrHZsXzdqAKE8e-1

Accessibility

Auto country selection maybe tricky, defaults maybe confusing if seen as pre-filled.

Guidance

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

Your team

Integrated Veteran Care (IVC)

Research (optional)

Our user research revealed that our users in other countries (veterans) had international phone numbers and wanted to be able to include them (as it is required) in the registration process.

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]

@brian-wilke , We will get this on a DSC meeting agenda probably in late June. The next few meeting agendas are already set. I will follow up with an exact date and send you the meeting invite.

[humancompanion-usds]

@brian-wilke - Is this specifically asking that the phone number pattern alter the pattern on va-text-input regex to allow for international phone numbers? If you are not using that pattern then you could use a different regex as discussed in issue #2673. Or are you asking for a standardized International address pattern variation be added to the Address pattern.

[caw310]

@brian-wilke this is on the agenda for the DSC meeting on Friday, June 14 at 10:30am ET. I will add you to the meeting invite.

[brian-wilke]

Hi Carol,

I am on PTO through 6/14.

Please let me know the next availability beyond June 14th.

Sincerest thanks!

Brian Wilke (760) 670-5177

On Wed, Jun 5, 2024 at 10:44 AM Carol Wong @.***> wrote:

@brian-wilke https://github.com/brian-wilke this is on the agenda for the DSC meeting on Friday, June 14 at 10:30am ET. I will add you to the meeting invite.

— Reply to this email directly, view it on GitHub https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2885#issuecomment-2150238303, or unsubscribe https://github.com/notifications/unsubscribe-auth/BDUVWLGBHWEQLFI3ZDDUTU3ZF4P3FAVCNFSM6AAAAABIPJ5DMCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJQGIZTQMZQGM . You are receiving this because you were mentioned.Message ID: <department-of-veterans-affairs/vets-design-system-documentation/issues/2885/2150238303 @github.com>

[caw310]

@brian-wilke I will put this on the June 20 DSC instead. The meeting is at 11:05am ET on Thursday, June 20. I will add you to the invite.

[brian-wilke]

Appreciate it, thanks Carol!

On Thu, Jun 6, 2024 at 2:23 PM Carol Wong @.***> wrote:

@brian-wilke https://github.com/brian-wilke I will put this on the June 20 DSC instead. The meeting is at 11:05am ET on Thursday, June 20. I will add you to the invite.

— Reply to this email directly, view it on GitHub https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2885#issuecomment-2153346023, or unsubscribe https://github.com/notifications/unsubscribe-auth/BDUVWLBLAD3VDQJBBY3ZNDDZGDANFAVCNFSM6AAAAABIPJ5DMCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJTGM2DMMBSGM . You are receiving this because you were mentioned.Message ID: <department-of-veterans-affairs/vets-design-system-documentation/issues/2885/2153346023 @github.com>

[caw310]

Follow up from DSC

• Brian and his team to do more research and confirm downstream parts of form will not be impacted.
• DST will look into regex that will validate US and international numbers
• DST will match USWDS address to handle Puerto Rico and other international addresses.

[caw310]

@micahchiang will provide some options on regex and validating US and international numbers