From 8797e0e585ee80700259a7d76ec70c386c013549 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Tue, 18 Jun 2019 12:27:49 +0200 Subject: [PATCH 01/26] Create toast module, begin styling work --- pages/css/components/toasts.md | 66 ++++++++++++++++++++ src/product/index.scss | 1 + src/toasts/README.md | 1 + src/toasts/index.scss | 2 + src/toasts/toasts.scss | 107 +++++++++++++++++++++++++++++++++ 5 files changed, 177 insertions(+) create mode 100644 pages/css/components/toasts.md create mode 100644 src/toasts/README.md create mode 100644 src/toasts/index.scss create mode 100644 src/toasts/toasts.scss diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md new file mode 100644 index 0000000000..6f3e13cd9e --- /dev/null +++ b/pages/css/components/toasts.md @@ -0,0 +1,66 @@ +--- +title: Toasts +path: components/toasts +status: Experimental +status_issue: 'https://github.com/github/design-systems/issues/101' +source: '' +bundle: toasts +--- + +# Toasts + +To create a default toast, use `.Toast` + +```html title="Toast" +
+ Submitting issue to github/github +
+``` + + +## Classic style + +```html title="Classic style" +
+ Submitting issue to github/github +
+
+ Submitting issue to github/github +
+
+ Submitting issue to github/github +
+
+ Submitting issue to github/github +
+``` + +## Light style + +```html title="Light style" +
+ Submitting issue to github/github +
+
+ + Submitting issue to github/github +
+
+ + Submitting issue to github/github +
+
+ + Submitting issue to github/github +
+``` + +## Toast with action + +```html title="Toast with action" +
+ + Submitting issue to github/github + +
+``` diff --git a/src/product/index.scss b/src/product/index.scss index b055bc7038..1b512a298f 100644 --- a/src/product/index.scss +++ b/src/product/index.scss @@ -23,3 +23,4 @@ @import "../popover/index.scss"; @import "../progress/index.scss"; @import "../subhead/index.scss"; +@import "../toasts/index.scss" diff --git a/src/toasts/README.md b/src/toasts/README.md new file mode 100644 index 0000000000..5850a7421b --- /dev/null +++ b/src/toasts/README.md @@ -0,0 +1 @@ +# Primer Toasts diff --git a/src/toasts/index.scss b/src/toasts/index.scss new file mode 100644 index 0000000000..e982bf0efd --- /dev/null +++ b/src/toasts/index.scss @@ -0,0 +1,2 @@ +@import "../support/index.scss"; +@import "./toasts.scss"; diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss new file mode 100644 index 0000000000..a1850c2f2e --- /dev/null +++ b/src/toasts/toasts.scss @@ -0,0 +1,107 @@ +// Toast + +.Toast { + display: flex; + align-items: center; + background-color: white; + color: $black; + padding: $spacer-3; + margin: $spacer-3; + border-radius: 3px; + border: 1px solid $black-fade-15; + max-width: 400px; + min-width: 200px; + box-shadow: $box-shadow-large; +} + +// Temporary placeholder for real octicons +.Toast-octicon { + width:16px; + height:16px; + background-color: $gray-500; + margin-right: $spacer-2; + border-radius: 50%; +} + +.Toast-action { + margin-left: auto; +} + + +// Temporarily splitting this out +// to play with static styles. +.Toast-animated { + position: fixed; + bottom: -100px; + left: 0; + animation-name: toast; + animation-duration: 10s; + animation-delay: 1s; + animation-iteration-count: infinite; + animation-timing-function: ease; +} + +// Pop up animation +@keyframes toast { + 0% {bottom:-100px;} + 5% {bottom:0px;} + 90% {bottom:0px;} + 100% {bottom:-100px;} +} + + + + +// Style options +// ----- + +// 1. Classic GitHub style + +.Toast-classic-default { + background-color: $blue-100; + color: $blue-900; + border: 1px solid $gray-300; +} + +.Toast-classic-error { + background-color: $red-100; + color: $red-900; +} + +.Toast-classic-warning { + background-color: $yellow-100; + color: $yellow-900; +} + +.Toast-classic-success { + background-color: $green-100; + color: $green-900; +} + + + +// 2. Light style + +.Toast-light-error { + border-top: 4px solid $red-500; + + .Toast-octicon { + background-color: $red-500; + } +} + +.Toast-light-warning { + border-top: 4px solid $yellow-600; + + .Toast-octicon { + background-color: $yellow-600; + } +} + +.Toast-light-success { + border-top: 4px solid $green-500; + + .Toast-octicon { + background-color: $green-500; + } +} From bcd08ecc68a76e95e6e8893efa66effe956434f0 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Tue, 18 Jun 2019 17:21:50 +0200 Subject: [PATCH 02/26] Add icons and organize examples --- pages/css/components/toasts.md | 64 ++++++++++++++++++++++++++++++---- src/toasts/toasts.scss | 26 ++++++++------ 2 files changed, 73 insertions(+), 17 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 6f3e13cd9e..f589888cd0 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -13,7 +13,7 @@ To create a default toast, use `.Toast` ```html title="Toast"
- Submitting issue to github/github + Submitting issue to github/github
``` @@ -23,15 +23,28 @@ To create a default toast, use `.Toast` ```html title="Classic style"
Submitting issue to github/github +
+ + + Submitting issue to github/github +
+ + + Submitting issue to github/github +
+ + + Submitting issue to github/github +
``` @@ -40,27 +53,66 @@ To create a default toast, use `.Toast` ```html title="Light style"
Submitting issue to github/github +
- + + + Submitting issue to github/github +
- + + + Submitting issue to github/github +
- + + + Submitting issue to github/github +
``` ## Toast with action +```html title="Toast with link" +
+ + + +
+
Submitting issue to github/github. Try again.
+
+ +
+``` + +## Toast with dismiss + ```html title="Toast with action"
- + +
+ Submitting issue to github/github + +
+ +
+``` + +## Toast animating + +```html title="Toast animating" +
+ + + Submitting issue to github/github - +
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index a1850c2f2e..b843b9c0b6 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -2,7 +2,6 @@ .Toast { display: flex; - align-items: center; background-color: white; color: $black; padding: $spacer-3; @@ -12,19 +11,25 @@ max-width: 400px; min-width: 200px; box-shadow: $box-shadow-large; + width: max-content; } -// Temporary placeholder for real octicons .Toast-octicon { - width:16px; - height:16px; - background-color: $gray-500; margin-right: $spacer-2; - border-radius: 50%; } .Toast-action { - margin-left: auto; + margin-top: $spacer-2; +} + +.Toast-dismiss { + margin-left: $spacer-4; + color: $text-gray; + + &:hover { + cursor: pointer; + color: $text-gray-dark; + } } @@ -60,7 +65,6 @@ .Toast-classic-default { background-color: $blue-100; color: $blue-900; - border: 1px solid $gray-300; } .Toast-classic-error { @@ -86,7 +90,7 @@ border-top: 4px solid $red-500; .Toast-octicon { - background-color: $red-500; + color: $red-500; } } @@ -94,7 +98,7 @@ border-top: 4px solid $yellow-600; .Toast-octicon { - background-color: $yellow-600; + color: $yellow-800; } } @@ -102,6 +106,6 @@ border-top: 4px solid $green-500; .Toast-octicon { - background-color: $green-500; + color: $green-500; } } From 8309f72561135642293ba15cad310d0d289e89b9 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Tue, 18 Jun 2019 17:28:25 +0200 Subject: [PATCH 03/26] Add bright style to compare --- pages/css/components/toasts.md | 30 +++++++++++++++++++ src/toasts/toasts.scss | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index f589888cd0..ce744fb824 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -78,6 +78,36 @@ To create a default toast, use `.Toast` ``` +## Bright style + +```html title="Bright style" +
+ Submitting issue to github/github + +
+
+ + + + Submitting issue to github/github + +
+
+ + + + Submitting issue to github/github + +
+
+ + + + Submitting issue to github/github + +
+``` + ## Toast with action ```html title="Toast with link" diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index b843b9c0b6..84ea451a3c 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -109,3 +109,58 @@ color: $green-500; } } + +// 3. Bright style + +.Toast-bright-default { + background-color: $blue-500; + color: white; + + .Toast-octicon { + color: white; + } + + .Toast-dismiss { + color: white; + } +} + + +.Toast-bright-error { + background-color: $red-500; + color: white; + + .Toast-octicon { + color: white; + } + + .Toast-dismiss { + color: white; + } +} + +.Toast-bright-warning { + background-color: $yellow-500; + color: black; + + .Toast-octicon { + color: black; + } + + .Toast-dismiss { + color: black; + } +} + +.Toast-bright-success { + background-color: $green-500; + color: white; + + .Toast-octicon { + color: white; + } + + .Toast-dismiss { + color: white; + } +} From 4970315927454ff5316010c7b37c16e86fbd068f Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Tue, 18 Jun 2019 17:38:27 +0200 Subject: [PATCH 04/26] Add some more examples to compare --- pages/css/components/toasts.md | 41 +++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index ce744fb824..4b45fa089d 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -108,9 +108,18 @@ To create a default toast, use `.Toast` ``` -## Toast with action +## Toast with link ```html title="Toast with link" +
+ + + +
+
Submitting issue to github/github. Try again.
+
+ +
@@ -120,11 +129,29 @@ To create a default toast, use `.Toast`
+
+ + + +
+
Submitting issue to github/github. Try again.
+
+ +
+ ``` -## Toast with dismiss +## Toast with action ```html title="Toast with action" +
+ +
+ Submitting issue to github/github + +
+ +
@@ -133,12 +160,20 @@ To create a default toast, use `.Toast`
+
+ +
+ Submitting issue to github/github + +
+ +
``` ## Toast animating ```html title="Toast animating" -
+
From cb88870970e8b239d93b3833b76c98a8999786eb Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 21 Jun 2019 12:13:52 +0200 Subject: [PATCH 05/26] Add block style and more examples --- pages/css/components/toasts.md | 173 +++++++++++++++++++++++++++++---- src/toasts/toasts.scss | 81 ++++++++++++++- 2 files changed, 232 insertions(+), 22 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 4b45fa089d..b342b51a08 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -23,28 +23,24 @@ To create a default toast, use `.Toast` ```html title="Classic style"
Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github -
``` @@ -52,29 +48,28 @@ To create a default toast, use `.Toast` ```html title="Light style"
+ + + Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github -
``` @@ -83,31 +78,97 @@ To create a default toast, use `.Toast` ```html title="Bright style"
Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github -
Submitting issue to github/github +
+``` + +## Block style + +```html title="Block style" +
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+``` + +## Toast with dismiss + +```html title="Toast with dismiss" +
+ + + +
+
Submitting issue to github/github.
+
+ +
+
+ + + +
+
Submitting issue to github/github.
+
+
+ + + +
+
Submitting issue to github/github.
+
+ +
+
+ + + + Submitting issue to github/github. + +
+ ``` + ## Toast with link ```html title="Toast with link" @@ -118,7 +179,6 @@ To create a default toast, use `.Toast`
Submitting issue to github/github. Try again.
-
@@ -127,16 +187,20 @@ To create a default toast, use `.Toast`
Submitting issue to github/github. Try again.
-
-
Submitting issue to github/github. Try again.
+
Submitting issue to github/github. Try again.
- +
+
+ + + + Submitting issue to github/github. Try again.
``` @@ -144,11 +208,38 @@ To create a default toast, use `.Toast` ## Toast with action ```html title="Toast with action" +
+ + Submitting issue to github/github + +
+
+ + Submitting issue to github/github + +
+
+ + Submitting issue to github/github + +
+
+ + + + Submitting issue to github/github + +
+``` + +## Toast with action and dismiss + +```html title="Toast with action and dismiss"
Submitting issue to github/github - +
@@ -168,16 +259,60 @@ To create a default toast, use `.Toast`
+
+ + + +
+ Submitting issue to github/github + +
+ +
``` ## Toast animating ```html title="Toast animating" -
+
- Submitting issue to github/github - + Submitting issue to github/github +
+``` + +## Toast with long text + +```html title="Toast with long text" +
+ + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+ + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+ + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 84ea451a3c..f0c99d2e5e 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -8,10 +8,17 @@ margin: $spacer-3; border-radius: 3px; border: 1px solid $black-fade-15; - max-width: 400px; + max-width: 500px; min-width: 200px; - box-shadow: $box-shadow-large; + box-shadow: $box-shadow-medium; width: max-content; + transition: 0.2s ease; + + &:hover { + transform: scale(1.01); + transition: 0.2s ease; + box-shadow: $box-shadow-large; + } } .Toast-octicon { @@ -23,7 +30,7 @@ } .Toast-dismiss { - margin-left: $spacer-4; + margin-left: $spacer-3; color: $text-gray; &:hover { @@ -86,6 +93,14 @@ // 2. Light style +.Toast-light-default { + border-top: 4px solid $blue-500; + + .Toast-octicon { + color: $blue-500; + } +} + .Toast-light-error { border-top: 4px solid $red-500; @@ -164,3 +179,63 @@ color: white; } } + +// 4. Block style + +.Toast-block-default, +.Toast-block-error, +.Toast-block-warning, +.Toast-block-success { + padding: 0; + + .Toast-octicon { + color: white; + padding: $spacer-3; + margin-right: 0; + + svg { + width: 16px; + height: 16px; + } + } + + .Toast-content { + padding: $spacer-3; + } + + .Toast-dismiss { + padding: $spacer-3 $spacer-3 $spacer-3 0; + } + + .Toast-action { + margin: auto $spacer-3 auto $spacer-2; + } +} + +.Toast-block-default { + .Toast-octicon { + background-color: $blue-500; + } +} + +.Toast-block-error { + + .Toast-octicon { + background-color: $red-500; + } +} + +.Toast-block-warning { + + .Toast-octicon { + background-color: $yellow-600; + color: black; + } +} + +.Toast-block-success { + + .Toast-octicon { + background-color: $green-500; + } +} From 84f23409a34d3e5bd238bb960fa8fa19cb42b309 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 21 Jun 2019 12:36:19 +0200 Subject: [PATCH 06/26] Add responsiveness --- src/toasts/toasts.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index f0c99d2e5e..3f92aa8849 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -5,13 +5,10 @@ background-color: white; color: $black; padding: $spacer-3; - margin: $spacer-3; border-radius: 3px; border: 1px solid $black-fade-15; - max-width: 500px; - min-width: 200px; + margin: $spacer-2; box-shadow: $box-shadow-medium; - width: max-content; transition: 0.2s ease; &:hover { @@ -19,6 +16,12 @@ transition: 0.2s ease; box-shadow: $box-shadow-large; } + + @include breakpoint(sm) { + max-width: 500px; + width: max-content; + margin: $spacer-3; + } } .Toast-octicon { From be2e9ed4f3133e5a72379078fec4d39a2d9ad01f Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 21 Jun 2019 12:36:26 +0200 Subject: [PATCH 07/26] Adjust animation --- src/toasts/toasts.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 3f92aa8849..08bf25672a 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -50,16 +50,16 @@ bottom: -100px; left: 0; animation-name: toast; - animation-duration: 10s; + animation-duration: 6s; animation-delay: 1s; - animation-iteration-count: infinite; - animation-timing-function: ease; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } // Pop up animation @keyframes toast { 0% {bottom:-100px;} - 5% {bottom:0px;} + 10% {bottom:0px;} 90% {bottom:0px;} 100% {bottom:-100px;} } From 7b9f83bbb757acbf45bdd56fdec2ef1185de3eec Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 21 Jun 2019 16:00:36 +0200 Subject: [PATCH 08/26] Tweak spacing --- src/toasts/toasts.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 08bf25672a..91345b64ec 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -208,6 +208,7 @@ .Toast-dismiss { padding: $spacer-3 $spacer-3 $spacer-3 0; + margin: 0; } .Toast-action { From 138dce27f6794d1d3b58cb6904e31a3210dd8625 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Fri, 21 Jun 2019 16:06:32 +0200 Subject: [PATCH 09/26] Decrease max width --- src/toasts/toasts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 91345b64ec..14ff630a1a 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -18,7 +18,7 @@ } @include breakpoint(sm) { - max-width: 500px; + max-width: 450px; width: max-content; margin: $spacer-3; } From 5e7b7609b542b0436d2b799d62ac712b51398ed1 Mon Sep 17 00:00:00 2001 From: Emily Brick Date: Mon, 1 Jul 2019 11:46:16 -0400 Subject: [PATCH 10/26] remove extra toast styles --- pages/css/components/toasts.md | 223 +-------------------------------- src/toasts/toasts.scss | 132 +------------------ 2 files changed, 7 insertions(+), 348 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index b342b51a08..4156936269 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -11,95 +11,7 @@ bundle: toasts To create a default toast, use `.Toast` -```html title="Toast" -
- Submitting issue to github/github -
-``` - - -## Classic style - -```html title="Classic style" -
- Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-``` - -## Light style - -```html title="Light style" -
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-``` - -## Bright style - -```html title="Bright style" -
- Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-``` - -## Block style +## Default style ```html title="Block style"
@@ -131,33 +43,6 @@ To create a default toast, use `.Toast` ## Toast with dismiss ```html title="Toast with dismiss" -
- - - -
-
Submitting issue to github/github.
-
- -
-
- - - -
-
Submitting issue to github/github.
-
- -
-
- - - -
-
Submitting issue to github/github.
-
- -
@@ -172,30 +57,6 @@ To create a default toast, use `.Toast` ## Toast with link ```html title="Toast with link" -
- - - -
-
Submitting issue to github/github. Try again.
-
-
-
- - - -
-
Submitting issue to github/github. Try again.
-
-
-
- - - -
-
Submitting issue to github/github. Try again.
-
-
@@ -205,68 +66,14 @@ To create a default toast, use `.Toast` ``` -## Toast with action - -```html title="Toast with action" -
- - Submitting issue to github/github - -
-
- - Submitting issue to github/github - -
-
- - Submitting issue to github/github - -
-
- - - - Submitting issue to github/github - -
-``` - -## Toast with action and dismiss +## Toast with link and dismiss ```html title="Toast with action and dismiss" -
- -
- Submitting issue to github/github - -
- -
-
- -
- Submitting issue to github/github - -
- -
-
- -
- Submitting issue to github/github - -
- -
-
- Submitting issue to github/github - -
+ Submitting issue to github/github. Try again.
``` @@ -285,30 +92,6 @@ To create a default toast, use `.Toast` ## Toast with long text ```html title="Toast with long text" -
- - - -
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
- - - -
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
- - - -
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 14ff630a1a..72cdb6fc4b 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -11,12 +11,6 @@ box-shadow: $box-shadow-medium; transition: 0.2s ease; - &:hover { - transform: scale(1.01); - transition: 0.2s ease; - box-shadow: $box-shadow-large; - } - @include breakpoint(sm) { max-width: 450px; width: max-content; @@ -64,125 +58,6 @@ 100% {bottom:-100px;} } - - - -// Style options -// ----- - -// 1. Classic GitHub style - -.Toast-classic-default { - background-color: $blue-100; - color: $blue-900; -} - -.Toast-classic-error { - background-color: $red-100; - color: $red-900; -} - -.Toast-classic-warning { - background-color: $yellow-100; - color: $yellow-900; -} - -.Toast-classic-success { - background-color: $green-100; - color: $green-900; -} - - - -// 2. Light style - -.Toast-light-default { - border-top: 4px solid $blue-500; - - .Toast-octicon { - color: $blue-500; - } -} - -.Toast-light-error { - border-top: 4px solid $red-500; - - .Toast-octicon { - color: $red-500; - } -} - -.Toast-light-warning { - border-top: 4px solid $yellow-600; - - .Toast-octicon { - color: $yellow-800; - } -} - -.Toast-light-success { - border-top: 4px solid $green-500; - - .Toast-octicon { - color: $green-500; - } -} - -// 3. Bright style - -.Toast-bright-default { - background-color: $blue-500; - color: white; - - .Toast-octicon { - color: white; - } - - .Toast-dismiss { - color: white; - } -} - - -.Toast-bright-error { - background-color: $red-500; - color: white; - - .Toast-octicon { - color: white; - } - - .Toast-dismiss { - color: white; - } -} - -.Toast-bright-warning { - background-color: $yellow-500; - color: black; - - .Toast-octicon { - color: black; - } - - .Toast-dismiss { - color: black; - } -} - -.Toast-bright-success { - background-color: $green-500; - color: white; - - .Toast-octicon { - color: white; - } - - .Toast-dismiss { - color: white; - } -} - // 4. Block style .Toast-block-default, @@ -195,10 +70,11 @@ color: white; padding: $spacer-3; margin-right: 0; + fill: white; svg { - width: 16px; - height: 16px; + width: 18px; + height: 18px; } } @@ -233,7 +109,7 @@ .Toast-octicon { background-color: $yellow-600; - color: black; + fill: $gray-900; } } From 331a96f7b6e329640d0c318674b0fa48b3139c4d Mon Sep 17 00:00:00 2001 From: Emily Brick Date: Tue, 2 Jul 2019 10:39:48 -0400 Subject: [PATCH 11/26] changed border to inset box shadow and fixed vertical alignment --- pages/css/components/toasts.md | 128 +++++++++++++++++++-------------- src/toasts/toasts.scss | 47 +++++------- 2 files changed, 94 insertions(+), 81 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 4156936269..8ffbb06246 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -14,88 +14,112 @@ To create a default toast, use `.Toast` ## Default style ```html title="Block style" -
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
``` ## Toast with dismiss ```html title="Toast with dismiss" -
- - - - Submitting issue to github/github. - +
+
+ + + + Submitting issue to github/github. + +
- ``` ## Toast with link ```html title="Toast with link" -
- - - - Submitting issue to github/github. Try again. +
+
+ + + + Submitting issue to github/github. Try again. +
- ``` ## Toast with link and dismiss ```html title="Toast with action and dismiss" -
- - - - Submitting issue to github/github. Try again. - +
+
+ + + + Submitting issue to github/github. Try again. + +
``` ## Toast animating ```html title="Toast animating" -
- - - - Submitting issue to github/github +
+
+ + + + Submitting issue to github/github +
``` ## Toast with long text ```html title="Toast with long text" -
- - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+``` + +## Toast with long text and a dismiss + +```html title="Toast with long text" +
+
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + +
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 72cdb6fc4b..cf5f44a1df 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -1,14 +1,18 @@ // Toast +// just for the documentation, remove before shipping +.Toast-wrapper { + padding: 30px; +} + .Toast { display: flex; background-color: white; color: $black; padding: $spacer-3; - border-radius: 3px; - border: 1px solid $black-fade-15; + border-radius: $border-radius; + box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; margin: $spacer-2; - box-shadow: $box-shadow-medium; transition: 0.2s ease; @include breakpoint(sm) { @@ -20,20 +24,8 @@ .Toast-octicon { margin-right: $spacer-2; -} - -.Toast-action { - margin-top: $spacer-2; -} - -.Toast-dismiss { - margin-left: $spacer-3; - color: $text-gray; - - &:hover { - cursor: pointer; - color: $text-gray-dark; - } + display: flex; + align-items: center; } @@ -58,8 +50,6 @@ 100% {bottom:-100px;} } -// 4. Block style - .Toast-block-default, .Toast-block-error, .Toast-block-warning, @@ -71,11 +61,8 @@ padding: $spacer-3; margin-right: 0; fill: white; - - svg { - width: 18px; - height: 18px; - } + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; } .Toast-content { @@ -83,16 +70,18 @@ } .Toast-dismiss { - padding: $spacer-3 $spacer-3 $spacer-3 0; - margin: 0; - } + padding: $spacer-3; + align-self: center; - .Toast-action { - margin: auto $spacer-3 auto $spacer-2; + &:hover { + cursor: pointer; + fill: $text-gray; + } } } .Toast-block-default { + .Toast-octicon { background-color: $blue-500; } From fd5b2e418a4bd8c82924b77d011b14b0d1002bcd Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 16:58:43 +0900 Subject: [PATCH 12/26] Remove wrapper I think this is not needed anymore since the examples have a wrapper with `p-3`. --- src/toasts/toasts.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index cf5f44a1df..2224e610c4 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -1,10 +1,5 @@ // Toast -// just for the documentation, remove before shipping -.Toast-wrapper { - padding: 30px; -} - .Toast { display: flex; background-color: white; From 88221231c744b53c55cae6b10e767345de634b35 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 20:07:54 +0900 Subject: [PATCH 13/26] Rename Toast-octicon to Toast-icon --- pages/css/components/toasts.md | 20 ++++++++++---------- src/toasts/toasts.scss | 12 ++++++------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 8ffbb06246..226213c15b 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -16,25 +16,25 @@ To create a default toast, use `.Toast` ```html title="Block style"
- + Submitting issue to github/github
- + Submitting issue to github/github
- + Submitting issue to github/github
- + Submitting issue to github/github @@ -47,7 +47,7 @@ To create a default toast, use `.Toast` ```html title="Toast with dismiss"
- + Submitting issue to github/github. @@ -62,7 +62,7 @@ To create a default toast, use `.Toast` ```html title="Toast with link"
- + Submitting issue to github/github. Try again. @@ -75,7 +75,7 @@ To create a default toast, use `.Toast` ```html title="Toast with action and dismiss"
- + Submitting issue to github/github. Try again. @@ -89,7 +89,7 @@ To create a default toast, use `.Toast` ```html title="Toast animating"
- + Submitting issue to github/github @@ -102,7 +102,7 @@ To create a default toast, use `.Toast` ```html title="Toast with long text"
- + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -115,7 +115,7 @@ To create a default toast, use `.Toast` ```html title="Toast with long text"
- + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 2224e610c4..4b4049d092 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -17,7 +17,7 @@ } } -.Toast-octicon { +.Toast-icon { margin-right: $spacer-2; display: flex; align-items: center; @@ -51,7 +51,7 @@ .Toast-block-success { padding: 0; - .Toast-octicon { + .Toast-icon { color: white; padding: $spacer-3; margin-right: 0; @@ -77,21 +77,21 @@ .Toast-block-default { - .Toast-octicon { + .Toast-icon { background-color: $blue-500; } } .Toast-block-error { - .Toast-octicon { + .Toast-icon { background-color: $red-500; } } .Toast-block-warning { - .Toast-octicon { + .Toast-icon { background-color: $yellow-600; fill: $gray-900; } @@ -99,7 +99,7 @@ .Toast-block-success { - .Toast-octicon { + .Toast-icon { background-color: $green-500; } } From 2a50f41aaebe9beb45c224a443ca618223d9f098 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 20:34:27 +0900 Subject: [PATCH 14/26] Remove nesting of child elements --- src/toasts/toasts.scss | 52 ++++++++++++++++-------------------------- 1 file changed, 20 insertions(+), 32 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 4b4049d092..129ff00f7a 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -4,7 +4,6 @@ display: flex; background-color: white; color: $black; - padding: $spacer-3; border-radius: $border-radius; box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; margin: $spacer-2; @@ -18,11 +17,30 @@ } .Toast-icon { - margin-right: $spacer-2; display: flex; align-items: center; + justify-content: center; + width: $spacer-3 * 3; + flex-shrink: 0; + color: white; + fill: white; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; } +.Toast-content { + padding: $spacer-3; +} + +.Toast-dismiss { + padding: $spacer-3; + align-self: center; + + &:hover { + cursor: pointer; + fill: $text-gray; + } +} // Temporarily splitting this out // to play with static styles. @@ -45,36 +63,6 @@ 100% {bottom:-100px;} } -.Toast-block-default, -.Toast-block-error, -.Toast-block-warning, -.Toast-block-success { - padding: 0; - - .Toast-icon { - color: white; - padding: $spacer-3; - margin-right: 0; - fill: white; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - } - - .Toast-content { - padding: $spacer-3; - } - - .Toast-dismiss { - padding: $spacer-3; - align-self: center; - - &:hover { - cursor: pointer; - fill: $text-gray; - } - } -} - .Toast-block-default { .Toast-icon { From d02a459cd67a37562c4b696e802eb9f09ff02f67 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 21:45:31 +0900 Subject: [PATCH 15/26] Switch to a button --- pages/css/components/toasts.md | 6 +++--- src/toasts/toasts.scss | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 226213c15b..882db66e7c 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -51,7 +51,7 @@ To create a default toast, use `.Toast` Submitting issue to github/github. - +
``` @@ -79,7 +79,7 @@ To create a default toast, use `.Toast` Submitting issue to github/github. Try again. - +
``` @@ -119,7 +119,7 @@ To create a default toast, use `.Toast` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - +
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 129ff00f7a..62b65a9baa 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -32,9 +32,11 @@ padding: $spacer-3; } -.Toast-dismiss { +.Toast-dismissButton { padding: $spacer-3; - align-self: center; + max-height: 54px; // keeps button aligned to the top + border: 0; + background-color: transparent; &:hover { cursor: pointer; From f2020fd1ec650dc01a55d4243b894f7785d9b267 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 21:57:21 +0900 Subject: [PATCH 16/26] Change modifier class names --- pages/css/components/toasts.md | 20 ++++++++++---------- src/toasts/toasts.scss | 31 +++++++++---------------------- 2 files changed, 19 insertions(+), 32 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 882db66e7c..123dd8a0d8 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -15,25 +15,25 @@ To create a default toast, use `.Toast` ```html title="Block style"
-
+
Submitting issue to github/github
-
+
Submitting issue to github/github
-
+
Submitting issue to github/github
-
+
@@ -46,7 +46,7 @@ To create a default toast, use `.Toast` ```html title="Toast with dismiss"
-
+
@@ -61,7 +61,7 @@ To create a default toast, use `.Toast` ```html title="Toast with link"
-
+
@@ -74,7 +74,7 @@ To create a default toast, use `.Toast` ```html title="Toast with action and dismiss"
-
+
@@ -88,7 +88,7 @@ To create a default toast, use `.Toast` ```html title="Toast animating"
-
+
@@ -101,7 +101,7 @@ To create a default toast, use `.Toast` ```html title="Toast with long text"
-
+
@@ -114,7 +114,7 @@ To create a default toast, use `.Toast` ```html title="Toast with long text"
-
+
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 62b65a9baa..2b82965dc6 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -24,6 +24,7 @@ flex-shrink: 0; color: white; fill: white; + background-color: $blue-500; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } @@ -65,31 +66,17 @@ 100% {bottom:-100px;} } -.Toast-block-default { +// Modifier - .Toast-icon { - background-color: $blue-500; - } +.Toast--error .Toast-icon { + background-color: $red-500; } -.Toast-block-error { - - .Toast-icon { - background-color: $red-500; - } +.Toast--warning .Toast-icon { + background-color: $yellow-600; + fill: $gray-900; } -.Toast-block-warning { - - .Toast-icon { - background-color: $yellow-600; - fill: $gray-900; - } -} - -.Toast-block-success { - - .Toast-icon { - background-color: $green-500; - } +.Toast--success .Toast-icon { + background-color: $green-500; } From e04789e748cd52fff88e52012660e7bedba75d8f Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 23:05:49 +0900 Subject: [PATCH 17/26] Split animation --- pages/css/components/toasts.md | 2 +- src/toasts/toasts.scss | 47 ++++++++++++++++++---------------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 123dd8a0d8..71e5c2e97c 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -88,7 +88,7 @@ To create a default toast, use `.Toast` ```html title="Toast animating"
-
+
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 2b82965dc6..975b8fa49a 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -7,7 +7,6 @@ border-radius: $border-radius; box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; margin: $spacer-2; - transition: 0.2s ease; @include breakpoint(sm) { max-width: 450px; @@ -45,27 +44,6 @@ } } -// Temporarily splitting this out -// to play with static styles. -.Toast-animated { - position: fixed; - bottom: -100px; - left: 0; - animation-name: toast; - animation-duration: 6s; - animation-delay: 1s; - animation-iteration-count: 1; - animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -} - -// Pop up animation -@keyframes toast { - 0% {bottom:-100px;} - 10% {bottom:0px;} - 90% {bottom:0px;} - 100% {bottom:-100px;} -} - // Modifier .Toast--error .Toast-icon { @@ -80,3 +58,28 @@ .Toast--success .Toast-icon { background-color: $green-500; } + +// Animations + +.Toast--animateIn { + animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; +} + +@keyframes Toast--animateIn { + 0% { + opacity: 0; + transform: translateY(100%); + } +} + +.Toast--animateOut { + animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; +} + +@keyframes Toast--animateOut { + 100% { + opacity: 0; + transform: translateY(100%); + pointer-events: none; + } +} From bb882aa25d68364248adc40949465fffe44dcd79 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 23:12:43 +0900 Subject: [PATCH 18/26] Tweak button states --- src/toasts/toasts.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 975b8fa49a..4d030269b5 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -38,9 +38,14 @@ border: 0; background-color: transparent; + &:focus, &:hover { - cursor: pointer; fill: $text-gray; + outline: none; + } + + &:active { + fill: $gray-400; } } From 9160ce6bb39f61b042d8f3a43b27d346f483d2cf Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 3 Jul 2019 23:19:27 +0900 Subject: [PATCH 19/26] Fix linter --- src/toasts/toasts.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 4d030269b5..8a95d12da1 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -2,15 +2,15 @@ .Toast { display: flex; - background-color: white; + margin: $spacer-2; color: $black; + background-color: $bg-white; border-radius: $border-radius; box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; - margin: $spacer-2; @include breakpoint(sm) { - max-width: 450px; width: max-content; + max-width: 450px; margin: $spacer-3; } } @@ -21,8 +21,8 @@ justify-content: center; width: $spacer-3 * 3; flex-shrink: 0; - color: white; - fill: white; + color: $text-white; + fill: $text-white; background-color: $blue-500; border-top-left-radius: inherit; border-bottom-left-radius: inherit; @@ -33,10 +33,10 @@ } .Toast-dismissButton { - padding: $spacer-3; max-height: 54px; // keeps button aligned to the top - border: 0; + padding: $spacer-3; background-color: transparent; + border: 0; &:focus, &:hover { @@ -56,8 +56,8 @@ } .Toast--warning .Toast-icon { - background-color: $yellow-600; fill: $gray-900; + background-color: $yellow-600; } .Toast--success .Toast-icon { @@ -83,8 +83,8 @@ @keyframes Toast--animateOut { 100% { + pointer-events: none; opacity: 0; transform: translateY(100%); - pointer-events: none; } } From 2074596f116be197100d417dc8c2d1273855ff46 Mon Sep 17 00:00:00 2001 From: Amanda Pinsker Date: Mon, 15 Jul 2019 15:41:30 -0700 Subject: [PATCH 20/26] Clean up documentation --- pages/css/components/toasts.md | 145 ++++++++++++++++----------------- 1 file changed, 68 insertions(+), 77 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 71e5c2e97c..fc67375fc3 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -7,119 +7,110 @@ source: '' bundle: toasts --- -# Toasts +Toasts are used to show live, time-sensitive feedback to users. -To create a default toast, use `.Toast` -## Default style +## Default -```html title="Block style" -
+To create a default toast, use `.Toast`. Always use the `info` icon for default messages. + +```erb title="Default toast"
- - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - - - Submitting issue to github/github -
-
- - + <%= octicon "info" %> - Submitting issue to github/github + Toast message goes here
-
``` -## Toast with dismiss +The Toast content is formattable. We recommend keeping your message under 140 characters. -```html title="Toast with dismiss" -
-
+```erb title="Toast with long text" +
- + <%= octicon "info" %> - Submitting issue to github/github. - + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma
-
``` +## Variations -## Toast with link +Use the success, warning, and error modifiers to communicate different states. -```html title="Toast with link" -
-
- - - - Submitting issue to github/github. Try again. -
+Always use the `check` octicon for success states. + +``` erb title="Success toast" +
+ + <%= octicon "check" %> + + Success message goes here.
``` -## Toast with link and dismiss +Always use the `alert` octicon for warning states. -```html title="Toast with action and dismiss" -
-
- - - - Submitting issue to github/github. Try again. - -
+``` erb title="Warning toast" +
+ + <%= octicon "alert" %> + + Warning message goes here.
``` -## Toast animating +Always use the `stop` octicon for error states. -```html title="Toast animating" -
-
- - - - Submitting issue to github/github -
+```erb title="Error toast" +
+ + <%= octicon "stop" %> + + Error message goes here
``` -## Toast with long text +## Toast with dismiss -```html title="Toast with long text" -
-
- - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
+Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. + +```erb title="Toast with dismiss" +
+ + <%= octicon "info" %> + + This toast is dismissable. +
``` -## Toast with long text and a dismiss +## Toast with link -```html title="Toast with long text" +Include a link to allow users to take actions within a Toast. + +```erb title="Toast with link"
-
+
- + <%= octicon "info" %> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + Toast message goes here Action.
``` + +## Toast animation + +The toast will animate in and out from the bottom left of the viewport. + +```erb title="Toast animating" +
+ + <%= octicon "info" %> + + Toast message goes here. +
+``` From 0ebf31d88a63dccba740e6bfd4fc0d216aa771f3 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 16 Jul 2019 01:36:05 -0500 Subject: [PATCH 21/26] Use color instead of fill Co-Authored-By: Shawn Allen --- src/toasts/toasts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index 8a95d12da1..d5cb986462 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -56,7 +56,7 @@ } .Toast--warning .Toast-icon { - fill: $gray-900; + color: $gray-900; background-color: $yellow-600; } From 7ad58029b21f5efa6e8fa9ffcd7075c2074bd0af Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 16 Jul 2019 15:54:30 +0900 Subject: [PATCH 22/26] Remove rest of the fills `style="fill:currentcolor"` can be used for inline ``s --- pages/css/components/toasts.md | 2 +- src/toasts/toasts.scss | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index fc67375fc3..35b285211f 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -82,7 +82,7 @@ Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. This toast is dismissable.
``` diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index d5cb986462..081578b311 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -22,7 +22,6 @@ width: $spacer-3 * 3; flex-shrink: 0; color: $text-white; - fill: $text-white; background-color: $blue-500; border-top-left-radius: inherit; border-bottom-left-radius: inherit; @@ -40,12 +39,12 @@ &:focus, &:hover { - fill: $text-gray; + color: $text-gray; outline: none; } &:active { - fill: $gray-400; + color: $gray-400; } } From 8c2d441cdf6e6877c75fe11abdfe8570d30a8ea7 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 17 Jul 2019 10:00:00 +0900 Subject: [PATCH 23/26] Use inline svgs for the icons --- pages/css/components/toasts.md | 40 ++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 35b285211f..e9c36fe80e 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -14,10 +14,11 @@ 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. -```erb title="Default toast" +```html title="Default toast"
- <%= octicon "info" %> + + Toast message goes here
@@ -25,10 +26,11 @@ 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. -```erb title="Toast with long text" +```html title="Toast with long text"
- <%= octicon "info" %> + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma
@@ -40,10 +42,11 @@ Use the success, warning, and error modifiers to communicate different states. Always use the `check` octicon for success states. -``` erb title="Success toast" +```html title="Success toast"
- <%= octicon "check" %> + + Success message goes here.
@@ -51,10 +54,11 @@ Always use the `check` octicon for success states. Always use the `alert` octicon for warning states. -``` erb title="Warning toast" +```html title="Warning toast"
- <%= octicon "alert" %> + + Warning message goes here.
@@ -62,10 +66,11 @@ Always use the `alert` octicon for warning states. Always use the `stop` octicon for error states. -```erb title="Error toast" +```html title="Error toast"
- <%= octicon "stop" %> + + Error message goes here
@@ -75,10 +80,11 @@ Always use the `stop` octicon for error states. Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. -```erb title="Toast with dismiss" +```html title="Toast with dismiss"
- <%= octicon "info" %> + + This toast is dismissable. +
+
+ + + + + This toast is dismissable. + +
``` @@ -98,7 +110,7 @@ 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 title="Toast with link" -
+
@@ -114,11 +126,13 @@ Include a link to allow users to take actions within a Toast. The toast will animate in and out from the bottom left of the viewport. ```html title="Toast animating" -
- - - - - Toast message goes here. +
+
+ + + + + Toast message goes here. +
``` From e7bf2f9122814152be787288163ec1dcb89ba754 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 17 Jul 2019 10:48:23 +0900 Subject: [PATCH 25/26] Mention both animation modifiers --- pages/css/components/toasts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index b8933bae54..42273595a6 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -123,7 +123,7 @@ Include a link to allow users to take actions within a Toast. ## Toast animation -The toast will animate in and out from the bottom left of the viewport. +The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom. ```html title="Toast animating"
From bd43628c7fd7a44db04dffdedb648799afbc8e2b Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 17 Jul 2019 10:58:21 +0900 Subject: [PATCH 26/26] Document positioning of a Toast --- pages/css/components/toasts.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/pages/css/components/toasts.md b/pages/css/components/toasts.md index 42273595a6..f597fb9afc 100644 --- a/pages/css/components/toasts.md +++ b/pages/css/components/toasts.md @@ -136,3 +136,21 @@ The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to a
``` + +## Toast position + +Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport. + +```html title="Toast animating" +
+
+
+ + + + + Toast message goes here. +
+
+
+```