# Dialog: Руководства ## Паттерны ### Подтверждение действия Когда использовать: - необратимое или значимое действие требует подтверждения Заметки по композиции: - делайте содержимое коротким - используйте явные основное и второстепенное действия - формулируйте заголовок через последствия Компромиссы: - сильное прерывание повышает безопасность - злоупотребление добавляет трения ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const destructive = { '--button-background-color': 'var(--color-red-accent-500)', '--button-background-color-hover': 'var(--color-red-accent-600)', '--button-background-color-active': 'var(--color-red-accent-700)', } as CSSProperties; export default function ConfirmAction() { const titleId = useId(); const descriptionId = useId(); const [deleted, setDeleted] = useState(false); return (

{deleted ? ( <> Q3 board deck.pdf moved to trash. ) : ( <>

Q3 board deck.pdf 4.2 MB · Edited yesterday

)}

); } ``` ### Форма в модальном окне Когда использовать: - небольшой сценарий редактирования должен остаться на текущей странице Заметки по композиции: - делайте форму короткой - следите, чтобы закрытие и отправка оставались видимыми Компромиссы: - хорошо подходит для точечных правок - плохо подходит для длинных многошаговых форм ```tsx import { useId, useState, type CSSProperties, type FormEvent } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, HelperText, Icon, IconButton, Label, Text, TextField, TextFieldInput, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function FormInModal() { const titleId = useId(); const nameId = useId(); const slugId = useId(); const slugHintId = useId(); const [project, setProject] = useState({ name: 'Mobile banking app', slug: 'mobile-banking' }); const onSubmit = (event: FormEvent) => { const data = new FormData(event.currentTarget); setProject({ name: String(data.get('name')), slug: String(data.get('slug')) }); }; return (

{project.name} vega.app/{project.slug}

); } ``` ### Прокручиваемое модальное содержимое Когда использовать: - содержимое может вырасти больше комфортной высоты модального окна Заметки по композиции: - задайте телу `max-height`, `overflow: auto` и `overscroll-behavior: contain` - держите заголовок и действия вне прокручиваемой области Компромиссы: - сохраняет модальную рамку - требует продуманной раскладки, чтобы содержимое не оказалось недоступным ```tsx import { useId, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const people = ['Ada Lovelace', 'Grace Hopper', 'Linus Torvalds', 'Margaret Hamilton', 'Alan Kay']; const actions = ['changed the plan to Pro', 'invited a member', 'exported invoices', 'rotated the API key', 'updated billing details']; const events = Array.from({ length: 40 }, (_, index) => { const minutes = 18 * 60 + 55 - index * 7; const time = `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}`; return { id: index, time, text: `${people[index % people.length]} ${actions[(index * 3) % actions.length]}` }; }); export default function ScrollableContentDialog() { const titleId = useId(); return ( ); } ``` ### Вложенный шаг подтверждения Когда использовать: - родительскому модальному сценарию нужен ещё небольшой шаг подтверждения Заметки по композиции: - рассматривайте вложенные диалоги как пограничный случай - перепроверяйте восстановление фокуса и обработку Escape Компромиссы: - позволяет сохранить контекст родительского сценария - быстро повышает сложность оверлеев и доступности ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const destructive = { '--button-background-color': 'var(--color-red-accent-500)', '--button-background-color-hover': 'var(--color-red-accent-600)', '--button-background-color-active': 'var(--color-red-accent-700)', } as CSSProperties; export default function NestedConfirmStep() { const memberTitleId = useId(); const confirmTitleId = useId(); const [memberOpen, setMemberOpen] = useState(false); const [removed, setRemoved] = useState(false); const remove = () => { setRemoved(true); setMemberOpen(false); }; return (

Grace Hopper {removed ? 'Removed from the team' : 'Admin · grace@northwind.dev'}

{removed && }

); } ``` ## Сравнение ### Быстрое правило выбора Выбирайте `Dialog`, когда пользователь должен завершить или подтвердить сфокусированную модальную задачу, прежде чем вернуться на основную страницу. ### `Dialog` или `Drawer` Используйте `Dialog`, когда: - задача модальная - содержимое должно ощущаться центрированным и ограниченным - подтверждение или прерывание — часть UX Используйте `Drawer`, когда: - задача воспринимается как боковая панель - раскладке подходит содержимое, прикреплённое к краю Компромисс: - `Dialog` сильнее и сильнее прерывает работу - выдвижная панель (Drawer) просторнее для рабочих сценариев и второстепенного редактирования ### `Dialog` или `Sheet` Используйте `Dialog`, когда: - раскладка должна ощущаться как центрированная модальная поверхность - основная ментальная модель — ограниченный фокус в духе десктопа Используйте `Sheet`, когда: - подача должна быть ближе к мобильной или выезжающей шторке (Sheet) ### `Dialog` или `Popover` Используйте `Dialog`, когда: - содержимое — модальная задача - важны ловушка фокуса и явное закрытие Используйте `Popover`, когда: - содержимое лёгкое и немодальное ### `Dialog` или `Tooltip` Используйте `Dialog`, когда: - содержимое интерактивное или ориентировано на задачу Используйте `Tooltip`, когда: - содержимое носит только информационный характер ### Выбирайте этот компонент, когда - пользователь должен явно завершить или закрыть сценарий - в содержимом есть поля формы или действия подтверждения - модальное прерывание — задуманный UX - более строгая ловушка фокуса — часть продуктового контракта ### Не выбирайте этот компонент, когда - содержимое лёгкое и контекстное - оверлей должен оставаться немодальным - главное — текст подсказки, а не взаимодействие ## Решение проблем ### Фокус не возвращается на триггер #### Симптом После закрытия диалога фокус оказывается в неожиданном месте или кажется полностью потерянным. #### Вероятная причина Реальный сценарий с триггером заменён кастомной обёрткой или композицией вложенных оверлеев. #### Как проверить - откройте диалог с клавиатуры - закройте его через `Escape` или кнопку закрытия - проверьте, куда попадает фокус #### Решение - сначала вернитесь к стандартной композиции с `DialogTrigger` - перепроверьте именно тот стек вложенных оверлеев ### Вложенные диалоги ведут себя нестабильно #### Симптом Обработка Escape, наложение или перемещение фокуса работают непоследовательно, когда открыто несколько диалогов. #### Вероятная причина Вложенные диалоги рассматривались как изолированные оверлеи, а не как интеграционный случай на уровне стека. #### Как проверить - откройте родительский и вложенный диалоги - закройте их в обратном порядке - проверьте восстановление фокуса на каждом уровне #### Решение - сохраняйте стандартную структуру частей `Dialog` - перепроверяйте вложенные оверлеи как единый интеграционный сценарий ### Длинное содержимое выталкивает действия за пределы экрана #### Симптом Пользователям трудно добраться до действий, когда тело диалога растёт. #### Вероятная причина Для контейнера содержимого не задана стратегия прокрутки. #### Как проверить - заполните диалог длинным содержимым - проверьте на меньших высотах вьюпорта #### Решение - сделайте внутреннюю область содержимого прокручиваемой - по возможности держите шапку и важные действия вне прокручиваемой области ### Диалог открывается, но выглядит безымянным #### Симптом Диалог виден, но пользователям не хватает понятной ориентации. #### Вероятная причина У `DialogContent` нет `aria-labelledby` или `aria-label`, либо заголовок, на который он ссылается, слишком расплывчатый. #### Как проверить - откройте диалог, не глядя на триггер - проверьте, понятно ли назначение модального окна #### Решение - добавьте конкретный заголовок с `id` и передайте его в `DialogContent` как `aria-labelledby` - формулируйте заголовок через задачу