search

Vonage / vivid-3

Vonage's web UI 🎨 toolbelt
https://vivid.deno.dev
Apache License 2.0
51 stars 11 forks source link

[Phone number input field]:needs development #1069

Closed AyalaBu closed 1 year ago

AyalaBu commented 1 year ago

Input component does not have a phone number input variant. This variant is needed and was requested by the designers.

Link to Figma: https://www.figma.com/file/JJNgZvt1qf3ydYmOwbE3Jg/Vivid-UI-Kit---3.0-WIP?node-id=21221%3A139296&t=lZMEXSKWlxiQ3V0L-1

rachelbt commented 1 year ago

@AyalaBu the issue is not clear. What is exactly needed? is the is missing for phone? Are you referring to the design? If so please elaborate on the parts and behaviour.

AyalaBu commented 1 year ago

This is the issue in JIRA: https://jira.vonage.com/browse/VIV-787

Design teams need an input (text field?) component that can receive a phone number. It is for the most part can be based on this: https://vivid-rw489a65vts0.deno.dev/components/action-group#tight

A few adjustments:

  1. Near the flag must be a country code (+729 for example)
  2. A dropdown (select) must be present to allow the user to choose country
  3. A component will receive numbers only (is it complex?)
  4. Will have most of the states present in the field component

States:

  1. Idle
  2. Hover
  3. Active (being filled)
  4. Expanded (open select)
  5. Focus
  6. Alert
  7. Success
  8. Read-only
rachelbt commented 1 year ago

I'm not sure this is a component but a composition or extended use of combobox. There's no such thing in code as "Phone number input field" so try to avoid this name. We have text-field, the validation of the text or numbers is up to the consumers. As I see it - this one is an issue of (once again) an option with an icon and also select. Yinon wrote that there's need to be a. PM decision regarding this - I'm not sure what is needed. Either way - it seems that more investigation and deeper ux and planning is needed.

  1. Near the flag must be a country code (+729 for example) - it seems like an option with icon...
  2. A dropdown (select) must be present to allow the user to choose country - select is a "closed" component that contain label - text of chosen option and options. there's no: "dropdown (select)"
  3. A component will receive numbers only (is it complex?) - this is up to the consumers of the API. We have validation text, and a way for the devs to make the validation. Not make the validation itself.
github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 30 days with no activity.

rachelbt commented 1 year ago

moved to Jira: https://jira.vonage.com/browse/VIV-787