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

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
Add some more examples to compare
  • Loading branch information
@ampinsk
ampinsk committed Jun 18, 2019
commit 4970315927454ff5316010c7b37c16e86fbd068f
41 changes: 38 additions & 3 deletions pages/css/components/toasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,18 @@ To create a default toast, use `.Toast`
</div>
```

## Toast with action
## Toast with link

```html title="Toast with link"
<div class="Toast Toast-classic-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>
<div>
<div class="">Submitting issue to <strong>github/github.</strong> <a class="">Try again.</a></div>
</div>
<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 class="Toast Toast-light-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>
Expand All @@ -120,11 +129,29 @@ To create a default toast, use `.Toast`
</div>
<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 class="Toast Toast-bright-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>
<div>
<div class="">Submitting issue to <strong>github/github.</strong> <a class="">Try again.</a></div>
</div>
<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>

```

## Toast with dismiss
## Toast with action

```html title="Toast with action"
<div class="Toast Toast-classic-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>
<div>
<span>Submitting issue to <strong>github/github</strong></span>
<button class="Toast-action btn btn-sm btn-outline d-block">Try again</button>
</div>
<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 class="Toast Toast-light-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>
<div>
Expand All @@ -133,12 +160,20 @@ To create a default toast, use `.Toast`
</div>
<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 class="Toast Toast-bright-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>
<div>
<span>Submitting issue to <strong>github/github</strong></span>
<button class="Toast-action btn btn-sm btn-outline d-block">Try again</button>
</div>
<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>
```

## Toast animating

```html title="Toast animating"
<div class="Toast Toast-animated Toast-light-error">
<div class="Toast Toast-animated Toast-classic-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>
Expand Down