Toast component

[pennyandrews]

The Chore

We need a design for a generic toast component added to the UI toolkit. This will initially be used for showing transaction statuses, but it should be flexible enough for other use cases too.

Tasks

• Brief/discuss use cases with UX/design team
• Design
• Review
• Implement

Additional details / background info

Note: Radix now has a toast component which we should probably leverage to ensure a11y and interaction concerns are covered.

We may need both a Toast component and possibly a Toaster component to handle display of multiple toasts (probably stacking them as it will be possible to execute multiple tx simultaneously)

[PeteWilliams]

Proposed design here: https://www.figma.com/file/K49Nx7XfocShhHcwwQzQkm/Console-V2?node-id=3672%3A35294

Current thinking is that toasts would only be used to communicate things to the user something that the system has done - Not prompt them to do something.
So 'confirm in your wallet' would remain as dialogs.

Proposed toast structure

Behaviour

• Automatically closes after 4 seconds
• Fades away with 1500ms transition
• Doesn’t fade away while hovering, focussed or on window blur
• If already fading but then hover/focus on it, goes back to full opactity and stays until you move/focus away again
• Close via icon or swipe
• Multiples toasts should stack
• When above one fades out, ones below should move up

Examples

Position

Questions

What happens when you’re not there when event happens - ideally you'd get the notifications when you next log in, but I'd imagine that's a lot more work?
With fills you could potentially end up with dozens for a given order. Could the filled value stream until the toast goes?

[PeteWilliams]

I've done a quick mockup of how the transitions would ideally work: https://codepen.io/PeteWilliams/pen/mdKybbR

Specification:

• Toasts appear in top right corner by fading in and sliding up 20px over 0.3s
• Should end in position 20px from top and right
• Additional toasts should stack up below
• After 4 seconds, or when clicking close
  • toast slides out of screen and fades away over 0.75s
  • any toast(s) below slide up over 0.75s
• If hovering/focussing on the toast, it doesn't fade away, nor do the ones below. Timer starts from 0 when hover away

[bigfandavid]

NICE! Will jump on this tomorrow - today has run away with me with swag stuff.

[bigfandavid]

Hi @mattrussell36 @PeteWilliams

I did some research into UI design for toasts and then developed the UX work Pete has done (thanks!).

I've drawn up three initial options that I'd like to get feedback on... I'm drawn to the first option, but aware the third option is more aligned with other Vega UI elements.

Any thoughts? Happy to explore further if this hasn't hit the right note yet!

Cheers,
David

[PeteWilliams]

I like 1 and 3. Would be good to see them in situ to see how they'd look in Console. Probably best to stick to the existing orange and red colours for warning and error. Blue could be a useful option for info though, maybe for things like notifications promoting new features or incentives in the future. The ones with a secondary line of content need more contrast for legibility though, and it'd be good to have the market name stand out a bit more.

[bigfandavid]

Thanks Pete - I've made some revisions and also placed both in situ for comparison. You can view the files here: https://www.figma.com/file/deV7EBxvTF4ggdsKVVosfr/Console-V2?node-id=631%3A4624

Let me know your thoughts @PeteWilliams @mattrussell36

[PeteWilliams]

Looks good @bigfandavid. I think I prefer option 1, but no strong preference. Wasn't expecting it to be white on the dark theme, but don't have a problem with it as it stands out nicely.