Дизайн в БАРС Груп

Определение

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

Функциональность

Диалоговое окно (Dialog) используется для показа важных сообщений, подтверждений, или форм, которые требуют внимания пользователя и его действий. Оно временно перекрывает основное содержимое страницы, чтобы сосредоточить пользователя на текущей задаче, например, подтверждении выбора, заполнении данных или принятии решения.

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

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

Закрыть окно можно несколькими способами:

Нажатием кнопки закрытия в Шапка окна (Modal header) или кнопки «Отмена» на Панели инструментов (Toolbar).
Использованием клавиши ESC.
Нажатием на основное действие, например, «Сохранить».
Клик вне модального окна.

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

Дизайн и Стиль

Размер и Форма

Состоит из компонентов: Шапка окна (Modal header) , Слот (Slot) и Панель иструментов (Toolbar)

Базовый размер диалогового окна составляет 380px. Для форм ввода данных доступны три варианта размеров:

S — 380px
M — 480px
L — 640px

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст

Краткость текста

Текст заголовка должен быть кратким (2-4 слова и не более одной строки) и описывать информацию или действие, которое представляет диалоговое окно.

Варианты

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

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

Заполнение формы

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

Скролл

Если содержимое диалогового окна превышает её видимую область, появляется полоса прокрутки. Это позволяет пользователю прокручивать и просматривать весь контент. Такой механизм обеспечивает удобство навигации и возможность работы с большим объёмом информации.

При этом высота модального окна должна ограничиваться высотой экрана с отступом
в 120px сверху и снизу

Панель инструментов (Toolbar) остаётся фиксированной и располагается поверх контентной области, даже при прокрутке. Это обеспечивает постоянный доступ к инструментам и действиям, не мешая просмотру всего содержимого окна.