Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add PhoneNumberInput component #2500

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Apr 26, 2024

Addresses DSYS-654.

Purpose

The new phone number input component allow us to collect accurate, consistently formatted phone numbers including the country code and minimize the amount of friction for users.

Requirements

  • Users must be able to type or paste their (full) phone number
  • The input must support autocomplete for the country code and subscriber number
  • Any formatting must be transparent to users so they can verify the result
  • The input must be accessible using different input modes: mouse, touch, keyboard, screen reader
  • The input elements must be localizable
  • The full phone number should adhere to the E.164 international standard:
    • starts with a plus sign
    • followed by the 1-3 digit country code
    • followed by the subscriber number
    • using only spaces for digit grouping

Approach and changes

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

Copy link

changeset-bot bot commented Apr 26, 2024

⚠️ No Changeset found

Latest commit: 12e626d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Apr 26, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
oss-circuit-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 6, 2024 2:38pm

* SX-2129 Edit phone number Circuit UI component

* Add test for accessibility errors

* Update documentation and add placeholder prop for the subscriber number

* Update packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* Update packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInputService.spec.ts

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* Update packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* Update packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* Add fallback logic for Intl.DisplayNames

* Update stories to have only one validation story

* Update docs and readonly props

* Update code country to be of type input when read only and reset validation hint as additional field

* Update country code input element to not trigger countryCode onChange property

* Remove legacy useEffect

* Trigger deployment

---------

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>
Co-authored-by: Connor Bär <github@connorbaer.com>

This comment was marked as resolved.

Copy link

codecov bot commented Jun 6, 2024

Codecov Report

Attention: Patch coverage is 94.21296% with 25 lines in your changes missing coverage. Please review.

Project coverage is 88.29%. Comparing base (347dc9a) to head (12e626d).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2500      +/-   ##
==========================================
+ Coverage   88.16%   88.29%   +0.12%     
==========================================
  Files         204      206       +2     
  Lines       22320    22752     +432     
  Branches     1490     1518      +28     
==========================================
+ Hits        19678    20088     +410     
- Misses       2590     2612      +22     
  Partials       52       52              
Files Coverage Δ
packages/circuit-ui/experimental.ts 0.00% <0.00%> (ø)
...onents/PhoneNumberInput/PhoneNumberInputService.ts 89.28% <89.28%> (ø)
...i/components/PhoneNumberInput/PhoneNumberInput.tsx 95.45% <95.45%> (ø)

... and 1 file with indirect coverage changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants