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

Update: Remove "Dismiss" action from Toast #1556

Merged
merged 2 commits into from
Aug 25, 2022
Merged

Update: Remove "Dismiss" action from Toast #1556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0bc5b26
refactor(odyssey-react-mui): remove extra padding from Toast, Message
edburyenegren-okta Aug 25, 2022
c69fb6e
docs(odyssey-storybook): remove Dismiss action from Toast
edburyenegren-okta Aug 25, 2022
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
3 changes: 0 additions & 3 deletions packages/odyssey-react-mui/src/themes/odyssey/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,6 @@ export const components: ThemeOptions["components"] = {
}),
...(ownerState.variant === "toast" && {
flexGrow: 1,
paddingRight: `calc((${theme.spacing(1)} * 2) + ${
theme.typography.body.fontSize
} + ${theme.spacing(4)})`,
}),
}),
},
Expand Down
2 changes: 1 addition & 1 deletion packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ When including an action, be sure the link text clearly indicates where it leads
<td>Info, Success, Warning, Error</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
Expand Down
97 changes: 94 additions & 3 deletions packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,97 @@ Infobox should always include their main messaging within the body content. Titl

When deploying Infoboxes, two `role`s may apply. Error variants should utilize the `alert` role, as their contents represent immediate risk or failure. Success and Warning variants are better suited to the `status` role, which provides a less urgent announcement on appearance. The Info variant does not require a `role`, as it represents plain content.

## Props

<ArgsTable />
## References

<figure class="ods-table--figure">
<figcaption class="ods-table--figcaption">Related Components</figcaption>
<table class="ods-table">
<caption>Differences between the available alert components</caption>
<thead>
<tr>
<th scope="column">Component</th>
<th scope="column">Available Variants</th>
<th scope="column">
<span class="has-ods-tooltip">
<abbr aria-describedby="tip-dynamic">Dynamic</abbr>
<aside
class="ods-tooltip is-ods-tooltip-top"
id="tip-dynamic"
role="tooltip"
>
KevinGhadyani-Okta marked this conversation as resolved.
Show resolved Hide resolved
May be inserted after page load
</aside>
</span>
</th>
<th scope="column">
<span class="has-ods-tooltip">
<abbr aria-describedby="tip-transient">Transient</abbr>
<aside
class="ods-tooltip is-ods-tooltip-top"
id="tip-transient"
role="tooltip"
>
Disappears without user interaction
</aside>
</span>
</th>
<th scope="column">
<span class="has-ods-tooltip">
<abbr aria-describedby="tip-dismissible">Dismissible</abbr>
<aside
class="ods-tooltip is-ods-tooltip-top"
id="tip-dismissible"
role="tooltip"
>
May be dismissed by the user
</aside>
</span>
</th>
<th scope="column">
<span class="has-ods-tooltip">
<abbr aria-describedby="tip-actionable">Actionable</abbr>
<aside
class="ods-tooltip is-ods-tooltip-top"
id="tip-actionable"
role="tooltip"
>
May include actions or links
</aside>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<a href="?path=/docs/components-alerts-banner--info#banner">Banner</a>
</th>
<td>Info, Warning, Error</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Infobox</th>
<td>Success, Warning, Error</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">
<a href="?path=/docs/mui-components-alerts-toast--info#toast">
Toast
</a>
</th>
<td>Info, Success, Warning, Error</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
</table>
</figure>
21 changes: 6 additions & 15 deletions packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,20 @@ Toasts are transient, non-disruptive messages that provide at-a-glance, asynchro

## Anatomy

Each Toast is made up of up to four parts: Icon & Color, Title, Body, and a Dismiss Button.
Each Toast is made up of up to three parts: Severity, Title, and Message.

<dl>
<dt>Icon &amp; Color</dt>
<dt>Severity</dt>
<dd>
These are mapped to the different variants of Toast and shouldn't be mixed.
This indicates the toast's status as Info, Success, Warning, or Error.
</dd>
<dt>Title (optional)</dt>
<dd>Provides quick context; one line max</dd>
<dt>Body</dt>
<dt>Message</dt>
<dd>
Supplemental information. Be concise - less than three lines of content - as
your Toast will soon vanish!
</dd>
<dt>Dismiss "X"</dt>
<dd>
Included to ensure users are able to dismiss Toasts manually. Placement is
handled automatically based on content.
</dd>
</dl>

<Canvas>
Expand All @@ -41,7 +36,7 @@ The Toast pen will take care of positioning and layout automatically. Toasts wil

If multiple Toasts are triggered in a short time, they will stack in order of appearance. For visual consistency, Toasts will resize to match the largest Toast visible.

## Variants
## Severity

### Info

Expand Down Expand Up @@ -171,13 +166,9 @@ Do not use Error Toasts for in-page errors such as invalid form fields. Instead,
<td>Info, Success, Warning, Error</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
</tbody>
</table>
</figure>

## Props

<ArgsTable />
4 changes: 2 additions & 2 deletions packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const DefaultTemplate: Story = (args) => {
</Button>
<Stack spacing={2} sx={{ width: "100%" }}>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity={args.severity} variant="toast">
<Alert severity={args.severity} variant="toast">
{args.title && <AlertTitle>{args.title}</AlertTitle>}
{args.content}
</Alert>
Expand All @@ -79,7 +79,7 @@ const DefaultTemplate: Story = (args) => {

const StaticTemplate: Story = (args) => {
return (
<Alert onClose={() => undefined} severity={args.severity} variant="toast">
<Alert severity={args.severity} variant="toast">
{args.title && <AlertTitle>{args.title}</AlertTitle>}
{args.content}
</Alert>
Expand Down