add placement prop to ToastContainer (#7609)

Author: reidbarber

packages/@react-spectrum/toast/docs/Toast.mdx

@@ -165,6 +165,14 @@ function Example() {
 }
 ```
 
+## Placement
+
+By default, toasts are displayed at the bottom center of the screen. This can be changed by setting the `placement` prop on the `ToastContainer` to `'top start'`, `'top'`, `'top end'`, `'bottom start'`, `'bottom'`, or `'bottom end'`.
+
+```tsx example render=false hidden
+<ToastContainer placement="bottom end" />
+```
+
 ## API
 
 ### ToastQueue

packages/@react-spectrum/toast/src/ToastContainer.tsx

@@ -21,7 +21,11 @@ import {Toaster} from './Toaster';
 import {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';
 import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
-export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
+export type ToastPlacement = 'top start' | 'top' | 'top end' | 'bottom start' | 'bottom' | 'bottom end';
+
+export interface SpectrumToastContainerProps extends AriaToastRegionProps {
+  placement?: ToastPlacement
+}
 
 export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {
   /** A label for the action button within the toast. */

packages/@react-spectrum/toast/src/Toaster.tsx

@@ -15,15 +15,17 @@ import {classNames} from '@react-spectrum/utils';
 import {FocusScope, useFocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import {Provider} from '@react-spectrum/provider';
-import React, {createContext, ReactElement, ReactNode, useRef} from 'react';
+import React, {createContext, ReactElement, ReactNode, useMemo, useRef} from 'react';
 import ReactDOM from 'react-dom';
 import toastContainerStyles from './toastContainer.css';
+import type {ToastPlacement} from './ToastContainer';
 import {ToastState} from '@react-stately/toast';
 import {useUNSTABLE_PortalContext} from '@react-aria/overlays';
 
 interface ToastContainerProps extends AriaToastRegionProps {
   children: ReactNode,
-  state: ToastState<unknown>
+  state: ToastState<unknown>,
+  placement?: ToastPlacement
 }
 
 export const ToasterContext = createContext(false);
@@ -39,15 +41,20 @@ export function Toaster(props: ToastContainerProps): ReactElement {
   let {focusProps, isFocusVisible} = useFocusRing();
   let {getContainer} = useUNSTABLE_PortalContext();
 
+  let [position, placement] = useMemo(() => {
+    let [pos = 'bottom', place = 'center'] = props.placement?.split(' ') || [];
+    return [pos, place];
+  }, [props.placement]);
+
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
       <FocusScope>
         <ToasterContext.Provider value={isFocusVisible}>
           <div
             {...mergeProps(regionProps, focusProps)}
             ref={ref}
-            data-position="bottom"
-            data-placement="center"
+            data-position={position}
+            data-placement={placement}
             className={classNames(
               toastContainerStyles,
               'react-spectrum-ToastContainer',

packages/@react-spectrum/toast/src/toastContainer.css

@@ -48,7 +48,7 @@
     --slide-to: translateY(0);
   }
 
-  &[data-placement=left] {
+  &[data-placement=start] {
     align-items: flex-start;
     --slide-from: translateX(-100%);
     --slide-to: translateX(0);
@@ -62,7 +62,7 @@
     align-items: center;
   }
 
-  &[data-placement=right] {
+  &[data-placement=end] {
     align-items: flex-end;
     --slide-from: translateX(100%);
     --slide-to: translateX(0);

packages/@react-spectrum/toast/stories/Toast.stories.tsx

@@ -27,21 +27,26 @@ import {UNSTABLE_PortalProvider} from '@react-aria/overlays';
 export default {
   title: 'Toast',
   decorators: [
-    (story, {parameters}) => (
+    (story, {parameters, args}) => (
       <>
-        {!parameters.disableToastContainer && <ToastContainer />}
+        {!parameters.disableToastContainer && <ToastContainer placement={args.placement} />}
         <MainLandmark>{story()}</MainLandmark>
       </>
     )
   ],
   args: {
     shouldCloseOnAction: false,
-    timeout: null
+    timeout: null,
+    placement: undefined
   },
   argTypes: {
     timeout: {
       control: 'radio',
       options: [null, 5000]
+    },
+    placement: {
+      control: 'select',
+      options: [undefined, 'top start', 'top', 'top end', 'bottom start', 'bottom', 'bottom end']
     }
   }
 };