Uh oh!
There was an error while loading. Please reload this page.
refactor(ui): migrate toast + confirm + permission dialogs to Base UI (#520 PR6) - #542
Conversation
PR6 commit 1: PermissionDialog -> Base UI AlertDialog.
- ui.tsx: add AlertDialog wrappers (AlertDialogRoot/AlertDialogContent) mirroring Dialog wrappers (Portal/Backdrop/Popup, maka-dialog-backdrop hook). AlertDialog locks modal + disables pointer dismissal (Base UI alert-dialog). Escape NOT auto-disabled — callers intercept onOpenChange + details.cancel() to block.
- permission-dialog.tsx: DialogRoot/DialogContent (Base UI Dialog) -> AlertDialogRoot/AlertDialogContent. Delete hand-set role=alertdialog (AlertDialog auto). Delete useModalA11y + dialogRef (Base UI focus trap/restore). Keep conditional mount (no open prop, parent {activePermission && <PermissionDialog>}) — use defaultOpen + onOpenChange cancel to block Escape (permission requires explicit allow/deny). Keep complex content (reason presets/summary/remember/danger).
- ui-tsx-design-contract: bump z-40/z-50/backdrop-blur-sm counts 1->2 (AlertDialog backdrop/popup shares the hooks).
Full desktop suite 1994/1994 pass. Modal-lifecycle + permission-response-ipc-boundary + renderer-utility-primitives + toast-confirm-keyboard + toast-position-fixed contracts pass.
Tracking issue: #520 PR6.PR6 commit 2: ConfirmDialog (toast.tsx) -> Base UI AlertDialog.
- toast.tsx: ConfirmDialog hand-written <div role=alertdialog> + useModalA11y -> AlertDialogRoot/AlertDialogContent (Base UI). Delete useModalA11y + dialogRef (Base UI focus trap/restore). Keep cancelRef + initialFocus={cancelRef} (Base UI AlertDialog initialFocus on Popup). Escape/backdrop close = onResolve(false) (cancel) via onOpenChange. Keep toast.confirm Promise + queue (ToastProvider hand-written).
- toast-confirm-keyboard-contract: role=alertdialog grep -> AlertDialogRoot (Base UI auto-sets role); useModalA11y(dialogRef,...,cancelRef) grep -> initialFocus={cancelRef}.
- chat-header.css: delete orphan .maka-confirm-backdrop (confirm now uses shared maka-dialog-backdrop via AlertDialogBackdrop).
- renderer-utility-primitives-contract: import { Button } grep -> import {... Button ...} (allows AlertDialog imports alongside Button).
Full desktop suite 1994/1994 pass.
Tracking issue: #520 PR6.PR6 commit 3: toast.tsx ToastProvider/ToastViewport/toast li -> Base UI Toast.
- ToastProvider: BaseToast.Provider + BaseToast.createToastManager drive toasts. push -> toastManager.add; dismiss -> toastManager.close. Delete hand-written toasts state + dismiss timer (Base UI manages timeout + exit transition). Keep hand-written confirm queue (activeConfirmRef/confirmQueueRef/resolveConfirm, toast-confirm-keyboard contract) — Base UI Toast has no confirm concept. useToast()/toast/success/error/info/warning/confirm/dismiss API unchanged.
- ToastViewport: <ol> -> BaseToast.Viewport render={<ol .../>}. toast <li> -> BaseToast.Root render={<li role=alert data-variant data-exiting>} + BaseToast.Title/Description/Action/Close (render prop keeps <strong>/<small>/<Button>). data-exiting maps Base UI transitionStatus=ending onto existing .maka-toast[data-exiting=true] exit animation.
- BaseToast.Provider limit={Infinity} (no toast count cap; existing had none).
- ConfirmDialog unchanged (commit 2).
Full desktop suite 1994/1994 pass. toast-position-fixed (TOAST_POSITION=bottom-right + no position prop) + toast-confirm-keyboard (queue) + renderer-utility-primitives (toast buttons) contracts pass.
Tracking issue: #520 PR6.…PR6) ui.tsx comment claimed toast.tsx 'already wraps Base UI Toast' — it did not (hand-written). PR6 commit 3 migrated the toast surface to Base UI Toast; update the comment to reflect that. No code change.
…ocus (#520 PR6) PR6 review P1: continuous confirm queue advance left focus on the confirm button. ConfirmDialog had no key, so React reused the same instance across queue advances. AlertDialogRoot's uncontrolled defaultOpen + initialFocus only fire on mount — the second confirm inherited the first's focus (stuck on the confirm button), and Enter would mis-confirm a dangerous op. Fix: PendingConfirm carries a stable id (c{n} from the existing idSeed); <ConfirmDialog key={confirmState.id}> forces a remount on queue advance, so defaultOpen + initialFocus re-run and the cancel button re-takes focus on every new confirm. Contract: toast-confirm-keyboard-contract gains a 'remounts on queue advance' case asserting the id generation + key prop. Real DOM test (activeElement + Enter) deferred to a separate PR — the project has no jsdom/happy-dom DOM test infrastructure today; introducing it is a test-architecture change that doesn't belong in a migration PR.
…mation (#520 PR6) PR6 review P3.2: drop the redundant data-exiting adapter layer. Base UI ToastRoot already sets data-ending-style (animating out) + data-starting-style (animating in) automatically (confirmed in ToastRootDataAttributes.d.ts). The hand-rolled data-exiting={entry.transitionStatus === 'ending' ...} mapped Base UI's transitionStatus onto a parallel attribute — not the simplest migration. Drop the JSX adapter; CSS switches .maka-toast[data-exiting="true"] -> .maka-toast[data-ending-style] (1 rule, chat-header.css). Exit animation + pointer-events:none now keyed on Base UI's native attribute.
… shells (#520 PR6) PR6 review P3.1: AlertDialog wrappers copied Dialog's Backdrop/Popup/Content. Dialog and AlertDialog differ only in their Base UI primitive family (Root/Portal/Backdrop/Popup/Close); the layout (backdrop class, popup class, Portal+Backdrop+Popup+optional Close structure) is identical. AlertDialogPopupProps is a direct alias of DialogPopupProps in Base UI (confirmed in alert-dialog/index.d.ts: DialogPopupProps as AlertDialogPopupProps), so a single concrete type works — no generics needed. Extract createModalContent(primitives) factory: takes {Portal, Backdrop, Popup, Close, defaultShowClose}, returns a forwardRef Content. DialogContent and AlertDialogContent each call it with their Base UI primitives. MODAL_BACKDROP_CLASS + MODAL_POPUP_CLASS constants hold the shared layout (z-40/z-50/backdrop-blur-sm/rounded-xl/shadow-maka-panel). Deletes ~60 lines of duplicate Backdrop/Popup/Content forwardRef wrappers. ui-tsx-design-contract z-40/z-50/backdrop-blur-sm counts return 2->1 (no more duplicated className). radius-converge-contract DialogPopup entry -> MODAL_POPUP_CLASS (same rounded-xl modal tier). Full desktop suite 1995/1995 pass.
Astro-Han
commented
Jul 5, 2026
Review fixes pushedThanks for the review. P1 + P3.1 + P3.2 fixed (3 commits), P2 push-back below. P1 (blocker) — fixed in |
Summary
Sixth PR of #520. Migrates the toast surface + confirm dialog + permission dialog onto Base UI Toast + AlertDialog, keeping the
useToast()/toast.confirm()API +.maka-toast/.maka-modalCSS + the hand-written confirm queue. Same converge/migration pattern as #526 / #533 / #527 / #539.Why
Refs #520. Toast, ConfirmDialog, and PermissionDialog were the last three hand-written modals in the renderer — each re-implemented
role, focus trap/restore, and Esc handling viauseModalA11y, duplicating what Base UI AlertDialog/Toast provide. Converging them onto Base UI removes the duplicate a11y surface and unblocks PR7 (large Base UI migrations).Scope
Changed:
ToastProvider/ToastViewport/toast<li>→ Base UI Toast (BaseToast.Provider+createToastManager+Viewport/Root/Title/Description/Action/Close, all viarenderprop to keep<ol>/<li role="alert">/<strong>/<small>/<Button>DOM shape).push→toastManager.add,dismiss→toastManager.close; hand-written toasts state + two-phase dismiss timer deleted (Base UI manages timeout + exit transition).data-exitingmaps Base UItransitionStatus="ending"onto the existing.maka-toast[data-exiting="true"]animation.limit={Infinity}(no count cap; existing had none).AlertDialogRoot/AlertDialogContent.useModalA11y+dialogRefdeleted;cancelRefkept asinitialFocus={cancelRef}on the popup. Escape/backdrop close =onResolve(false)(cancel) viaonOpenChange.toast.confirm()Promise + queue unchanged.AlertDialogRoot/AlertDialogContent. Hand-setrole="alertdialog"+useModalA11ydeleted. Conditional mount preserved (noopenprop —defaultOpen+onOpenChangecancel blocks Escape, since a permission request requires an explicit allow/deny). Complex content (reason presets / summary / remember checkbox / danger alert) unchanged.AlertDialogRoot/AlertDialogContentwrappers mirroring the Dialog wrappers (Portal + Backdrop + Popup, sharedmaka-dialog-backdrophook). Comment corrected (toast.tsx now wraps Base UI Toast, not "left for later")..maka-confirm-backdrop(confirm now uses sharedmaka-dialog-backdropviaAlertDialogBackdrop).toast-confirm-keyboard-contract(role→AlertDialogRoot,useModalA11y→initialFocus; queue invariants unchanged),ui-tsx-design-contract(z-40/z-50/backdrop-blur-smcounts 1→2),renderer-utility-primitives-contract(import { Button }grep widened to allow AlertDialog imports alongside Button).modal-lifecycle-contractunchanged.Not included:
.worktree/base-ui-small-migrations..maka-toast/.maka-modalCSS is preserved; only the underlying component layer swaps.Verification
@maka/ui+@maka/desktopbuild: success.User-facing impact
No visual change —
.maka-toast/.maka-modalCSS and DOM shape are preserved viarenderprops. Behavior parity: confirm/permission focus trap/restore + Esc handling now come from Base UI AlertDialog (equivalent to the prioruseModalA11y). Permission dialog Esc stays blocked (onOpenChangecancel). Toast enter/exit animation now driven by Base UItransitionStatusmapped onto the existingdata-exitingattribute (same visual).Reviewer notes
ToastProvider(activeConfirmRef/confirmQueueRef/resolveConfirm) — Base UI Toast has no confirm concept;toast-confirm-keyboard-contractpins the queue invariants.renderprop preserves DOM shape (<ol>,<li role="alert">,<strong>,<small>,<Button>) so.maka-toastCSS keeps holding without a CSS rewrite.onOpenChange+details.cancel()blocks Escape in PermissionDialog.defaultOpen(notopen) preserves the conditional-mount patternmodal-lifecycle-contractchecks for.