Skip to content

feat: add input phone - #2210

Open
triggertoo wants to merge 6 commits into
nextfrom
feat/2185-ds-input-phone
Open

feat: add input phone#2210
triggertoo wants to merge 6 commits into
nextfrom
feat/2185-ds-input-phone

Conversation

@triggertoo

@triggertoo triggertoo commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Closes #2185

📄 Description

Adds ds-input-phone: an international phone field with a searchable country picker, localized calling codes and flags, and live country-aware formatting to E.164 values.

Also includes Storybook documentation, unit and Playwright coverage, visual fixtures, a page object, and a minor core-package changeset.

🚀 Demo

input-phone-demo

triggertoo and others added 4 commits September 3, 2026 14:34
Adds a standalone Field-wrapped control with a country picker and
libphonenumber-js live formatting so forms can collect E.164 numbers.

Co-authored-by: Cursor <cursoragent@cursor.com>
…and tests

- Added new documentation pages for the input-phone component, covering Overview, Usage, Variants, Styling, Accessibility, and Testing.
- Implemented unit tests for country data handling and formatting functionalities.
- Updated the input-phone component to improve accessibility and event handling.
- Included new stories in Storybook for various input-phone configurations and states.
- Enhanced the .gitignore to exclude additional files related to the input-phone component.
- Changed the command from 'pnpm docs' to 'pnpm run docs' for starting Storybook documentation.
@vercel

vercel Bot commented Sep 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
design-system Ready Ready Preview Sep 3, 2026 3:19pm UTC
design-system-core Ready Ready Preview Sep 3, 2026 3:19pm UTC
design-system-toky Ready Ready Preview Sep 3, 2026 3:19pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6719f0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@baloise/ds-core Minor
@baloise/ds-angular Minor
@baloise/ds-react Minor
@baloise/ds-ag-grid Minor
@baloise/ds-assets Minor
@baloise/ds-css Minor
@baloise/ds-playwright Minor
@baloise/ds-tokens Minor

Not sure what this means? Click here to learn what changesets are.

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

@triggertoo

triggertoo commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator Author

📸 Update Screenshots finished!

Specs: input-phone

Check out the action on GitHub ↗︎

@hirsch88

hirsch88 commented Sep 3, 2026

Copy link
Copy Markdown
Member

@triggertoo looks very nice
i would improve a bit the design and the entry. something like that
https://shadcn-phone-input.vercel.app/

  • only show the flag so it has a constant width
  • use the mask for the phone format if possible
  • add a fixed width to the popup and also make the input without border to fill up the whole space

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add ds-input-phone component — international phone number input with country picker

2 participants