feat(Toast): make non-dismissible toasts positioned statically (#959)

* feat(Toast): make non-dismissible toasts positioned statically --------- Co-authored-by: Dima Tregubov <[email protected]>
dequelabs · Mar 22, 2023 · 147f3dd · 147f3dd
1 parent f3b5709
commit 147f3dd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/docs/patterns/components/Toast/index.js b/docs/patterns/components/Toast/index.js
@@ -131,6 +131,12 @@ export default class Demo extends Component {
               </>
             ),
             show: type === 'not-dismissible',
+            DEMO_renderBefore: (
+              <p>
+                A current limitation is that non-dismissible Toasts are shown
+                where they are rendered to prevent them from clipping content.
+              </p>
+            ),
             DEMO_renderAfter: (
               <Button
                 variant="error"

diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Icon from '../Icon';
 import AriaIsolate from '../../utils/aria-isolate';
 import { typeMap, tabIndexHandler } from './utils';
@@ -119,7 +120,12 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
 
     const defaultProps: React.HTMLAttributes<HTMLDivElement> = {
       tabIndex: -1,
-      className: `Toast Toast--${typeMap[type].className} ${animationClass}`
+      className: classNames(
+        'Toast',
+        `Toast--${typeMap[type].className}`,
+        animationClass,
+        { 'Toast--non-dismissible': !dismissible }
+      )
     };
 
     if (!focus) {

diff --git a/packages/styles/toast.css b/packages/styles/toast.css
@@ -1,15 +1,20 @@
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
+  right: 0;
+  left: 0;
   color: #0b0e11;
   font-size: var(--text-size-small);
   z-index: var(--z-index-toast);
   align-items: center;
   box-sizing: border-box;
   display: flex;
   padding: 4px 15px;
-  right: 0;
-  left: 0;
+}
+
+.Toast.Toast--non-dismissible {
+  position: static;
+  margin-bottom: var(--space-small);
 }
 
 .TopBar--thin .Toast {