danielh02
/
dev-rcfa-memory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '38ede967b8'
${ noResults }
dev-rcfa-memory/fe-digitaltwin-v2/prompts/components/dialog/prompt.md

2.0 KiB
Raw Blame History

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.