-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* basic toast behavior * make action button optional * make toast controlled component * adding tests * review feedback
- Loading branch information
Showing
8 changed files
with
383 additions
and
62 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Toast render with options renders basic 1`] = ` | ||
<body> | ||
<div> | ||
<button> | ||
Trigger | ||
</button> | ||
<div | ||
aria-label="Notifications (F8)" | ||
role="region" | ||
style="" | ||
tabindex="-1" | ||
> | ||
<span | ||
aria-hidden="true" | ||
style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;" | ||
tabindex="0" | ||
/> | ||
<ol | ||
class="fixed left bottom mb24 w-full flex flex--center-main" | ||
tabindex="-1" | ||
> | ||
<li | ||
class="bg-gray-dark round wmax600 w-11/12 flex flex--center-cross row flex--space-between-main py12 pl12 hmin60" | ||
data-radix-collection-item="" | ||
data-state="open" | ||
data-swipe-direction="down" | ||
style="user-select: none;" | ||
tabindex="0" | ||
> | ||
<div | ||
class="color-gray-lighter txt-truncate w-auto mr12" | ||
> | ||
Toast message | ||
</div> | ||
<span | ||
class="flex flex-row flex--center-cross flex-child-no-shrink" | ||
> | ||
<button | ||
class="btn" | ||
data-testid="toast-action" | ||
type="button" | ||
> | ||
Open folder | ||
</button> | ||
<button | ||
aria-label="Close" | ||
class="btn btn--transparent color-gray-light" | ||
data-testid="toast-close" | ||
type="button" | ||
> | ||
<svg | ||
aria-hidden="true" | ||
class="events-none icon" | ||
data-testid="icon-close" | ||
focusable="false" | ||
style="width: 18px; height: 18px;" | ||
> | ||
<use | ||
xlink:href="#icon-close" | ||
xmlns:xlink="http://www.w3.org/1999/xlink" | ||
/> | ||
</svg> | ||
<span | ||
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;" | ||
> | ||
close | ||
</span> | ||
</button> | ||
</span> | ||
</li> | ||
</ol> | ||
<span | ||
aria-hidden="true" | ||
style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;" | ||
tabindex="0" | ||
/> | ||
</div> | ||
</div> | ||
<span | ||
aria-atomic="true" | ||
aria-live="assertive" | ||
role="status" | ||
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;" | ||
/> | ||
</body> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
/* | ||
A toast message with an action. | ||
*/ | ||
import React, { ReactElement, useState } from 'react'; | ||
import Toast from '../toast'; | ||
|
||
export default function Example() { | ||
const [open, setOpen] = useState(false); | ||
const renderToast = (): ReactElement => { | ||
return ( | ||
<Toast | ||
content="3 files have been moved to 'Your folder'" | ||
duration={3000} | ||
closeButton={false} | ||
active={open} | ||
action={{ text: 'Open folder', callback: () => {} }} | ||
onExit={() => setOpen(false)} | ||
> | ||
<button className="btn" onClick={() => setOpen(true)}> | ||
Trigger toast | ||
</button> | ||
</Toast> | ||
); | ||
}; | ||
|
||
return <div className="flex">{renderToast()}</div>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
/* | ||
A simple toast message without an action button, with a close button, and with a long message that truncates. | ||
*/ | ||
import React, { ReactElement, useState } from 'react'; | ||
import Toast from '../toast'; | ||
|
||
export default function Example() { | ||
const [open, setOpen] = useState(false); | ||
const renderToast = (): ReactElement => { | ||
return ( | ||
<Toast | ||
content="This is a much longer toast message that will likely truncate eventually with enough text" | ||
duration={5000} | ||
closeButton={true} | ||
active={open} | ||
onExit={() => setOpen(false)} | ||
> | ||
<button className="btn" onClick={() => setOpen(true)}> | ||
Another toast | ||
</button> | ||
</Toast> | ||
); | ||
}; | ||
|
||
return <div className="flex">{renderToast()}</div>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import main from './toast'; | ||
|
||
export default main; |
Oops, something went wrong.