COMPONENT: Modal / Dialog Component

[nayan458]

Task: Modal / Dialog Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: M

Component Type

• Design system (no API calls, pure props)

Props Interface

interface ModalProps {
  isOpen:       boolean;
  onClose:      () => void;
  title?:       string;
  description?: string;
  children?:    ReactNode;
  footer?:      ReactNode;       // action buttons slot
  size?:        'sm' | 'md' | 'lg';
  isDismissable?: boolean;       // if false, clicking backdrop does nothing
  className?:   string;
  testId?:      string;
}

Variants / States

State	Description
Closed	Renders nothing — no DOM node present
Open	Backdrop + centered dialog, entrance animation
With footer	Action buttons (e.g. Confirm + Cancel) in bottom slot
Non-dismissable	Backdrop click and ESC do nothing — for critical confirmations
sm / md / lg	Width variants: 360px / 480px / 640px

Acceptance Criteria

• Rendered via createPortal into document.body — never trapped inside a positioned ancestor
• Focus trapped inside modal while open — Tab cycles only within modal
• ESC key calls onClose when isDismissable is true
• Backdrop click calls onClose when isDismissable is true
• body scroll locked while modal is open
• Entrance animation: fade-in backdrop + scale-up dialog
• footer slot renders below a divider, right-aligned by default
• Closes cleanly — no lingering backdrop, scroll lock released
• Zero hardcoded hex values
• Storybook stories: default, with footer, non-dismissable, all sizes
• Unit tested: ESC closes, backdrop click closes, focus trap works

Notes

• ConfirmModal (used for Ban / Remove / Dismiss actions in M4) is built on top of this — validate the footer slot handles two side-by-side buttons before signing off
• Used also in M2 UserPanel drawer variant — keep isDismissable default as true