Перейти к основному содержимому

Модальное окно

Модальное окно — диалоговый элемент интерфейса, который появляется поверх страницы и блокирует доступ к её основному содержимому.

Когда использовать​

Используйте модальные окна для:

  • подтверждения действий,
  • отображения ошибок,
  • вывода небольших форм (до 10 полей), связанных с локальными действиями — например, настройками или созданием объекта.

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

Принцип работы​

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

Модальное окно:

  • перехватывает фокус внутри себя,
  • восстанавливает фокус после закрытия (свойство restoreFocus).

Состав модального окна​

Модальное окно может включать:

  • заголовок (обязателен),
  • кнопку закрытия,
  • иконку статуса,
  • контент,
  • подвал с действиями.

Компоненты модальных окон​

NoticeDialog​

Используется для отображения информационных сообщений:

  • успешные действия,
  • ошибки,
  • предупреждения,
  • служебные уведомления.

Особенности:

  • одна кнопка действия («ОК» или «Закрыть»),
  • иконка и цвет определяют тип сообщения,
  • контент — опционален,
  • кнопка получает фокус.

Типы сообщений:

  • успех — зелёное оформление variant=success и позитивная иконка,
  • ошибка — красное оформление variant=danger и иконка ошибки,
  • предупреждение — жёлтое оформление variant=warning и иконка предупреждения,
  • информация — синее оформление variant=info и информационная иконка.

ActionDialog​

Используется для модальных окон, которые последовательно проходят следующие состояния:

  • подтверждение действия,
  • выполнение асинхронной операции,
  • отображение статуса выполнения,
  • сообщение об успехе или ошибке.

Особенности:

  • объединяет несколько состояний в одном окне,
  • обеспечивает единый UX-паттерн для типовых async-сценариев,
  • используется вместо самостоятельной реализации поведения, если сценарий вписывается в типовой flow.

Dialog​

Базовый компонент модального окна. Предназначен для:

  • подтверждения действий,
  • ввода дополнительной информации,
  • отображения сценариев, не охваченных NoticeDialog и ActionDialog.

Особенности:

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

Диалоговые окна​

Заголовок​

Заголовок должен быть кратким (1–3 слова) и отражать суть действия или процесса:

  • Создание проекта
  • Редактирование события

Для окон, требующих подтверждения:

  • Удалить проект?
  • Выйти без сохранения?

Действия​

В диалоговых окнах обычно две кнопки:

  • Основная кнопка — подтверждает действие («Сохранить», «Удалить»). Основная кнопка должна быть в фокусе.
  • Кнопка отмены — закрывает окно без выполнения действия («Отменить»).

Правило: чем правее кнопка — тем менее важное и менее частое действие. Вот обновлённая краткая версия с переносом правил подтверждения в конец:

Именование компонентов​

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

Обычные модальные окна​

Используется паттерн:

<Entity><Action>Modal

Применяется для создания, редактирования, просмотра или выполнения безопасных действий.

Где:

  • Entity — сущность: Project, Review, Expert, …
  • Action — действие в глагольной форме: Create, Edit, Assign, View, …

Примеры:

  • ProjectCreateModal
  • CategoryEditModal
  • ReviewDetailsModal
  • ExpertAssignModal

Подтверждение действий​

Для модальных окон, которые подтверждают действие, добавляется префикс:

<Entity><Action>ConfirmModal

Примеры:

  • ProjectDeleteConfirmModal
  • ExpertUnassignConfirmModal
  • ReviewRejectConfirmModal

Преимущества схемы​

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

Закрытие модального окна​

Клик по иконке закрытия, нажатие Esc или клик вне модального окна — эквивалентные действия, приводящие к отмене и закрытию.

Исключения:

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

В таких случаях:

  • окно может не закрываться через Esc/клик вне области;
  • перед закрытием нужно уточнить: сохранить изменения или выйти.

Асинхронные действия​

Используйте ActionDialog, если:

  • нужно подтвердить действие,
  • выполнить асинхронную операцию,
  • показать прогресс,
  • отобразить успех или ошибку.

Для особых сценариев допускается использовать обычный Dialog, но:

  • во время выполнения действия кнопки должны быть заблокированы,
  • окно не должно закрываться до завершения операции,
  • ошибка должна быть отображена в понятной форме.

Dialog vs Modal​

Кратко: Dialog — технология, Modal — сценарий продукта.

  • Dialog используется только для инфраструктурных UI-компонентов дизайн-системы (например, Dialog, ActionDialog, NoticeDialog). Это строительные блоки, не связанные с доменными сущностями.

  • Modal используется для прикладных модальных окон, связанных с реальными пользовательскими сценариями (ProjectCreateModal, ConfirmProjectDeleteModal, ReviewDetailsModal). Такие компоненты используют Dialog внутри, но представляют собой доменные элементы интерфейса.