🪟 🎨 Update toast design

[dizel852]

What

Resolves #18631
Closes #19277

Design:
https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=1475%3A2667&t=SvkHvP2U7YBoxfkU-0

How

Adds new Toast design + update Notification Service interface + update storybook

Types were added:

Notification examples:

[dizel852]

❓ Just to clarify: chatted with @Upmitt , and we have a design for "errored warning" and "grey info" toasts.
Do we need to add these kinds of toasts also?

❓ One more clarifications is needed:
@edmundito in #18631 you've mentioned that:

Reduce the bottom margin of the page ($spacing-page-bottom in scss) to be enough for the toast + Intercom badge (>= 88px) - Design

Do we need to reduce or increase? Atm we have 49px margin and $spacing-page-bottom: 150px;? So, what should I do? 😅

[edmundito]

I did a review and posted a few notes.

I will follow up with you about the positioning and the margin issue.

I tried stress testing the toast content and looks like it may nee more work for cases when there's a lot of text:

• Should the text be centered?
• Should the icon be vertically aligned?
• Should the icon and the button protect their width?

[edmundito]

@dizel852 for the bottom spacing:

Should be 27 px from the bottom instead of 49 as shown in the example Figma:

$spacing-page-bottom can be reduced to 88px

[dizel852]

@dizel852 for the bottom spacing:

Should be 27 px from the bottom instead of 49 as shown in the example Figma:

$spacing-page-bottom can be reduced to 88px

$spacing-page-bottom - is used to add margin in <MainPageWithScroll /> component. That was a fix for the issue #12780

We can just change the toast bottom margin without changing the $spacing-page-bottom variable.
Since we don't use it in the toast component. 🤷‍♂️

[dizel852]

Fixed all the comments. Ready for another review.

[timroes]

@dizel852 I believe we're not using intercom for banners anymore so we could maybe remove the page bottom padding (or make it smaller). Let me check that beginning of next week and get back to you for this.

[dizel852]

@dizel852 I believe we're not using intercom for banners anymore so we could maybe remove the page bottom padding (or make it smaller). Let me check that beginning of next week and get back to you for this.

😮 Oh, didn't know that. Okay, looking forward to your reply 👍

[dizel852]

Fixes and updates:

• need to reserve space for the intercom banner(remain existing 150px) (chatted with @timroes )

Chatted with @Upmitt regarding toast behavior and some cases:

• align the toast text to left
• align all elements in the toast to top
• set max container width to 600px
• extend the base <Button /> component: do not break the text in the button

Toast behavior examples from @Upmitt:
https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=1998%3A3950&t=Z3OLPrNfZvNfbf0o-0

[edmundito]

Just a couple of minor details 🔍

[krishnaglick]

I don't think I have any comments that others have not covered!

[dizel852]

All comments are resolved. Ready for review.

[edmundito]

Tested on chromatic and tried out a few toasts locally.