Repository navigation
Update Toast component style to match new UI - #15
Conversation
- Introduced Toast.css for styling the toast notifications. - Created Toast.tsx to define the ToastContent and ToastRing components. - Updated ToastContext.tsx to utilize the new Toast component for custom toast notifications. - Modified tests to verify the use of custom toast functionality.
📝 WalkthroughWalkthroughAdds a Toast UI component with animated progress ring and CSS; centralizes toast rendering via Changes
Sequence Diagram(s)sequenceDiagram
participant App as App (caller)
participant TC as ToastContext
participant RHT as react-hot-toast
participant UI as ToastContent
App->>TC: showToast(type, message, icon)
TC->>RHT: toast.custom(renderFn, { duration: TOAST_DURATION_MS, ...toastConfig })
RHT->>UI: invoke renderFn() -> JSX (ToastContent)
UI-->>RHT: returned DOM (SVG ring, icon, message)
RHT-->>App: displays custom toast
rect rgba(0,128,0,0.5)
Note right of UI: toast ring animation runs (2.5s)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dralan71
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/Toast.tsx`:
- Line 4: Remove the duplicate type declaration by keeping the ToastType
definition in Toast.tsx and deleting the separate declaration in
ToastContext.tsx; then update ToastContext.tsx to import ToastType from
Toast.tsx and re-export it (so consumers import from the context file while the
canonical type lives in Toast.tsx). Ensure you only have one exported ToastType
symbol (the one in Toast.tsx) and adjust any imports accordingly.
🧹 Nitpick comments (2)
src/Toast.css (1)
1-58: Clean BEM-structured CSS with well-matched animation timing.The ring circumference math is correct (
2π × 8 ≈ 50.27), and the 2.5s animation duration aligns with theduration: 2500in the JS toast config.One minor note: the success color
#5a9a6eis hardcoded here (Lines 38, 52) and also inToastContext.tsxasSUCCESS_ICON_COLOR. Consider using a CSS custom property (e.g.,--toast-success) to keep the color in one place.src/test/ToastContext.test.tsx (1)
33-54: Consider adding a test forcustomToast.errorto cover both toast types.Currently only
"success"paths are tested (addItem,addBaggage,removeItem). Adding a test forcustomToast.errorwould verify the"error"type flows throughshowToastcorrectly and exercises both branches ofToastType.
There was a problem hiding this comment.
Pull request overview
This PR updates the app’s toast notification system to use a custom toast UI (with a progress ring + styling) instead of the default react-hot-toast success/error toasts, and adjusts tests accordingly.
Changes:
- Added a new
Toastcomponent (ToastContent) and stylesheet to render custom success/error notifications. - Updated
ToastContextto route all toast helpers throughtoast.custom(...). - Updated tests/mocks to include
toast.customand to validate the new call path.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/ToastContext.tsx | Switches toast helpers from toast.success/error to toast.custom rendering ToastContent. |
| src/Toast.tsx | Introduces the custom toast UI (ring + icon + message). |
| src/Toast.css | Adds styles/animation for the custom toast appearance and progress ring. |
| src/test/ToastContext.test.tsx | Updates tests to expect toast.custom usage. |
| src/test/App.test.tsx | Updates react-hot-toast mock to include toast.custom. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/ToastContext.tsx`:
- Around line 43-49: Replace the inline color string in the error toast with the
shared constant: in the error method that calls showToast and renders <PiXCircle
... />, use the TRASH_COLOR constant instead of the hard-coded "var(--accent)";
update the JSX in the error function (the PiXCircle style prop) to reference
TRASH_COLOR so the icon color is sourced from the single constant (or swap to a
new ERROR_ICON_COLOR constant if you want a separate token).
🧹 Nitpick comments (2)
src/ToastContext.tsx (2)
8-9: Inconsistent theming approach between constants.
TRASH_COLORreferences a CSS custom property (var(--accent)), making it theme-aware, whileSUCCESS_ICON_COLORis a hardcoded hex#5a9a6e. If the app supports theming or dark mode, the success color won't adapt. Consider defining a CSS variable (e.g.--success-icon-color) for consistency.
11-16:toast.customrender callback ignores thetargument — exit animations won't work.
toast.custompasses aToastobject to the render function, wheret.visibletoggles tofalsebefore removal. By discarding it, there is no way to trigger a CSS exit transition — toasts will vanish abruptly when the duration expires. If you want smooth enter/exit behaviour, threadt.visiblethrough toToastContent(or at minimum to a wrapper class/style).Suggested approach
-function showToast(type: ToastType, message: string, icon: React.ReactElement) { - return toast.custom( - () => <ToastContent type={type} message={message} icon={icon} />, - { duration: 2500 } - ); +function showToast(type: ToastType, message: string, icon: React.ReactElement) { + return toast.custom( + (t) => ( + <div style={{ opacity: t.visible ? 1 : 0, transition: "opacity 0.3s ease" }}> + <ToastContent type={type} message={message} icon={icon} /> + </div> + ), + { duration: 2500 } + ); }Alternatively, pass
visibleas a prop toToastContentand handle the transition inside the component.
- Introduced a constant for toast duration in ToastContext.tsx. - Updated App.tsx to use the new TOAST_DURATION_MS constant for toast duration. - Modified Toast.tsx to accept a durationMs prop and apply it via CSS variables for better customization. - Enhanced accessibility by adding aria-hidden and focusable attributes to the ToastRing SVG component. - Adjusted Toast.css to utilize the new CSS variable for animation duration.
|
@coderabbitai help |
ChatThere are 3 ways to chat with CodeRabbit:
CodeRabbit commands
Other keywords and placeholders
CodeRabbit configuration file (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/App.tsx`:
- Around line 302-308: The toastConfig.style object is being spread directly
into toastOptions instead of nested under the style key, so move
...toastConfig.style into toastOptions.style (i.e., set toastOptions={{
duration: TOAST_DURATION_MS, style: { ...toastConfig.style, ...(other style
overrides) } }}). Update the Toaster usage (component name Toaster and prop
toastOptions) to ensure wrapper styles from toastConfig.style are applied
correctly while preserving duration via TOAST_DURATION_MS.
🧹 Nitpick comments (3)
src/ToastContext.tsx (1)
5-6: Dual export ofToastTypecreates an ambiguous import path.
ToastTypeis already exported fromsrc/Toast.tsx(line 3) and re-exported here on line 6. Consumers can import from either module, which may cause confusion over the canonical source. Consider picking one authoritative module for the export and importing from there consistently.src/test/ToastContext.test.tsx (2)
38-43: Hard-coded2500will silently drift ifTOAST_DURATION_MSchanges.Import and reference the constant to keep the assertion in sync:
Proposed fix
+import { TOAST_DURATION_MS } from '../ToastContext'; // ... - expect.objectContaining({ duration: 2500 }) + expect.objectContaining({ duration: TOAST_DURATION_MS })Apply the same change to the other three
expect.objectContaining({ duration: 2500 })assertions (lines 55, 68, 81).
33-88: Consider splitting the monolithic test into individual cases per toast type.A single test exercising four distinct toast paths makes failures harder to diagnose — a failure on the third assertion obscures whether the first two still pass. Extracting each toast call (addItem, addBaggage, removeItem, error) into its own
it(...)block improves isolation and readability.
- Updated the toastOptions in App.tsx to spread the style property correctly, ensuring proper application of toast styles.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
This pull request refactors the toast notification system to use a custom React component for all toast messages, enabling consistent styling and richer visuals. It replaces the previous style-based configuration with a new
ToastContentcomponent and updates all toast calls to usetoast.custom. Supporting CSS and tests are also updated to match the new approach.Toast system refactor and visual improvements:
ToastContentReact component insrc/Toast.tsxthat renders toast messages with a progress ring and type-colored icons, replacing the previous style-based toast configuration.src/Toast.cssfor styling the custom toast component, including progress ring animation and color themes for success and error types.src/ToastContext.tsxso all toast notifications now usetoast.customwith the newToastContentcomponent, and removed the oldtoastConfigstyling logic. All toast functions are adapted to the new system.Testing updates:
src/test/App.test.tsxandsrc/test/ToastContext.test.tsxto includetoast.customfor compatibility with the new toast system. [1] [2]src/test/ToastContext.test.tsxto assert thattoast.customis called instead oftoast.success, reflecting the refactored toast notification logic.Type of Change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes.
Checklist
Summary by CodeRabbit
New Features
Bug Fixes / Improvements
Tests