feat(mosaic): use SVG country flags in phone input

.changeset/quiet-flags-phone.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/phone-input/phone-input.styles.ts

@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, radiusVars, shadowVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   triggerContent: {
@@ -9,15 +9,8 @@ export const styles = stylex.create({
     display: 'flex',
   },
   flag: {
-    fontSize: typeScaleVars['--cl-text-sm-size'],
-    lineHeight: 1,
-  },
-  triggerFlag: {
-    alignItems: 'center',
-    display: 'flex',
+    display: 'block',
     flexShrink: 0,
-    fontSize: space['4'],
-    justifyContent: 'center',
     height: space['4'],
     width: space['4'],
   },

packages/mosaic/src/components/phone-input/phone-input.test.tsx

@@ -7,6 +7,41 @@ import { Field } from '../field';
 import { PhoneInput } from './phone-input';
 
 describe('Mosaic PhoneInput', () => {
+  it('renders SVG country flags and updates the selected flag after choosing a country', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+
+    const trigger = screen.getByRole('button', { name: 'Country, United States' });
+    await waitFor(() => expect(trigger.querySelector('svg.cl-phone-input-flag path[fill="#D80027"]')).not.toBeNull());
+    const selectedFlagArtwork = trigger.querySelector('svg.cl-phone-input-flag')?.innerHTML;
+    expect(trigger.querySelector('svg.cl-phone-input-flag')).toHaveAttribute('viewBox', '0 0 16 16');
+    expect(trigger.querySelector('svg.cl-phone-input-flag')).toHaveAttribute('aria-hidden', 'true');
+    expect(trigger).not.toHaveTextContent('🇺🇸');
+
+    await user.click(trigger);
+
+    for (const option of screen.getAllByRole('option')) {
+      expect(option.querySelector('svg.cl-phone-input-flag')).toHaveAttribute('aria-hidden', 'true');
+      expect(option).not.toHaveTextContent(/\p{Regional_Indicator}/u);
+    }
+
+    const japan = screen.getByRole('option', { name: /Japan/ });
+    await waitFor(() => expect(japan.querySelector('svg.cl-phone-input-flag path[d^="M8.00001"]')).not.toBeNull());
+    const japanArtwork = japan.querySelector('svg.cl-phone-input-flag')?.innerHTML;
+    expect(japanArtwork).toBeTruthy();
+    expect(japanArtwork).not.toBe(selectedFlagArtwork);
+
+    await user.type(screen.getByRole('combobox', { name: 'Search countries' }), 'Japan');
+    await user.keyboard('{ArrowDown}{Enter}');
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: 'Country, Japan' }).querySelector('svg.cl-phone-input-flag')?.innerHTML,
+      ).toBe(japanArtwork),
+    );
+    expect(screen.getByRole('textbox', { name: 'Phone number' })).toHaveFocus();
+  });
+
   it('focuses the country search when opened with a pointer', async () => {
     const user = userEvent.setup();
     render(<PhoneInput aria-label='Phone number' />);

packages/mosaic/src/components/phone-input/phone-input.tsx

@@ -1,17 +1,12 @@
 'use client';
 
 import type { CountryEntry, CountryIso } from '@clerk/shared/phone';
-import {
-  extractDigits,
-  formatPhoneNumber,
-  getFlagEmojiFromCountryIso,
-  IsoToCountryMap,
-  parsePhoneString,
-} from '@clerk/shared/phone';
+import { extractDigits, formatPhoneNumber, IsoToCountryMap, parsePhoneString } from '@clerk/shared/phone';
 import { useMergeRefs } from '@floating-ui/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import { CountryFlag } from '../../icons/country-flags';
 import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../utils/reset.styles';
@@ -210,15 +205,11 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
               aria-label={`Country, ${country.name}`}
             >
               <span {...stylex.props(reset.base, styles.triggerContent)}>
-                <span
+                <CountryFlag
+                  iso={country.iso}
                   aria-hidden='true'
-                  {...mergeStyleProps(
-                    themeProps('phone-input-flag'),
-                    stylex.props(reset.base, styles.flag, styles.triggerFlag),
-                  )}
-                >
-                  {getFlagEmojiFromCountryIso(country.iso)}
-                </span>
+                  {...mergeStyleProps(themeProps('phone-input-flag'), stylex.props(reset.base, styles.flag))}
+                />
                 <Icon
                   name='chevron-down'
                   size='md'
@@ -267,26 +258,27 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
               </Field.Root>
               <Combobox.List {...themeProps('phone-input-country-list')}>
                 {filteredCountries.length > 0 ? (
-                  filteredCountries.map(option => (
-                    <Combobox.Option
-                      key={option.iso}
-                      value={option.iso}
-                      label={option.name}
-                      {...themeProps('phone-input-country-option')}
-                    >
-                      <span
-                        aria-hidden='true'
-                        {...stylex.props(reset.base, styles.flag)}
+                  filteredCountries.map(option => {
+                    return (
+                      <Combobox.Option
+                        key={option.iso}
+                        value={option.iso}
+                        label={option.name}
+                        {...themeProps('phone-input-country-option')}
                       >
-                        {getFlagEmojiFromCountryIso(option.iso)}
-                      </span>
-                      <span {...stylex.props(reset.base, styles.optionName)}>{option.name}</span>
-                      <span {...stylex.props(reset.base, styles.optionCode)}>+{option.code}</span>
-                      <span {...stylex.props(styles.indicatorSlot)}>
-                        <Combobox.OptionIndicator />
-                      </span>
-                    </Combobox.Option>
-                  ))
+                        <CountryFlag
+                          iso={option.iso}
+                          aria-hidden='true'
+                          {...mergeStyleProps(themeProps('phone-input-flag'), stylex.props(reset.base, styles.flag))}
+                        />
+                        <span {...stylex.props(reset.base, styles.optionName)}>{option.name}</span>
+                        <span {...stylex.props(reset.base, styles.optionCode)}>+{option.code}</span>
+                        <span {...stylex.props(styles.indicatorSlot)}>
+                          <Combobox.OptionIndicator />
+                        </span>
+                      </Combobox.Option>
+                    );
+                  })
                 ) : (
                   <Combobox.Empty>{noResultsMessage}</Combobox.Empty>
                 )}

packages/mosaic/src/icons/country-flag-groups/a-d.tsx

@@ -0,0 +1,133 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import type { IconComponent } from '../glyph';
+import { AcFlag } from '../glyphs/flags/ac-flag';
+import { AdFlag } from '../glyphs/flags/ad-flag';
+import { AeFlag } from '../glyphs/flags/ae-flag';
+import { AfFlag } from '../glyphs/flags/af-flag';
+import { AgFlag } from '../glyphs/flags/ag-flag';
+import { AiFlag } from '../glyphs/flags/ai-flag';
+import { AlFlag } from '../glyphs/flags/al-flag';
+import { AmFlag } from '../glyphs/flags/am-flag';
+import { AoFlag } from '../glyphs/flags/ao-flag';
+import { ArFlag } from '../glyphs/flags/ar-flag';
+import { AsFlag } from '../glyphs/flags/as-flag';
+import { AtFlag } from '../glyphs/flags/at-flag';
+import { AuFlag } from '../glyphs/flags/au-flag';
+import { AwFlag } from '../glyphs/flags/aw-flag';
+import { AxFlag } from '../glyphs/flags/ax-flag';
+import { AzFlag } from '../glyphs/flags/az-flag';
+import { BaFlag } from '../glyphs/flags/ba-flag';
+import { BbFlag } from '../glyphs/flags/bb-flag';
+import { BdFlag } from '../glyphs/flags/bd-flag';
+import { BeFlag } from '../glyphs/flags/be-flag';
+import { BfFlag } from '../glyphs/flags/bf-flag';
+import { BgFlag } from '../glyphs/flags/bg-flag';
+import { BhFlag } from '../glyphs/flags/bh-flag';
+import { BiFlag } from '../glyphs/flags/bi-flag';
+import { BjFlag } from '../glyphs/flags/bj-flag';
+import { BlFlag } from '../glyphs/flags/bl-flag';
+import { BmFlag } from '../glyphs/flags/bm-flag';
+import { BnFlag } from '../glyphs/flags/bn-flag';
+import { BoFlag } from '../glyphs/flags/bo-flag';
+import { BqFlag } from '../glyphs/flags/bq-flag';
+import { BrFlag } from '../glyphs/flags/br-flag';
+import { BsFlag } from '../glyphs/flags/bs-flag';
+import { BtFlag } from '../glyphs/flags/bt-flag';
+import { BwFlag } from '../glyphs/flags/bw-flag';
+import { ByFlag } from '../glyphs/flags/by-flag';
+import { BzFlag } from '../glyphs/flags/bz-flag';
+import { CaFlag } from '../glyphs/flags/ca-flag';
+import { CdFlag } from '../glyphs/flags/cd-flag';
+import { CfFlag } from '../glyphs/flags/cf-flag';
+import { CgFlag } from '../glyphs/flags/cg-flag';
+import { ChFlag } from '../glyphs/flags/ch-flag';
+import { CiFlag } from '../glyphs/flags/ci-flag';
+import { CkFlag } from '../glyphs/flags/ck-flag';
+import { ClFlag } from '../glyphs/flags/cl-flag';
+import { CmFlag } from '../glyphs/flags/cm-flag';
+import { CnFlag } from '../glyphs/flags/cn-flag';
+import { CoFlag } from '../glyphs/flags/co-flag';
+import { CrFlag } from '../glyphs/flags/cr-flag';
+import { CuFlag } from '../glyphs/flags/cu-flag';
+import { CvFlag } from '../glyphs/flags/cv-flag';
+import { CwFlag } from '../glyphs/flags/cw-flag';
+import { CyFlag } from '../glyphs/flags/cy-flag';
+import { CzFlag } from '../glyphs/flags/cz-flag';
+import { DeFlag } from '../glyphs/flags/de-flag';
+import { DjFlag } from '../glyphs/flags/dj-flag';
+import { DkFlag } from '../glyphs/flags/dk-flag';
+import { DmFlag } from '../glyphs/flags/dm-flag';
+import { DoFlag } from '../glyphs/flags/do-flag';
+import { DzFlag } from '../glyphs/flags/dz-flag';
+
+interface CountryFlagGroupProps extends ComponentPropsWithoutRef<'svg'> {
+  iso: string;
+}
+
+const flags: ReadonlyMap<string, IconComponent> = new Map([
+  ['ac', AcFlag],
+  ['ad', AdFlag],
+  ['ae', AeFlag],
+  ['af', AfFlag],
+  ['ag', AgFlag],
+  ['ai', AiFlag],
+  ['al', AlFlag],
+  ['am', AmFlag],
+  ['ao', AoFlag],
+  ['ar', ArFlag],
+  ['as', AsFlag],
+  ['at', AtFlag],
+  ['au', AuFlag],
+  ['aw', AwFlag],
+  ['ax', AxFlag],
+  ['az', AzFlag],
+  ['ba', BaFlag],
+  ['bb', BbFlag],
+  ['bd', BdFlag],
+  ['be', BeFlag],
+  ['bf', BfFlag],
+  ['bg', BgFlag],
+  ['bh', BhFlag],
+  ['bi', BiFlag],
+  ['bj', BjFlag],
+  ['bl', BlFlag],
+  ['bm', BmFlag],
+  ['bn', BnFlag],
+  ['bo', BoFlag],
+  ['bq', BqFlag],
+  ['br', BrFlag],
+  ['bs', BsFlag],
+  ['bt', BtFlag],
+  ['bw', BwFlag],
+  ['by', ByFlag],
+  ['bz', BzFlag],
+  ['ca', CaFlag],
+  ['cd', CdFlag],
+  ['cf', CfFlag],
+  ['cg', CgFlag],
+  ['ch', ChFlag],
+  ['ci', CiFlag],
+  ['ck', CkFlag],
+  ['cl', ClFlag],
+  ['cm', CmFlag],
+  ['cn', CnFlag],
+  ['co', CoFlag],
+  ['cr', CrFlag],
+  ['cu', CuFlag],
+  ['cv', CvFlag],
+  ['cw', CwFlag],
+  ['cy', CyFlag],
+  ['cz', CzFlag],
+  ['de', DeFlag],
+  ['dj', DjFlag],
+  ['dk', DkFlag],
+  ['dm', DmFlag],
+  ['do', DoFlag],
+  ['dz', DzFlag],
+]);
+
+export default function CountryFlagGroup({ iso, ...props }: CountryFlagGroupProps) {
+  const Flag = flags.get(iso);
+  return Flag ? <Flag {...props} /> : null;
+}

packages/mosaic/src/icons/country-flag-groups/e-h.tsx

@@ -0,0 +1,85 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import type { IconComponent } from '../glyph';
+import { EcFlag } from '../glyphs/flags/ec-flag';
+import { EeFlag } from '../glyphs/flags/ee-flag';
+import { EgFlag } from '../glyphs/flags/eg-flag';
+import { EhFlag } from '../glyphs/flags/eh-flag';
+import { ErFlag } from '../glyphs/flags/er-flag';
+import { EsFlag } from '../glyphs/flags/es-flag';
+import { EtFlag } from '../glyphs/flags/et-flag';
+import { FiFlag } from '../glyphs/flags/fi-flag';
+import { FjFlag } from '../glyphs/flags/fj-flag';
+import { FkFlag } from '../glyphs/flags/fk-flag';
+import { FmFlag } from '../glyphs/flags/fm-flag';
+import { FoFlag } from '../glyphs/flags/fo-flag';
+import { FrFlag } from '../glyphs/flags/fr-flag';
+import { GaFlag } from '../glyphs/flags/ga-flag';
+import { GbFlag } from '../glyphs/flags/gb-flag';
+import { GdFlag } from '../glyphs/flags/gd-flag';
+import { GeFlag } from '../glyphs/flags/ge-flag';
+import { GfFlag } from '../glyphs/flags/gf-flag';
+import { GhFlag } from '../glyphs/flags/gh-flag';
+import { GiFlag } from '../glyphs/flags/gi-flag';
+import { GlFlag } from '../glyphs/flags/gl-flag';
+import { GmFlag } from '../glyphs/flags/gm-flag';
+import { GnFlag } from '../glyphs/flags/gn-flag';
+import { GpFlag } from '../glyphs/flags/gp-flag';
+import { GqFlag } from '../glyphs/flags/gq-flag';
+import { GrFlag } from '../glyphs/flags/gr-flag';
+import { GtFlag } from '../glyphs/flags/gt-flag';
+import { GuFlag } from '../glyphs/flags/gu-flag';
+import { GwFlag } from '../glyphs/flags/gw-flag';
+import { GyFlag } from '../glyphs/flags/gy-flag';
+import { HkFlag } from '../glyphs/flags/hk-flag';
+import { HnFlag } from '../glyphs/flags/hn-flag';
+import { HrFlag } from '../glyphs/flags/hr-flag';
+import { HtFlag } from '../glyphs/flags/ht-flag';
+import { HuFlag } from '../glyphs/flags/hu-flag';
+
+interface CountryFlagGroupProps extends ComponentPropsWithoutRef<'svg'> {
+  iso: string;
+}
+
+const flags: ReadonlyMap<string, IconComponent> = new Map([
+  ['ec', EcFlag],
+  ['ee', EeFlag],
+  ['eg', EgFlag],
+  ['eh', EhFlag],
+  ['er', ErFlag],
+  ['es', EsFlag],
+  ['et', EtFlag],
+  ['fi', FiFlag],
+  ['fj', FjFlag],
+  ['fk', FkFlag],
+  ['fm', FmFlag],
+  ['fo', FoFlag],
+  ['fr', FrFlag],
+  ['ga', GaFlag],
+  ['gb', GbFlag],
+  ['gd', GdFlag],
+  ['ge', GeFlag],
+  ['gf', GfFlag],
+  ['gh', GhFlag],
+  ['gi', GiFlag],
+  ['gl', GlFlag],
+  ['gm', GmFlag],
+  ['gn', GnFlag],
+  ['gp', GpFlag],
+  ['gq', GqFlag],
+  ['gr', GrFlag],
+  ['gt', GtFlag],
+  ['gu', GuFlag],
+  ['gw', GwFlag],
+  ['gy', GyFlag],
+  ['hk', HkFlag],
+  ['hn', HnFlag],
+  ['hr', HrFlag],
+  ['ht', HtFlag],
+  ['hu', HuFlag],
+]);
+
+export default function CountryFlagGroup({ iso, ...props }: CountryFlagGroupProps) {
+  const Flag = flags.get(iso);
+  return Flag ? <Flag {...props} /> : null;
+}