Skip to content

Toast component #831

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

Merged
merged 28 commits into from
Jul 17, 2019
Merged

Toast component #831

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8797e0e
Create toast module, begin styling work
ampinsk Jun 18, 2019
bcd08ec
Add icons and organize examples
ampinsk Jun 18, 2019
8309f72
Add bright style to compare
ampinsk Jun 18, 2019
4970315
Add some more examples to compare
ampinsk Jun 18, 2019
cb88870
Add block style and more examples
ampinsk Jun 21, 2019
84f2340
Add responsiveness
ampinsk Jun 21, 2019
be2e9ed
Adjust animation
ampinsk Jun 21, 2019
7b9f83b
Tweak spacing
ampinsk Jun 21, 2019
138dce2
Decrease max width
ampinsk Jun 21, 2019
5e7b760
remove extra toast styles
emilybrick Jul 1, 2019
331a96f
changed border to inset box shadow and fixed vertical alignment
emilybrick Jul 2, 2019
fd5b2e4
Remove wrapper
simurai Jul 3, 2019
8822123
Rename Toast-octicon to Toast-icon
simurai Jul 3, 2019
2a50f41
Remove nesting of child elements
simurai Jul 3, 2019
d02a459
Switch to a button
simurai Jul 3, 2019
f2020fd
Change modifier class names
simurai Jul 3, 2019
e04789e
Split animation
simurai Jul 3, 2019
bb882aa
Tweak button states
simurai Jul 3, 2019
9160ce6
Fix linter
simurai Jul 3, 2019
2074596
Clean up documentation
ampinsk Jul 15, 2019
0ebf31d
Use color instead of fill
simurai Jul 16, 2019
7ad5802
Remove rest of the fills
simurai Jul 16, 2019
8c2d441
Use inline svgs for the icons
simurai Jul 17, 2019
04a14d8
Add wrapper div with padding
simurai Jul 17, 2019
e7bf2f9
Mention both animation modifiers
simurai Jul 17, 2019
bd43628
Document positioning of a Toast
simurai Jul 17, 2019
56b3dae
Merge pull request #834 from primer/toasts-v2.1
simurai Jul 17, 2019
4064696
Merge branch 'master' into toasts-v2
simurai Jul 17, 2019
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
Prev Previous commit
Next Next commit
changed border to inset box shadow and fixed vertical alignment
  • Loading branch information
@emilybrick
emilybrick committed Jul 2, 2019
commit 331a96f7b6e329640d0c318674b0fa48b3139c4d
128 changes: 76 additions & 52 deletions pages/css/components/toasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,88 +14,112 @@ To create a default toast, use `.Toast`
## Default style

```html title="Block style"
<div class="Toast Toast-block-default">
<span class="Toast-octicon">
<svg class="octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-warning">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-success">
<span class="Toast-octicon">
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-stop" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
<div class="p-3">
<div class="Toast Toast-block-default">
<span class="Toast-octicon">
<svg class="octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-warning">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-success">
<span class="Toast-octicon">
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-stop" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
</div>
```

## Toast with dismiss

```html title="Toast with dismiss"
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github.</strong></span>
<a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
<div class="p-3">
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github.</strong></span>
<a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
</div>
</div>

```


## Toast with link

```html title="Toast with link"
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github.</strong><a class=""> Try again.</a></span>
<div class="p-3">
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github. </strong><a href="#">Try again.</a></span>
</div>
</div>

```

## Toast with link and dismiss

```html title="Toast with action and dismiss"
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github.</strong><a class=""> Try again.</a></span>
<a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
<div class="p-3">
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github. </strong><a href="#">Try again.</a></span>
<a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
</div>
</div>
```

## Toast animating

```html title="Toast animating"
<div class="Toast Toast-animated Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
<div class="p-3">
<div class="Toast Toast-animated Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
</div>
</div>
```

## Toast with long text

```html title="Toast with long text"
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></span>
<div class="p-3">
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></span>
</div>
</div>
```

## Toast with long text and a dismiss

```html title="Toast with long text"
<div class="p-3">
<div class="Toast Toast-block-error">
<span class="Toast-octicon">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
</span>
<span class="Toast-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></span>
<a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
</div>
</div>
```
47 changes: 18 additions & 29 deletions src/toasts/toasts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
}


Expand All @@ -58,8 +50,6 @@
100% {bottom:-100px;}
}

// 4. Block style

.Toast-block-default,
.Toast-block-error,
.Toast-block-warning,
Expand All @@ -71,28 +61,27 @@
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 {
padding: $spacer-3;
}

.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;
}
Expand Down