fix(mosaic): align phone input and country picker

.changeset/tidy-phone-input-spacing.md

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

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

@@ -0,0 +1,41 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { MosaicProvider } from '../../mosaic-provider';
+import { PhoneInput } from './phone-input';
+
+describe('PhoneInput country picker alignment', () => {
+  it.each(['sm', 'md', 'lg'] as const)('aligns search text and country flags for a %s input', async size => {
+    const user = userEvent.setup();
+    render(
+      <MosaicProvider>
+        <div style={{ width: 320, margin: 32 }}>
+          <PhoneInput
+            size={size}
+            aria-label='Phone number'
+          />
+        </div>
+      </MosaicProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Country, United States' });
+    await user.click(trigger);
+    const search = screen.getByRole('combobox', { name: 'Search countries' });
+    await waitFor(() => expect(search).toHaveFocus());
+    const country = screen.getByRole('option', { name: /United States/ });
+    const countryName = document.createRange();
+    countryName.selectNodeContents(within(country).getByText('United States'));
+    const triggerFlag = document.createRange();
+    triggerFlag.selectNodeContents(within(trigger).getByText('🇺🇸'));
+    const countryFlag = document.createRange();
+    countryFlag.selectNodeContents(within(country).getByText('🇺🇸'));
+
+    const searchTextLeft =
+      search.getBoundingClientRect().left + Number.parseFloat(getComputedStyle(search).paddingLeft);
+    expect(search.getBoundingClientRect().width).toBeGreaterThan(0);
+    expect.soft(Math.abs(searchTextLeft - countryName.getBoundingClientRect().left)).toBeLessThanOrEqual(0.5);
+    expect
+      .soft(Math.abs(triggerFlag.getBoundingClientRect().left - countryFlag.getBoundingClientRect().left))
+      .toBeLessThanOrEqual(0.5);
+  });
+});

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

@@ -1,23 +1,48 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
+import {
+  colorVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  shadowVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
 
 export const styles = stylex.create({
+  triggerStart: {
+    paddingInlineStart: 'var(--_cl-input-group-inset)',
+  },
+  trigger: {
+    '--_cl-icon-color': colorVars['--cl-color-foreground-secondary'],
+    borderRadius: 'max(0px, calc(var(--_cl-input-group-radius) - var(--_cl-input-group-inset)))',
+    borderWidth: 0,
+    alignItems: 'center',
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    outlineOffset: { default: null, ':focus-visible': 0 },
+    paddingInlineEnd: 0,
+    paddingInlineStart: space['1.5'],
+    userSelect: 'none',
+    height: 'calc(var(--_cl-input-group-height) - 2 * var(--_cl-input-group-inset))',
+  },
   triggerContent: {
     gap: space['0.5'],
     alignItems: 'center',
     display: 'flex',
   },
   flag: {
-    fontSize: typeScaleVars['--cl-text-sm-size'],
-    lineHeight: 1,
-  },
-  triggerFlag: {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    fontSize: space['4'],
+    fontSize: typeScaleVars['--cl-text-xs-size'],
     justifyContent: 'center',
+    lineHeight: 1,
     height: space['4'],
     width: space['4'],
   },
@@ -29,14 +54,14 @@ export const styles = stylex.create({
   },
   prefix: {
     gap: space['2'],
-    color: colorVars['--cl-color-brand'],
+    color: colorVars['--cl-color-foreground'],
     fontVariantNumeric: 'tabular-nums',
     paddingInlineEnd: 0,
     paddingInlineStart: space['2'],
   },
   control: {
     fontVariantNumeric: 'tabular-nums',
-    paddingInlineStart: space['2'],
+    paddingInlineStart: space['1.5'],
   },
   popup: {
     borderRadius: radiusVars['--cl-radius-lg'],
@@ -45,28 +70,129 @@ export const styles = stylex.create({
     boxShadow: shadowVars['--cl-shadow-md'],
     color: colorVars['--cl-color-foreground'],
   },
-  countrySearchContainer: {
-    paddingInline: space['2'],
+  countrySearchRow: {
+    gap: space['1'],
+    alignItems: 'center',
+    borderBlockEndColor: colorVars['--cl-color-border'],
+    borderBlockEndStyle: 'solid',
+    borderBlockEndWidth: '1px',
+    display: 'flex',
+    flexShrink: 0,
+    paddingInlineEnd: space['2'],
+    paddingInlineStart: space['2'],
+    height: space['8'],
+  },
+  countrySearchIcon: {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    height: space['5'],
+    width: space['5'],
+  },
+  countrySearchInput: {
+    borderRadius: 0,
+    outline: {
+      default: 'none',
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px solid CanvasText',
+      },
+    },
+    outlineOffset: {
+      default: null,
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px',
+      },
+    },
+    paddingInlineEnd: space['1'],
+    paddingInlineStart: space['0.5'],
+    height: space['6'],
+    '::placeholder': {
+      color: colorVars['--cl-color-foreground-secondary'],
+    },
+  },
+  countryList: {
+    gap: space['0.5'],
+    paddingBlock: space['0.5'],
+    paddingInline: space['1'],
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '16rem',
+  },
+  option: {
+    borderRadius: radiusVars['--cl-radius-md'],
+    gap: space['1'],
+    outline: {
+      default: 'none',
+      '@media (forced-colors: active)': {
+        default: null,
+        ':is([data-active])': '2px solid CanvasText',
+      },
+    },
+    paddingBlock: space['1'],
+    alignItems: 'center',
+    backgroundColor: {
+      default: 'transparent',
+      ':is([data-active])': colorVars['--cl-color-neutral-alpha-100'],
+      '@media (hover: hover)': {
+        ':hover': colorVars['--cl-color-neutral-alpha-100'],
+      },
+    },
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':where([data-active])': colorVars['--cl-color-foreground'],
+    },
+    cursor: 'pointer',
+    display: 'flex',
     flexShrink: 0,
-    paddingBlockEnd: space['1'],
-    paddingBlockStart: space['2'],
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-normal'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    paddingInlineEnd: space['1.5'],
+    paddingInlineStart: space['1'],
+    height: space['8'],
+  },
+  empty: {
+    paddingBlock: space['6'],
+    paddingInline: space['3'],
+    color: colorVars['--cl-color-foreground-secondary'],
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    textAlign: 'center',
+  },
+  optionFlag: {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    height: space['5'],
+    width: space['5'],
   },
   optionName: {
+    padding: space['0.5'],
     overflow: 'hidden',
     flexGrow: 1,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    height: space['6'],
     minWidth: 0,
   },
   optionCode: {
+    alignItems: 'center',
     color: colorVars['--cl-color-foreground-secondary'],
+    display: 'flex',
     flexShrink: 0,
+    fontSize: typeScaleVars['--cl-text-xs-size'],
     fontVariantNumeric: 'tabular-nums',
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    justifyContent: 'flex-end',
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
     whiteSpace: 'nowrap',
-  },
-  indicatorSlot: {
-    display: 'flex',
-    flexShrink: 0,
-    width: space['3'],
+    height: space['5'],
+    minWidth: space['5'],
+    width: 'max-content',
   },
 });