Merge pull request #1556 from okta/ee/toast-update

Update: Remove "Dismiss" action from Toast
okta · Aug 25, 2022 · 75645af · 75645af
2 parents fa80ce7 + c69fb6e
commit 75645af
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 24 deletions.
diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.ts b/packages/odyssey-react-mui/src/themes/odyssey/components.ts
@@ -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)})`,
         }),
       }),
     },

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
@@ -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>

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Infobox/Infobox.mdx
@@ -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"
+            >
+              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>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.mdx
@@ -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>
@@ -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
 
@@ -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 />
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Toast/Toast.stories.tsx
@@ -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>
@@ -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>