feat: toast

[fbwoolf]

Try out this version of Leather — Extension build, Test report

This PR implements a new Toast using a Radix primitive and a reference implementation from them to manage toast notifications: example codesandbox

I am proposing here we abandon react-hot-toast bc the library is outdated, ref their Github repo here. There are lots of outstanding issues and only one commit in 2024.

The Radix implementation, using React Context, allowed me to simply swap out our current implementation with a new context hook, toast = useToast(). As an example, our implementation is still, toast.success('Message'). The context also includes: info, error, and promise. The implementation here allows multiple toasts to occur, but we can customize that if we want. There is a lot we can do with this in the future.

The only place I wasn't able to use the hook was in the debug code, but I don't think it is necessary to show a toast there bc a user is already in the console. I switched that one to a logger message.

Stories included...

[pete-watters]

Nice work @fbwoolf . I tested this and its working well and cleaner than the previous implementation. I think it's a good idea to use as much styled primitives as we can to keep our library consistent

[kyranjamie]

Nice improvement.

Must admit I preferred the API of react-hot-toast, was nice being able to trigger it outside a react context. All good removing it though.

Appreciate the separation you've gone for putting the global provider level code in a feature, and only the dumb components in the ui folder.

[fabric-8]

Looking great @fbwoolf!

Not a blocker, but maybe s.th. we can look into later: I think the tick animation for the success toast was a nice touch, would be nice if we can bring it back.

[markmhendrickson]

@fabric-8 @mica000 I'm curious if we have (or should create) design guidance for whether to show the toast always at the top or bottom of the viewport? We seem to show in both places without consistently, though I suspect we should decide just one so the user can rely on it there.

[fabric-8]

@markmhendrickson It's actually supposed to alway appear on top

[markmhendrickson]

Thanks, got it. @fbwoolf could we do a general audit of placement as part of this work stream or a new separate issue?

[fbwoolf]

Thanks, got it. @fbwoolf could we do a general audit of placement as part of this work stream or a new separate issue?

The changes here position it only at the top for all instances. It was refactored based on the design spec which only positioned the toast now at the top center.

[fbwoolf]

Not a blocker, but maybe s.th. we can look into later: I think the tick animation for the success toast was a nice touch, would be nice if we can bring it back.

Do you mean with the old checkmark icon? This is the old one to ref: https://github.com/timolins/react-hot-toast/blob/main/src/components/checkmark.tsx