carbon-design-system/carbon

Phone number field with country selector (new component request)

Open

#3,948 opened on Sep 10, 2019

View on GitHubContributor guide
 (13 comments) (0 reactions) (0 assignees)JavaScript (1,733 forks)batch import
adopter: productafrohackshacktoberfestneeds: community contributionpackage: @carbon/reactproposal: acceptedtype: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

New component. I design the IBM Registration forms on the URX squad and there is no phone number field with a country code selector. This component exists in Northstar and it would be helpful to have it added to the design carbon kit and system.

Is this issue related to a specific component?

Phone number field with country code

What did you expect to happen? What happened instead? What would you like to see changed?

It just doesn't exist in the carbon design kit.

What browser are you working in?

Designing and building for all browsers.

What version of the Carbon Design System are you using?

Version 10

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Unified Registration Experience (URX), we have a release coming up in October.

Additional information

This is the phone number field in Northstar. (currently live - https://www.ibm.com/account/reg/us-en/signup?formid=urx-19774) Screen Shot 2019-09-10 at 5.29.35 PM.png

Screen Shot 2019-09-10 at 5.29.51 PM.png

Screen Shot 2019-09-10 at 5.30.00 PM.png

This is what I've created as a placeholder in my mockups Screen Shot 2019-09-10 at 5.38.25 PM.png

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

Contributor guide

Research direction
Examine existing components like TextInput and Select in the Carbon system to understand the pattern for compound components. Then design a phone number component with a country code dropdown that follows the same styling and behavior.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70