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

Определение

Popover (Всплывающее окно) — это всплывающее окно, которое появляется, когда пользователь нажимает на элемент. Разница между компонентами Popover и В с п л ы в а ю щ е й п одсказкой (Tooltip), заключается в том, что Popover может содержать гораздо больше контента, в том числе кнопки и ссылки.

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

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

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

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

Запускается по четко обозначенной кнопке или иконке. Появляется справа
от вызвавшего его элемента. Если справа не хватает пространства для подсказки, допустимо расположение с других сторон от элемента в порядке приоритета: сверху, слева, снизу.

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

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

Состоит из компонентов: Заголовок и подзаголовок (Title & subtitle) , Текст, Слот (Slot)
и Кнопок (Button)

Popover имеет три размера:

S — ширина 160px.
M — ширина 240px.
L — ширина 320px.

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

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

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

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

Текст и иконки

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

У Popover нет ограничений по высоте контейнера для текста, за исключением ограниченной ширины, которая зависит от выбранного размера компонента (S, M, L). Однако рекомендуется избегать размещения слишком длинных текстов, особенно если они состоят из нескольких предложений.