DateRangeField

DateRangeField — составной компонент для ввода связанных дат начала и окончания, который объединяет ввод диапазона с клавиатуры, необязательный выбор в календаре и общую валидацию диапазона.

Storybook Исходники

Обзор

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

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

Stay

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

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

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

DateRangeField: наследует большую часть внешнего вида от TextField.
DateRangeFieldInput: следует той же модели поверхности поля, что и другие контролы текстового ввода.
DateRangeFieldTriggerIconButton: использует локальные переменные кнопки, основанные на токенах темы.
DateRangeFieldCalendar: следует контрактам стилизации Calendar и Popover.

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

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

Примеры

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

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

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

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.
Не заменяйте семантические токены темы сырыми значениями палитры в переопределениях на уровне поля.