From 2715d29a1f2b8520a1f7708ccd17450af575f47c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 14 Aug 2019 15:06:50 -0700 Subject: [PATCH] Update toasts.md --- docs/content/components/toasts.md | 169 +++++++++++------------------- 1 file changed, 62 insertions(+), 107 deletions(-) diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md index 1d015de0..40f59be7 100644 --- a/docs/content/components/toasts.md +++ b/docs/content/components/toasts.md @@ -13,24 +13,16 @@ Toasts are used to show live, time-sensitive feedback to users. To create a default toast, use `.Toast`. Always use the `info` icon for default messages. -```html live title="Default toast" +```html live
- - Toast message goes here @@ -40,30 +32,22 @@ To create a default toast, use `.Toast`. Always use the `info` icon for default The Toast content is formattable. We recommend keeping your message under 140 characters. -```html live title="Toast with long text" +```html live
- - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma +
``` @@ -74,21 +58,13 @@ Use the success, warning, and error modifiers to communicate different states. Always use the `check` octicon for success states. -```html live title="Success toast" +```html live
- Success message goes here. @@ -98,24 +74,16 @@ Always use the `check` octicon for success states. Always use the `alert` octicon for warning states. -```html live title="Warning toast" +```html live
- Warning message goes here. @@ -125,24 +93,16 @@ Always use the `alert` octicon for warning states. Always use the `stop` octicon for error states. -```html live title="Error toast" +```html live
- Error message goes here @@ -154,41 +114,26 @@ Always use the `stop` octicon for error states. Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. -```html live title="Toast with dismiss" +```html live
- This toast is dismissable.
@@ -199,40 +144,58 @@ Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. Include a link to allow users to take actions within a Toast. -```html live title="Toast with link" +```html live
- - + + Toast message goes here Action.
``` -## Toast animation +## Toast animation in The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom. -```html live title="Toast animating" +```html live
- + Toast message goes here. +
+
+``` + +## Toast with loading animation + +Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state. + +```html live +
+
+ + Toast message goes here. @@ -244,25 +207,17 @@ The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to a Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport. -```html live title="Toast animating" +```html live
- Toast message goes here.