PhoneField

PhoneField — составной компонент, который объединяет поле телефона с маской и вложенный Select для кода страны.

Обзор

Стили PhoneField распределены между полем ввода и вложенным семейством выбора страны. Большая часть визуального поведения приходит из общих токенов полей и модели стилизации вложенного select.

Публичные CSS-переменные

Текущая реализация открывает очень мало явных переменных --phone-field-*. Большинство точек стилизации приходит из общих токенов полей и вложенных частей select.

Phone

Переменная	Значение	Влияет на
размер поля и стили текста`PhoneFieldInput`	—	—
раскладка триггера и вариантовчасти select	—	—

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные на уровне частей

Поле ввода

Поле ввода следует общей модели стилизации полей, как и другие элементы ввода текста.

Семейство select

PhoneFieldSelectCombobox, PhoneFieldSelectListbox и PhoneFieldSelectOption открывают точки настройки раскладки, которые ближе к семейству Select, чем к отдельной поверхности токенов PhoneField.

Взаимодействие состояний и вариантов

strictMask меняет скорее поведение, чем стили
состояния error и disabled должны соответствовать общей семантике полей
собственный рендер выбранной страны влияет на плотность и выравнивание

Примеры

Настройка поля на уровне темы

У поля нет переменных --phone-field-*, поэтому класс темы перенастраивает общие токены полей для всего, что внутри него.

.brand-theme {
  --fills-tertiary: color-mix(in oklch, var(--color-blue-accent-500) 6%, transparent);
  --focus-color: var(--color-blue-accent-400);
}

Заглушка выбора страны и своя иконка

Пока код не выбран, триггер показывает placeholder из PhoneFieldSelectValue, а дочерние элементы PhoneFieldSelectIcon заменяют стандартный шеврон.

LTRRTL

select-placeholder-and-custom-icon.tsx · 41 строка

import {
  Label,
  PhoneField,
  PhoneFieldInput,
  PhoneFieldSelect,
  PhoneFieldSelectCombobox,
  PhoneFieldSelectHiddenSelect,
  PhoneFieldSelectIcon,
  PhoneFieldSelectListbox,
  PhoneFieldSelectOption,
  PhoneFieldSelectValue,
} from '@vega-ui/react';

Что не переопределять

не рассчитывайте на недокументированные переменные --phone-field-*
не стилизуйте вложенный select отдельно от поля ввода настолько агрессивно, что элемент перестаёт восприниматься как одно поле