Select

Select — составной компонент из корневого контейнера состояния и экспортируемых дочерних частей для триггера, значения, вариантов и нативного участия в форме.

Storybook Исходники Figma

Обзор

Этот файл описывает контракт стилизации Select и его дочерних частей через CSS-переменные.

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

Эти переменные напрямую используются текущей реализацией и являются самыми реалистичными точками переопределения для стилизации на уровне продукта.

Framework

Переменная	Значение	Влияет на
Общая база высоты и радиуса компонентакорень, combobox, listbox		В этом состоянии изменений не видно
Общий коэффициент радиуса скруглениякорень, combobox, listbox		В этом состоянии изменений не видно
Переопределение коэффициента радиуса для триггера`SelectCombobox`		В этом состоянии изменений не видно
Переопределение коэффициента радиуса для панели`SelectListbox`		В этом состоянии изменений не видно
Цвет текста выбранного значения`SelectValue`		В этом состоянии изменений не видно
Цвет текста плейсхолдера`SelectValue`		В этом состоянии изменений не видно
Цвет иконки триггера`SelectIcon`		В этом состоянии изменений не видно

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

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

Стилизация Select распределена так:

переменные размера корня в Select
переменные триггера в SelectCombobox
переменные цвета значения и плейсхолдера в SelectValue
переменные цвета иконки в SelectIcon
переменные поверхности панели в SelectListbox

Корень

Определены в packages/ui/src/Select/style.module.css:

--select-size
--select-br-ratio

Поведение по умолчанию:

sm сопоставляет --select-size с var(--spacing-21)
md сопоставляет --select-size с var(--spacing-24)
lg сопоставляет --select-size с var(--spacing-27)

Combobox

SelectCombobox использует:

--select-combobox-br-ratio
--select-icon-color
--select-placeholder-color
--select-value-color

Поведение состояний в исходниках:

вариант field использует --fills-tertiary и --fills-tertiary-hover
состояния фокуса и открытия используют --color-primary-500
отключённое состояние переназначает цвета иконки, плейсхолдера и значения на токены отключённого состояния

Значение

SelectValue вычисляет:

--select-value-color с запасным вариантом var(--text-color)
--select-placeholder-color с запасным вариантом var(--label-tertiary)

Благодаря этому стили значения и плейсхолдера можно безопасно переопределять, не переписывая весь дочерний компонент.

Иконка

SelectIcon определяет:

--select-icon-color

Иконка поворачивается в открытом состоянии и наследует цвет из этой переменной.

Listbox

SelectListbox использует:

--select-listbox-br-ratio
общие --select-size и --select-br-ratio

Также он зависит от глобальных токенов поверхности:

--surface-secondary
--surface-shadow

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

В текущей реализации варианты field и inline не предоставляют отдельных переменных --select-* для вариантов. Их поведение в основном определяется:

data-variant
глобальными токенами поверхности
токенами фокуса и отключённого состояния

Это значит:

настройка размера и цвета текста проста
перестилизация на уровне вариантов всё ещё частично зависит от глобальных токенов темы, а не от локальных переменных компонента

Примеры

Переопределение размера корня

--select-size и --select-br-ratio на корне меняют высоту триггера и скругление триггера и списка.

LTRRTL

root-size-override.tsx · 28 строк

import type { CSSProperties } from 'react';
import {
  Select,
  SelectCombobox,
  SelectIcon,
  SelectListbox,
  SelectOption,
  SelectValue,
} from '@vega-ui/react';

export default function RootSizeOverride() {
  return (

Переопределение цвета значения и плейсхолдера

Оба цвета читаются с запасным значением, поэтому достаточно задать их на корне. Плейсхолдер должен заметно отличаться от выбранного значения.

LTRRTL

value-and-placeholder-color-override.tsx · 31 строка

import type { CSSProperties } from 'react';
import {
  Select,
  SelectCombobox,
  SelectIcon,
  SelectListbox,
  SelectOption,
  SelectValue,
} from '@vega-ui/react';

export default function ValueAndPlaceholderColorOverride() {
  return (

Переопределение иконки и списка

SelectIcon и SelectListbox сами задают --select-icon-color и --select-listbox-br-ratio, поэтому значение на корне перекрывается. Задавайте эти переменные на самих частях.

LTRRTL

icon-and-listbox-override.tsx · 26 строк

import type { CSSProperties } from 'react';
import {
  Select,
  SelectCombobox,
  SelectIcon,
  SelectListbox,
  SelectOption,
  SelectValue,
} from '@vega-ui/react';

export default function IconAndListboxOverride() {
  return (

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

не полагайтесь на внутренние коэффициенты как на стабильный публичный API, не задокументировав их в дизайн-системе
не переопределяйте стили так, что ломается видимость фокуса
не делайте плейсхолдер и выбранный текст визуально неразличимыми
не меняйте высоту и радиус независимо, не проверив согласованность триггера и списка