Popover

Всплывающая панель у якорного элемента: заголовок, пояснение, произвольный слот и действия. Закрывается только пользователем — крестиком или Escape.

Direction

единственная вариантная ось набора · Figma 1205:3278
↑ Top стрелка сверху → панель под якорем
↓ Bottom стрелка снизу → панель над якорем
← Left стрелка слева → панель справа от якоря
→ Right стрелка справа → панель слева от якоря

Положение стрелки

Figma «Arrow direction»: First · Center · Last · инсет от угла 12
start (First)
center
end (Last)

Части

булевы свойства набора · всё, кроме заголовка, отключаемо
полный состав — Show Actions group = On
Show Pointer = Off
Show Close Button = Off
Show Description = Off
Show Secondary Button = Off
Show LinkText = Off
Actions — реверс

Слот произвольного контента

Figma «Swap Container» · ширина от 200 до 480
таблица внутри слота

Токены

снято Plugin API с набора 1205:3278
ЧтоFigmaТокен / величина
Заливка панелиStatic/Surface/Neutral-Blue/High Contrast--ds-surface-nb-hc
Рамка панелиStatic/Border/Neutral-Blue/Low--ds-stroke-low
Теньстиль эффекта «Shadow/md»--ds-popover-shadow
СкруглениеRadius/rad-150 = 12--ds-radius-lg
Внутренний отступPadding/pad-150 = 12calc(--ds-comp-unit × 3)
Разрядка блоковGap/gap-150 = 12calc(--ds-comp-unit × 3)
Разрядка в ActionsGap/gap-200 = 16calc(--ds-comp-unit × 4)
ЗаголовокInter Medium 16 / 24, Static/Text/Neutral-Blue/Primary--ds-text-md · --ds-text-primary
ОписаниеInter Regular 14 / 16, Static/Text/Neutral-Blue/Secondary--ds-text-base · --ds-text-secondary
Кнопка закрытияTertiary IconOnly 32×32, x = 164, y = 4 при ширине 200ghost · sm · top / right = 4
Стрелка12 × 6, инсет от угла 12квадрат 12/√2, поворот 45°
Ширинаминимум 200, максимум 480calc(--ds-comp-unit × 50 … 120)

Правила использования

03_Components/Popover/Popover.md

Так

  • Отступ от якорного элемента — ноль: собственный отступ уже заложен в панель
  • Центр стрелки совмещать с якорным элементом
  • Заголовок — до двух строк, описание — до пяти
  • Одновременно открыт только один Popover: тот, с которым взаимодействуют
  • Формулировки действий — глаголами: «Продолжить», «Готово», не «OK»

Не так

  • Прокрутка внутри панели — запрещена спекой; не помещается — нужен другой компонент
  • Панель во весь экран или полностью перекрывающая контент без крестика
  • Выход за границы окна браузера
  • Постоянный оверлей: панель закрывает только пользователь
  • Критические действия — подтверждение удаления делает Modal

State Explorer

Интерактивный тест состояний