DateField

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

Storybook Исходники

Обзор

Стилизация DateField распределена между унаследованной поверхностью TextField, необязательным календарём в поповере и небольшим локальным контрактом DateFieldTriggerIconButton.

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

Due date

Переменная	Значение	Влияет на
Выравнивает триггер по высоте input.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки триггера.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно
Фон триггера при наведении.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при наведении.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при нажатии.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно
Фон кнопки при нажатии.`DateFieldTriggerIconButton`		В этом состоянии изменений не видно

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

Переменные частей

DateField: наследует большую часть визуала поля от TextField.
DateFieldInput: использует ту же поверхность поля и оформление текста, что и другие поля ввода.
DateFieldTriggerIconButton: задаёт локальные переменные кнопки, ссылающиеся на токены темы, например --text-color и --fills-quaternary-hover.
DateFieldCalendar: в основном следует контрактам стилизации Calendar и Popover, а не отдельному набору локальных переменных поля.

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

disabled должен одинаково приглушать и поле ввода, и триггер.
Стили ошибки должны идти от состояния окружающего поля, а не от разовых переопределений триггера.
Внешний вид должны определять токены уровня темы, прежде чем дело дойдёт до локальных переопределений компонента.

Примеры

.billingDateFieldTrigger {
  --button-color: var(--label-secondary);
  --button-background-color-hover: var(--fills-secondary-hover);
}

.compactDateFieldTrigger {
  --icon-button-size: 32px;
}

Дочерние элементы DateFieldTriggerIconButton заменяют его иконку календаря по умолчанию; размер, состояния и доступное имя кнопки сохраняются.

LTRRTL

custom-trigger-icon.tsx · 71 строка

import { CalendarDaysIcon } from '@vega-ui/icons';
import {
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

Не переопределяйте

Не задавайте триггеру цвета, скрывающие состояние фокуса или невалидности.
Не меняйте здесь стили календаря; для этого слоя используйте контракты Calendar или Popover.
Не заменяйте семантические токены темы сырыми значениями палитры в переопределениях на уровне поля.