feat(branches): ResponsiveDialog — dialog on desktop, bottom sheet on mobile#43
Merged
Conversation
… on mobile) ResponsiveDialog mirrors the Dialog family one-for-one so a consumer swaps Dialog* -> ResponsiveDialog* with no other change. On viewports >=768px it delegates to DialogContent verbatim (exact parity); below 768px it renders a bottom-anchored sheet on the same Radix primitive - full-width, capped at 85vh and scrollable, grab-handle affordance, sliding up via a new bottom-sheet-* motion utility. Behaviour and a11y (focus trap, scroll lock, Esc, scrim, aria-*) are shared by both forms; only geometry and motion differ. No new token. - roots: add bottom-sheet-in/out keyframes + --animate-bottom-sheet-* theme vars - canopy: exported useMediaQuery/useIsMobile hook (extracted from SideNav's pattern) - spec 0031 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014BG2KnZxnE2rMd2XcDmNcg
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
ResponsiveDialogto@rogueoak/canopy/branches(spec 0031): one compound that renders a centred modal on desktop and a bottom sheet on mobile, chosen at(max-width: 767px). Mirrors theDialogfamily one-for-one, so a consumer swapsDialog*→ResponsiveDialog*with no other change.DialogContentverbatim → pixel-identical to a plain Dialog.max-h-[85vh]+ scroll,rounded-t-lg, grab-handle affordance, slides up.Esc, scrim dismiss,aria-modal/aria-labelledby/aria-describedby) are Radix's, shared by both forms.Changes
bottom-sheet-in/outkeyframes +--animate-bottom-sheet-*theme vars (Y-axis sibling of the drawer slide).useMediaQuery/useIsMobile/MOBILE_QUERY(extracted from SideNav's inlined pattern);ResponsiveDialog*family + barrel export.dark:.Test
pnpm build && pnpm test && pnpm lint && pnpm format:checkall green locally (262 tests, incl. a parameterised suite over both forms).🤖 Generated with Claude Code