States

Стандарты состояний компонентов SDDS: визуальное отображение и правила комбинирования.

См. также: props-vocabulary.md — свойства состояний, theming.md — токены состояний, validation-model.md — валидация форм.

Важно!

1. Дизайн: макеты SDDS предоставляют рекомендуемый набор состояний для компонентов и их визуал. Пользователь может удалять/добавлять состояния в дизайне, а также стилизовать компонент в каждом состоянии под свой продукт.
2. Разработка: техническая реализация обеспечивает поддержку всех возможных состояний компонента.

1. Основные принципы

1.1 Консистентность

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

1.2 Предсказуемость

Для повышения понимания интерфейса пользователем рекомендуется через визуал состояния отображать:

• текущее состояние компонента;
• можно ли взаимодействовать с компонентом;
• произошло ли действие.

1.3 Доступность

В соответствии с принципами инклюзивного дизайна и рекомендациями WCAG состояния должны быть различимы и обеспечиваться независимо от цветового восприятия.

Рекомендуется:

• применять комбинированные индикаторы (цвет + подсказка, цвет + иконка и т.п.);
• гарантировать видимость состояний при клавиатурной навигации (чёткий индикатор фокуса);
• поддерживать семантическую передачу состояний через API доступности (ARIA-роли, состояния и свойства).

2. Категории состояний

В дизайн-системе SDDS состояния компонентов разделены на 7 семантических категорий:

2.1 Interaction States

Состояния кратковременного взаимодействия.

2.2 Selection States

Состояния выбора.

2.3 Availability States

Состояния доступности.

2.4 Data States

Состояния данных.

2.5 Process & Feedback States

Состояния процесса и обратной связи.

2.6 Visibility States

Состояния видимости.

2.7 Drag and Drop

3. Комбинирование состояний: правила, исключения и иерархия приоритетов

3.1 Комбинирование состояний

Категории состояний можно комбинировать между собой для более точного реагирования интерфейса на действия пользователя.

Примеры возможных комбинаций:

Data + Availability:

• Filled + ReadOnly — состояние «доступен только для чтения» возможно ТОЛЬКО в заполненном данными компоненте
• Filled + Hidden — заполненные скрытые данные
• Filled + Disabled — заполненный, но недоступный для взаимодействия компонент

Interaction + Availability:

• Focused + ReadOnly — состояние «доступен только для чтения» с фокусной рамкой при взаимодействии через клавиатуру
• Selected + ReadOnly — выбранный, но не редактируемый элемент

Interaction + Interaction:

• Selected + Checked — элемент выбран и отмечен контролом или индикацией
• Hovered + Focused — наведён курсор и фокус клавиатуры

Interaction + Feedback:

• Actived + Loading — элемент нажат и данные/действие загружается

3.2 Взаимоисключающие состояния

Комбинирование состояний из одной категории чаще неверно — такие состояния взаимоисключающие, например:

• Availability States: disabled и readOnly — если элемент отключён, он уже не может быть «только для чтения»;
• Visibility States: Hidden и Visible;
• Interaction States: Actived заменяет Hovered в момент клика.

Исключения — нестрого взаимоисключающие состояния, но с приоритетом:

• Hovered и Focused могут быть одновременно, но Active заменяет их в момент клика;
• Selected и Checked взаимоисключаемые на уровне одного простого компонента, но возможны одновременно при компоновке элементов в компоненте, например: элемент списка с чекбоксом.

Недопустимые комбинации состояний компонента нельзя одновременно выбрать в дизайне и коде.

3.3 Приоритет состояний

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

Порядок приоритета групп состояний:

1. Visibility States
2. Availability States
3. Process & Feedback States
4. Dropping
5. Selection States
6. Data States
7. Interaction States

Пример: Disabled → Loading → Error → Focus → Hovered → Default