feat: add core overlay UI primitives (Popover, RadioGroup, Dialog, Sheet) - #137
Open
G-ELM wants to merge 4 commits into
Open
feat: add core overlay UI primitives (Popover, RadioGroup, Dialog, Sheet)#137G-ELM wants to merge 4 commits into
G-ELM wants to merge 4 commits into
Conversation
Add a lightweight anchored popover primitive (src/components/ui/popover.tsx) built on @radix-ui/react-popover for non-modal contextual panels such as a wallet-address QR preview or an inline filter panel, styled to match the app's card/border theme tokens.
Add a controllable RadioGroup primitive (src/components/ui/radio-group.tsx) built on @radix-ui/react-radio-group so single-choice inputs, such as the planned SubscriptionForm billing interval (Daily/Weekly/Monthly/Yearly), can use a radio group instead of a select.
Add a modal Dialog primitive (src/components/ui/dialog.tsx) built on the already-installed @radix-ui/react-dialog, exposing DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, and DialogDescription with overlay/close behaviors. Needed by planned invoice cancellation confirmation, share invoice modal, and API key deletion flows.
Add a Sheet primitive (src/components/ui/sheet.tsx) built on @radix-ui/react-dialog with tw-animate-css slide in/out transitions from a configurable side (top, bottom, left, right). Intended for the planned mobile navigation drawer and other future slide-out panels.
|
@G-ELM Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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
src/components/ui/popover.tsx— anchored, non-modal popover built on@radix-ui/react-popover, for contextual panels like a wallet-address QRpreview or an inline filter panel.
src/components/ui/radio-group.tsx— controllable single-select radiogroup built on
@radix-ui/react-radio-group, for choices like the plannedSubscriptionForm billing interval (Daily/Weekly/Monthly/Yearly).
src/components/ui/dialog.tsx— modal dialog built on the existing@radix-ui/react-dialogdependency, with Trigger, Content, Header, Footer,Title, Description, and overlay/close behaviors, for upcoming invoice
cancellation confirmation, share invoice modal, and API key deletion flows.
src/components/ui/sheet.tsx— slide-out drawer built on@radix-ui/react-dialogwithtw-animate-cssslide animations from aconfigurable side (top/bottom/left/right), for the planned mobile
navigation drawer and future drawers.
@radix-ui/react-popover,@radix-ui/react-radio-group.All components are styled with the app's existing card/border/background
theme tokens (
bg-popover,border-border,text-foreground,text-muted-foreground, etc.) for visual consistency with the rest of the UI.Test plan
Popoveranchored to a trigger button; confirm it opens/closeson outside click and matches card styling in light/dark mode.
RadioGroup/RadioGroupItemwith a controlledvalue; confirmonly one option is selectable and state updates via
onValueChange.Dialog; confirm it traps focus, closes on overlay clickand Escape, and matches the visual theme.
Sheetwithside="left" | "right" | "bottom"; confirm smoothslide in/out and dismissal on overlay click/Escape.
Closes #91
Closes #100
Closes #101
Closes #102