Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI Framework][K7] Clean up toasts #13502

Merged
merged 6 commits into from
Aug 14, 2017
Merged

[UI Framework][K7] Clean up toasts #13502

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c082784
make toasts prettier, add better documentation on usage
snide Aug 11, 2017
c45869b
make toasts work responsively, clean up animation and documentation
snide Aug 11, 2017
30d9983
remove flex sizing on kui guide wrapper so responsive checks work
snide Aug 11, 2017
42a3dbd
address feedback
snide Aug 14, 2017
da49181
update dark theme css with toast stuff
snide Aug 14, 2017
a28101c
fix opacity bug in toasts
snide Aug 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 45 additions & 20 deletions ui_framework/dist/ui_framework_theme_dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2039,6 +2039,8 @@ table {

/**
* 1. Allow list to expand as items are added, but cap it at the screen height.
* 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
* 3. Allow some padding if a scroll shows up.
*/
.kuiGlobalToastList {
display: -webkit-box;
Expand All @@ -2058,9 +2060,9 @@ table {
z-index: 5000;
bottom: 0;
right: 0;
width: 320px;
overflow-x: hidden;
overflow-y: scroll;
width: 336px;
/* 3 */
padding-right: 16px;
max-height: 100vh;
/* 1 */ }
.kuiGlobalToastList::-webkit-scrollbar {
Expand All @@ -2072,11 +2074,15 @@ table {
background-clip: content-box; }
.kuiGlobalToastList::-webkit-scrollbar-track {
background-color: transparent; }
.kuiGlobalToastList:hover {
overflow-y: auto;
/* 2 */ }

.kuiGlobalToastListItem {
margin-bottom: 12px;
-webkit-animation: 0.5s kuiShowToast;
animation: 0.5s kuiShowToast;
margin-bottom: 16px;
margin-right: 16px;
-webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
opacity: 1;
/**
* 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
Expand All @@ -2091,43 +2097,59 @@ table {

@-webkit-keyframes kuiShowToast {
from {
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0; }
to {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }

@keyframes kuiShowToast {
from {
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0; }
to {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }

@media only screen and (max-width: 768px) {
/**
* 1. Mobile we make these 100%. Matching change happens on the item as well.
*/
.kuiGlobalToastList {
left: 0;
padding-left: 16px;
width: 100%;
/* 1 */ } }

.kuiToast {
box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
position: relative;
padding: 12px;
padding: 16px;
background-color: #222;
border: 1px solid #444; }
border: 1px solid #444;
width: 100%; }
.kuiToast:hover .kuiToast__closeButton,
.kuiToast:focus .kuiToast__closeButton {
opacity: 1; }

/**
* 1. Fit button to icon.
*/
.kuiToast__closeButton {
position: absolute;
top: 4px;
right: 4px;
top: 16px;
right: 16px;
line-height: 0;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
appearance: none;
opacity: 0;
transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
.kuiToast__closeButton svg {
fill: #4d4d4d; }
.kuiToast__closeButton:hover svg {
Expand All @@ -2152,11 +2174,14 @@ table {
/**
* 1. Align icon with first line of title text if it wraps.
* 2. Apply margin to all but last item in the flex.
* 3. Account for close button.
*/
.kuiToastHeader {
font-size: 16px;
font-size: 1rem;
line-height: 24px;
padding-right: 24px;
/* 3 */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -2188,7 +2213,7 @@ table {
font-weight: 300; }

.kuiToastHeader--withBody {
margin-bottom: 9px; }
margin-bottom: 12px; }

.kuiTitle {
font-size: 24px;
Expand Down
65 changes: 45 additions & 20 deletions ui_framework/dist/ui_framework_theme_light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2039,6 +2039,8 @@ table {

/**
* 1. Allow list to expand as items are added, but cap it at the screen height.
* 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
* 3. Allow some padding if a scroll shows up.
*/
.kuiGlobalToastList {
display: -webkit-box;
Expand All @@ -2058,9 +2060,9 @@ table {
z-index: 5000;
bottom: 0;
right: 0;
width: 320px;
overflow-x: hidden;
overflow-y: scroll;
width: 336px;
/* 3 */
padding-right: 16px;
max-height: 100vh;
/* 1 */ }
.kuiGlobalToastList::-webkit-scrollbar {
Expand All @@ -2072,11 +2074,15 @@ table {
background-clip: content-box; }
.kuiGlobalToastList::-webkit-scrollbar-track {
background-color: transparent; }
.kuiGlobalToastList:hover {
overflow-y: auto;
/* 2 */ }

.kuiGlobalToastListItem {
margin-bottom: 12px;
-webkit-animation: 0.5s kuiShowToast;
animation: 0.5s kuiShowToast;
margin-bottom: 16px;
margin-right: 16px;
-webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
opacity: 1;
/**
* 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
Expand All @@ -2091,43 +2097,59 @@ table {

@-webkit-keyframes kuiShowToast {
from {
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0; }
to {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }

@keyframes kuiShowToast {
from {
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transform: translateY(24px) scale(0.9);
transform: translateY(24px) scale(0.9);
opacity: 0; }
to {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; } }

@media only screen and (max-width: 768px) {
/**
* 1. Mobile we make these 100%. Matching change happens on the item as well.
*/
.kuiGlobalToastList {
left: 0;
padding-left: 16px;
width: 100%;
/* 1 */ } }

.kuiToast {
box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
position: relative;
padding: 12px;
padding: 16px;
background-color: #FFF;
border: 1px solid #D9D9D9; }
border: 1px solid #D9D9D9;
width: 100%; }
.kuiToast:hover .kuiToast__closeButton,
.kuiToast:focus .kuiToast__closeButton {
opacity: 1; }

/**
* 1. Fit button to icon.
*/
.kuiToast__closeButton {
position: absolute;
top: 4px;
right: 4px;
top: 16px;
right: 16px;
line-height: 0;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
appearance: none;
opacity: 0;
transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
.kuiToast__closeButton svg {
fill: gray; }
.kuiToast__closeButton:hover svg {
Expand All @@ -2152,11 +2174,14 @@ table {
/**
* 1. Align icon with first line of title text if it wraps.
* 2. Apply margin to all but last item in the flex.
* 3. Account for close button.
*/
.kuiToastHeader {
font-size: 16px;
font-size: 1rem;
line-height: 24px;
padding-right: 24px;
/* 3 */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -2188,7 +2213,7 @@ table {
font-weight: 300; }

.kuiToastHeader--withBody {
margin-bottom: 9px; }
margin-bottom: 12px; }

.kuiTitle {
font-size: 24px;
Expand Down
5 changes: 0 additions & 5 deletions ui_framework/doc_site/src/components/guide/_guide.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@
height: 100%;
}

/**
* 1. Expand container to fit the page if the content is shorter than the page, or expand with the
* content if it's taller than the page.
*/
.guide {
display: flex;
min-height: 100%; /* 1 */
}

Expand Down
6 changes: 2 additions & 4 deletions ui_framework/doc_site/src/views/toast/danger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ import {

export default () => (
<KuiToast
title="Check it out, here's a really long title that will wrap within a narrower browser"
title="Save failed"
type="danger"
iconType="user"
>
<KuiText size="small" verticalRhythm>
<p>
Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
Check your form for validation errors.
</p>
</KuiText>

Expand Down
22 changes: 3 additions & 19 deletions ui_framework/doc_site/src/views/toast/default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,22 @@
import React from 'react';

import {
KuiLink,
KuiText,
KuiToast,
} from '../../../../components';

export default () => (
<div>
<KuiToast
title="Check it out, here's a really long title that will wrap within a narrower browser"
iconType="user"
title="Example of a good toast"
onClose={() => window.alert('Dismiss toast')}
>
<KuiText size="small" verticalRhythm>
<p>
Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
</p>
</KuiText>

<KuiText size="small">
<p>
And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
A good toast message is short and to the point. It should very rarely include multiple
paragraphs.
</p>
</KuiText>
</KuiToast>

<br />

<KuiToast
title="Check it out, here's a really long title that will wrap within a narrower browser"
iconType="user"
onClose={() => window.alert('Dismiss toast')}
/>
</div>
);
16 changes: 5 additions & 11 deletions ui_framework/doc_site/src/views/toast/info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
import React from 'react';

import {
KuiLink,
KuiText,
KuiToast,
} from '../../../../components';

export default () => (
<KuiToast
title="Check it out, here's a really long title that will wrap within a narrower browser"
title="Icons should be rare"
type="info"
iconType="discoverApp"
iconType="user"
onClose={() => window.alert('Dismiss toast')}
>
<KuiText size="small" verticalRhythm>
<p>
Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
</p>
</KuiText>

<KuiText size="small">
<p>
And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
Icons should be used rarely. They're good for warnings, but when paired with
long titles they look out of place.
</p>
</KuiText>

</KuiToast>
);
Loading