Skip to content

Commit

Permalink
Add toast UI from radix (#200)
Browse files Browse the repository at this point in the history
* basic toast behavior

* make action button optional

* make toast controlled component

* adding tests

* review feedback
  • Loading branch information
VLuisa authored Oct 5, 2022
1 parent c691183 commit 0e7cf3e
Show file tree
Hide file tree
Showing 8 changed files with 383 additions and 62 deletions.
108 changes: 46 additions & 62 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"@radix-ui/react-tabs": "^1.0.0",
"@radix-ui/react-tooltip": "^1.0.0",
"@radix-ui/react-visually-hidden": "^1.0.0",
"@radix-ui/react-toast": "^1.0.0",
"classnames": "^2.2.6",
"clipboard": "^2.0.0",
"debounce": "^1.1.0",
Expand Down
88 changes: 88 additions & 0 deletions src/components/toast/__snapshots__/toast.test.tsx.snap
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>
`;
27 changes: 27 additions & 0 deletions src/components/toast/examples/toast-example-basic.tsx
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>;
}
26 changes: 26 additions & 0 deletions src/components/toast/examples/toast-example-overflow.tsx
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>;
}
3 changes: 3 additions & 0 deletions src/components/toast/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import main from './toast';

export default main;
Loading

0 comments on commit 0e7cf3e

Please sign in to comment.