Design Pattern Library - Add toast messages

Add toast messages design pattern to brand.ai.

Example(s)

(Image of the pattern you are adding to the library)

Toast types

Type	Image
Single line message
Single line message with an action
Two lines message with a custom action
Two lines message with an action

Example - 01	Example - 02
With contextual navigation and side bar	Without contextual navigation and side bar

Usage

(When do you use this pattern? And how? This is being collected for design.gitlab)

Toasts are used for system messages. The messages are short and simple. Only a toast can be displayed at a time. It may contain a dismiss button and an action button depends on the situations. The color of the action button is $blue-300.

Toasts appear with ease-in animation from the bottom and display at the left-bottom of the screen. Toasts exit by clicking “Dismiss” button or automatically disappear with ease-out animation after a timeout. If you hover over a fading out toast, the toast will remain until the cursor moves out.

The maximum width of toasts is 568px. The alignment and pixel spacing from the bottom and left sides of the viewport:

Screen with contextual navigation	Full-width screen

Mobile

• The width of toast is full.
• Toasts don't have the rounded corners in the shape.
• If the message has only one line and the only action is to dismiss, the toasts retain the Dismiss icon. (01)
• If the message wraps onto another line:

• If there's a dismiss and a custom action, put them below the message, aligned to the right, with the “Dismiss” action first (02)
• If there is only a custom action (no dismiss action) and the text wraps into another line, put the action below the message (03)

01	02	03

Animation prototype

• https://framer.cloud/GbFkF
• Click "Show" button, it will show the toast.
• Click the toast, the toast will disappear.
• Ease-in(Show up) / Ease-out (Disappear)
• Time: .25
• Hover over the link or action:

• Color: $blue-300 :: 73AFEA --> $blue-200 :: B8D6F4

Dos and Dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

Showing only a toast at a time

• If there are two toasts, the second toast should appear after the first toast disappeared.

Do	Don’t

Toasts can contains a "Dismiss" button and an action button.

• Don't have an extra button other than a "Dismiss" button and an action button.

Do	Don’t

Toasts should have a "Dismiss" button

Do	Don’t

Aovid using for irreversible actions

Do	Don’t

Related patterns

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

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. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that text is created using text styles. When applicable used shared styles for colors.
5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)

mentioned in issue #26 (closed)

marked this issue as related to #26 (closed)

assigned to @sarrahvesselov

changed the description

changed milestone to %10.3

added Deliverable label

marked this issue as related to #49 (closed)

@sarrahvesselov @tauriedavis as I heard some things might be assigned to me, I might want to do this one ;)

mentioned in issue #49 (closed)

Works for me if @sarrahvesselov hasnt started yet!

assigned to @hazelyang

unassigned @sarrahvesselov

@hazelyang don't know if you use whatsapp, but they have a similar style as inbox by gmail going on ;)

It says (as it's in Dutch):

• Group will be deleted
• Deleted group - Dismiss cross icon [x]

It includes the animation from the bottom and a delay before disappearing. I think their delay is a little short though (inbox does this better imo)

I saw one other such toast from web whatsapp where they have an action element other dan a dismiss cross icon.. it was a link colored orange in this case as it was an error. (I have no image though, sorry!)

@dimitrieh Thanks for those examples! I think we can have the similar animation like Inbox.

I saw one other such toast from web whatsapp where they have an action element other dan a dismiss cross icon.. it was a link colored orange in this case as it was an error.

It's similar to this, correct? (Having an action and a "close" buttons)

mentioned in commit 0c0d9440

changed the description

marked the checklist item Ensure that you have broken things down into atoms, molecules, and organisms. as completed

marked the checklist item Check that you have not created a duplicate of an existing pattern. as completed

marked the checklist item Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. as completed

Updated the description!

changed the description

changed the description

[ ] Make sure that text is created using text styles. When applicable used shared styles for colors.

@sarrahvesselov @tauriedavis In the toasts, the text style is UI/primary/07 Small but in white. Should I create a new UI/primary/07 Small in white?

In the toasts, the text style is UI/primary/07 Small but in white. Should I create a new UI/primary/07 Small in white?

Yeah, to match the others I think it would be something like UI/inverted/07 Small

changed the description

changed the description

changed the description

Is this complete @hazelyang?

marked the checklist item Make sure that text is created using text styles. When applicable used shared styles for colors. as completed

@sarrahvesselov Completed! Maybe we can do QA.

Assign someone to QA it @hazelyang

@pedroms Can you help to QA my work? Thanks! (The components are in gitlab-elements.sketch)

assigned to @pedroms

looking good here @hazelyang !! will leave qa up to pedro :)

@hazelyang thanks for mentioning me. I've taken a look at both the Sketch file and the usages notes in the issue description.

Sketch file:

• The close icon should use one of the icon symbols. Also, it's strange that it is sized 14x14 instead of 16x16
• In the examples, if there's only one sentence, don't add an ending period
• Apply simpler naming to the symbols:
  • global-components/toasts/single1-line
  • global-components/toasts/single1-line-with-an-action
  • global-components/toasts/single2-lines
  • global-components/toasts/single2-lines-with-an-action
• The rounded corners of the toast's background should adhere to the measure system, using 4px instead of 3px
• Can you think of a more abstract name for the background-toast-message layer style? Something that can be applied to more elements other than toasts? Maybe floating/dark? Not sure… what are your suggestions?
• For the UI/inverted/06 Text and UI/anchor/06 Text -- bold + toast text styles, define a 16px line height instead of leaving it auto
• Rename the UI/anchor/06 Text -- bold + toast text style to UI/inverted-anchor/06 Text -- bold
• For all overridable text layers, make sure they have purposeful names, it's easier to identify what you will be overriding. Example: “message” instead of “Users were added successfully.”, or “action” instead of “Undo”.
• The message text layers should have 16px padding top and bottom
• single-line-with-an-action should be resized to fit the message, like the single-line
• In two-lines, remove the underline rectangle and consider applying a real underline to the text. As it is, when you override the message, the rectangle stays floating around
• In two-line toasts, shouldn't the action and close icon be aligned to the top of the message?

@tauriedavis if you look at this component, there's the need to format the messages with bold and underlines. Should they stay as symbols or be groups instead?

Usage notes:

• Not sure about having different background colors. The black toast already contrasts a lot with the white background, so I'm not sure of the advantage of having different colors. Legibility and contrast-wise the black is better than any other color, and it's a safe color for the blue action links.
• I don't agree with using toasts for error messages, critical information, or system broadcasts. They should be used for giving feedback about the task the user is performing, in a non-intrusive way, and making sure that the consequences are not harmful if the user ignores or doesn't notice the toast.
• I'm also unsure about the added value of icons. As in the previous point, the toast animation and contrast will already grab the attention of the user.
• Google gets by without any color or icons, and they have a much larger product ecosystem. Maybe I'm seeing this from the wrong angle, so feel free to disagree and share your rationale.
• It would be helpful to define the following so that toasts get implemented correctly:
  • the maximum width the text message
  • spacing from the bottom and left sides of the viewport and alignment
  • mobile behavior

mentioned in commit 3e1c5368

Thanks @pedroms for the very clear QA feedback!

Sketch file

I followed the feedback to update my designs. You can check them on 3e1c5368

In two-lines, remove the underline rectangle and consider applying a real underline to the text. As it is, when you override the message, the rectangle stays floating around

I still keep the underline rectangle here because if I apply the real underline style, the whole paragraph will has the undline. Do you know how to make it underlined only with a certain word even if the paragraph is in the shared text style?

Usage notes

I don't agree with using toasts for error messages, critical information, or system broadcasts. They should be used for giving feedback about the task the user is performing, in a non-intrusive way, and making sure that the consequences are not harmful if the user ignores or doesn't notice the toast.

@pedroms Thanks for your opinions. I agree with the toasts are for giving the feedback.

I am trying to simplify our banner types, and I think toasts works for most situations errors/warning/system messages, except for the irreversible actions(critical information).

• The toasts used for warning/errors/system messages can show on the screen until users clicking "Dismiss", so users wouldn't miss those messages. And the different background colors would help users recognize the different message types.
• For critical information, they should be displayed as a modal to interrupt users interaction with the products. So they are not part of toasts.
• For error messages, if it was related to the cases such as Username/password error, the messages close to the input field would be good. So it might not be included in toasts.

• Toasts are only used for the cases like Someone edtied the file at the same time you did. Please check out the file and make sure your changes will not unintentionally remove theirs.

Let me know if you have any thougts. Thanks!

I'm also unsure about the added value of icons. As in the previous point, the toast animation and contrast will already grab the attention of the user.

I agree with you.

@hazelyang great!

Sketch file

• In 2-lines-action remove the ending period
• Delete the unused border color from the floating/dark layer style
• Align the UI/anchor/06 Text -- bold + toast text style to the left, as this can be used later in other situations
• Rename the UI/anchor/06 Text -- bold + toast text style to UI/inverted-anchor/06 Text -- bold
• As part of making sure all layers have purposeful names, consider renaming:
  • icn/merge-request-close-m to icon
  • Rectangle to background

There are still three pending points from my last review:

• single-line-with-an-action should be resized to fit the message, like the single-line (current vs after)
• In two-lines, remove the underline rectangle and consider applying a real underline to the text.
  • Yeah, I see what you're saying, Sketch doesn't allow that. On the other hand, should we really have links in the message? In this case, wouldn't it be better to have a “Check out file” action? Example
• In two-line toasts, shouldn't the action and close icon be aligned to the top of the message?

Usage notes

I agree with most of your opinions. Can you please update the description with the new information you've explained in your comment? And also remove the example that has an icon.

The only thing I'm really uncertain about is the different background colors. I'm having trouble seeing the value. Nonetheless, if you strongly believe it makes sense to have them, it's necessary to add the different color variations to the design library, validating the text-background color contrasts.

There are still these pending points from my last review:

• It would be helpful to define the following so that toasts get implemented correctly:
  • the maximum width the text message (example)
  • alignment and pixel spacing from the bottom and left sides of the viewport
  • mobile behavior

In two-lines, remove the underline rectangle and consider applying a real underline to the text.

• Yeah, I see what you're saying, Sketch doesn't allow that. On the other hand, should we really have links in the message? In this case, wouldn't it be better to have a “Check out file” action?

What do you think we put the actions on the next line if the action name is long?

In two-line toasts, shouldn't the action and close icon be aligned to the top of the message?

I think it might look weird if they were aligned to the top of the message. I would lean towards aligning them to the center.

The only thing I'm really uncertain about is the different background colors. I'm having trouble seeing the value. Nonetheless, if you strongly believe it makes sense to have them, it's necessary to add the different color variations to the design library, validating the text-background color contrasts.

Maybe we only use black as the background at this point. If we find it's hard for users to recognize the different types of the banner, we can iterate it in the future.

Note: One thing will be affected by this decision is that we won't support the customized colors for the broadcast messages in the future.

---

My todos:

• Remove the example that has an icon
• It would be helpful to define the following so that toasts get implemented correctly:

• the maximum width the text message (example)
• alignment and pixel spacing from the bottom and left sides of the viewport
• mobile behavior

changed the description

mentioned in commit 96caefc7