WIP Banner/toast usage/paradigm

Problem

(What’s the problem that this pattern solves? Why is it worth solving?)

Solution

(What’s the solution? Why is it like that? What are the benefits?)

• 1 message sentence (left aligned)
• 1 primary action (Secondary outlined button) (right aligned)
• 1 dismiss action (cross icon) (right aligned)
• Max limited width toast. If a message gets longer, it will increase the width until a certain point.. if even more the height of the toast gets increased instead.
• Always displayed within the content section of the page (right from the left sidebar)
• Always displayed in the left bottom corner
• Similar dark background as dark tooltips (same padding)
• Normal default text size
• 8 second delay before automatically dismissing
• Animation showing up from bottom (this animated movement helps bring user attention to it!, also it's a toast 🍞 so it should pop upwards when ready! 😄 )

Reference

• https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs

Example(s)

(One or more images showing the UX pattern. They don’t have to be in GitLab.)

Usage

(When do you use this pattern? And how?)

Dos and dont's

(Use this table to add images and text describing what’s ok and not ok.)

✅ Do	🛑 Don’t

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Add to the UX Guide
2. Add to the Design Library
3. Add an agenda item to the next UX weekly call to inform everyone