Repository navigation
Conversation
Ovgodd
marked this pull request as draft
July 7, 2026 10:07
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
2 times, most recently
from
July 7, 2026 12:18
da06727 to
90e3e6b
Compare
Ovgodd
marked this pull request as ready for review
July 7, 2026 13:02
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
3 times, most recently
from
August 25, 2026 10:58
68d58d6 to
0a4a2fd
Compare
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
3 times, most recently
from
September 15, 2026 09:41
442b2dd to
3475255
Compare
PanchoutNathan
left a comment
PanchoutNathan
left a comment
Collaborator
There was a problem hiding this comment.
Hi! Thanks for the work! There are a few minor UX issues. Currently, I feel like the icons aren't quite right. The neutral variant is white. The info is labeled "brand," but I don't think we're actually using the brand. Is the notification's display direction configurable? The progress bar is now useless since we're no longer including it. The height of the Toast isn't consistent depending on whether there are buttons or not. I'm wondering if there should be some standardization between Alerts and Toasts, at least in terms of content.
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
4 times, most recently
from
September 17, 2026 14:47
50b96bf to
3cbb432
Compare
Comment on lines
+34
to
+40
| <span className="c__toast-extended__item-status"> | ||
| {item.status === "completed" ? ( | ||
| <CircleCheckFilled size={16} /> | ||
| ) : ( | ||
| <Loader size={16} className="c__toast-extended__item-loader" /> | ||
| )} | ||
| </span> |
Collaborator
There was a problem hiding this comment.
The completed and loading states are represented only by unnamed SVGs. Chromium's accessibility tree exposes the file title and an unnamed image, but no transfer state. Please provide a localized status text, visually hidden if necessary, and make the icons decorative.
| @@ -0,0 +1,94 @@ | |||
| /** | |||
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
3 times, most recently
from
September 21, 2026 12:18
42bd471 to
a0f6cf2
Compare
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
2 times, most recently
from
September 24, 2026 08:10
4326494 to
6c01982
Compare
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
2 times, most recently
from
October 5, 2026 21:55
79eed8a to
2e9ab3a
Compare
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
from
October 5, 2026 22:00
2e9ab3a to
dfa25fd
Compare
Move the alert message row (icon, message, labelled buttons, close button) into an internal NotificationContent component, prefixed by the BEM block of the component embedding it. AlertProps now extends the exported NotificationProps. The markup, the buttons and the styles are unchanged, so the alert looks exactly the same.
Give the alert its new look: full tint, 8px radius, 24px icon, 14px text and
8px padding. The labelled buttons become borderless 32px buttons tinted with
the variant, info uses the brand palette and neutral gets its own variant.
The theme override in alert.scss is gone.
NotificationContent gains the props behind it: actions as a list of
{ label, onClick } descriptors, hideIcon, and an icon moved after the message
when it is interactive. On mobile, the actions wrap under the message,
centered, with the close button kept top-right.
Install react-toastify and rebuild the toast on it. The toast keeps the current call site and gains a position, live updates through updateToast and its own lifecycle when mounted alone. It renders its message row through NotificationContent, like the alert, and is centered on mobile whatever its position. The old ProgressBar exported by the toast goes away with it. Its replacement comes in the next commit.
Add a standalone ProgressBar, in the brand color, with its own tokens. It replaces the one the old toast used to export.
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
from
October 6, 2026 10:21
dfa25fd to
36aa923
Compare
Ovgodd
force-pushed
the
feat/new-toast-ui
branch
from
October 6, 2026 12:11
4bf8f2b to
dfa61dd
Compare
This branch has not been deployed
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
2 participants
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.
Purpose
Adapt the existing Toast to the new Figma design, using
react-toastifyunder the hood.The public API stays the same (
useToastProvider,toast(message, type, options), current props). New features are additive (progress, structuredactions,toastExtended,updateToast,dismissToast).Two variants
Lien maquettes : ici
toast.mp4
Apps keep wrapping with
CunninghamProvider/ToastProviderand callingtoast()as today. Nothing to migrate.Proposal
react-toastifyuseToastProvider/ToastProviderand delegate the lifecycle toreact-toastifyprogress, structuredactions,toastExtended,updateToast,dismissToast