Add design-system form, Modal, and Toast primitives (#1317, #1318, #1319) - #1457
Open
Young850 wants to merge 1 commit into
Open
Add design-system form, Modal, and Toast primitives (#1317, #1318, #1319)#1457Young850 wants to merge 1 commit into
Young850 wants to merge 1 commit into
Conversation
, solutions-plug#1318, solutions-plug#1319) solutions-plug#1317: added TextInput.tsx, Select.tsx, and Textarea.tsx under components/ui/ — self-contained accessible form primitives (own label/hint/error rendering, aria-invalid/aria-describedby wiring, forwardRef) so market creation, admin content editing, and the wallet/bet form can share one validation-state-styled implementation instead of each rolling their own. Styling follows the existing inline-style + CSS-token convention already used by components/admin/Form.tsx's Input/Textarea/Select (the closest prior art for this pattern in the repo). solutions-plug#1318: added Modal.tsx under components/ui/, consolidating the two existing ad-hoc implementations (components/Modal.tsx and components/admin/Modal.tsx — the former's own header comment notes it exists only because this shared primitive didn't yet). Combines both: focus trap + Tab-cycling, Escape-to-close, backdrop click-to-close (each independently disable-able for confirmation-gated destructive actions), body-scroll lock while open, and focus restoration on close. solutions-plug#1319: added Toast.tsx (ToastContainer) and lib/hooks/useToast.ts under components/ui/ — a module-level toast store with an imperative `toast.success/error/warning/info(...)` API callable from anywhere (API mutation handlers included, not just components), rendered by a single `<ToastContainer />` mounted near the app root. Color tokens match the existing StatusAlert component's success/error/warning/info convention. None of these paths existed before this change; no existing consumers were migrated to the new primitives (out of scope for this PR — the issues asked for the primitives themselves). Closes solutions-plug#1317 Closes solutions-plug#1318 Closes solutions-plug#1319 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014jDDop7frnew1xcCJDSKEw
|
@Young850 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
TextInput.tsx,Select.tsx, andTextarea.tsxunderfrontend/src/components/ui/— self-contained accessible form primitives (own label/hint/error rendering,aria-invalid/aria-describedbywiring,forwardRef) so market creation (feat: Enable Stellar Classic assets (USDC) integration via SAC #69-76), admin content editing (test: impl tests for contract interactions #97), and the wallet/bet form (Features/issue 5 contact form api #78) can share one validation-state-styled implementation. Styling follows the existing inline-style + CSS-token convention already used bycomponents/admin/Form.tsx's Input/Textarea/Select — the closest prior art for this pattern in the repo.Modal.tsxunderfrontend/src/components/ui/, consolidating the two existing ad-hoc implementations (components/Modal.tsxandcomponents/admin/Modal.tsx— the former's own header comment notes it exists only because this shared primitive didn't exist yet). Combines both: focus trap + Tab-cycling, Escape-to-close, backdrop click-to-close (each independently disable-able, for confirmation-gated destructive actions like Features/issue 8 waitlist management api #74/Feature/accessibility testing wcag compliance #96/Feature/issue 92 e2e tests #102), body-scroll lock while open, and focus restoration on close.Toast.tsx(ToastContainer) andfrontend/src/lib/hooks/useToast.ts— a module-level toast store with an imperativetoast.success/error/warning/info(...)API callable from anywhere (API mutation handlers included, not just components), rendered by a single<ToastContainer />mounted near the app root. Color tokens match the existingStatusAlertcomponent's success/error/warning/info convention.None of these paths existed before this change. No existing consumers were migrated to the new primitives — that's out of scope for this PR, which builds the primitives the issues asked for.
Test plan
--surface-2,--border,--destructive,--radius-sm, etc.) againstfrontend/src/styles/tokens.cssand existing sibling components (components/admin/Form.tsx,components/admin/Modal.tsx,components/Modal.tsx) for visual/API consistencyCloses #1317
Closes #1318
Closes #1319