You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.0 KiB
Markdown
48 lines
2.0 KiB
Markdown
# Reusable Dialog Component Prompt
|
|
|
|
Create a reusable dialog composition for `<confirmation/form/detail use case>`.
|
|
Inspect `src/shared/components/ui/dialog.tsx` and existing feature dialogs first.
|
|
Compose the existing accessible primitive rather than implementing focus
|
|
management manually.
|
|
|
|
## React contract
|
|
|
|
- Controlled API: `open` and `onOpenChange`.
|
|
- Content props: `title`, optional `description`, `children`, and action slots.
|
|
- Expose `trigger` as composition only when the use case needs it.
|
|
- Support `size`: `<sm | md | lg | fullscreen-mobile>`.
|
|
- Keep mutation/API logic in the parent and receive pending/result state through
|
|
props.
|
|
|
|
## Styling theme: focused overlay
|
|
|
|
- Overlay reduces background distraction without making context disappear.
|
|
- Content uses `bg-popover`, `text-popover-foreground`, `border-border`, and a
|
|
restrained shadow.
|
|
- Title is clear; description and secondary actions are visually quieter.
|
|
- Destructive confirmation visually emphasizes consequence and names the target.
|
|
- On small screens, content uses available height and keeps critical actions
|
|
reachable.
|
|
- Opening/closing motion is subtle and respects reduced-motion preferences.
|
|
|
|
## Accessibility behavior
|
|
|
|
- Focus is trapped while open and restored to the trigger on close.
|
|
- Escape closes unless `<explicit blocking reason>`.
|
|
- Title and description label the dialog.
|
|
- Initial focus goes to the safest useful control, not automatically to a
|
|
destructive action.
|
|
- Background content is unavailable to assistive technology while open.
|
|
|
|
## Acceptance criteria
|
|
|
|
1. Controlled open/close behavior has no duplicated internal source of truth.
|
|
2. Cancel, close button, overlay click, Escape, and successful action follow the
|
|
defined close policy.
|
|
3. Pending actions cannot be submitted twice and do not strand keyboard focus.
|
|
4. Long content remains scrollable while header/actions remain understandable.
|
|
5. The dialog is usable on mobile, desktop, keyboard, and screen reader.
|
|
|
|
Run focused linting allowed by the repository instructions and finish with a
|
|
simple **TL;DR**.
|