Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Components

Dialogs and right-side sheets

Contain editing and contextual details using native modal dialog behavior.

On this page

Purpose and composition

Contain editing and contextual details using native modal dialog behavior.

Use a sheet for context while retaining draft state; use centered editors for decisions.

Anatomy

Anatomy
Part	Responsibility
Header	Title, description and close action
Body	Caller-supplied content
Footer	Caller-supplied actions
Backdrop	Dark translucent blur

Configuration and variants

Configuration and variants
Input / variant	Contract
open/onClose	Controlled boolean and close callback
title/description	Header text; description optional
sheet	Right-aligned full-height 460px maximum
className	Source editors use max-w-2xl overrides

States and feedback

States and feedback
State	Visible / behavioral result
Open	showModal in effect
Closed	dialog.close in effect
Escape	onCancel calls parent onClose
Overflow	Max-height shell, parent body scroller

Interaction and responsive behavior

Use a single open dialog per task.
Preserve a scrollable middle and visible actions.
Reset draft values by remounting keyed editors where the source does so.
Native dialog provides modal focus containment; verify return focus per entry point.

Accessibility contract

The source does not link title/description with aria-labelledby/aria-describedby.
Native modal behavior is present, but dialog naming remains a documented gap.
Close button is labeled Close dialog.

Known implementation limits

No backdrop-click close handler exists. Tall forms can overflow the hidden outer dialog and auto-scroll away from header/footer. Full-content crops increase only the viewport height and are labeled; the source layout is not modified. Full focus-return and screen-reader announcement require additional verification.

Composition example

<Dialog open={open} onClose={close} title="Edit person"><EditorBody /><EditorFooter /></Dialog>

Source references

Source references
File	Responsibility
components/ui/dialog.tsx	Dialog wrapper

Examples from the app

Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.