feat(Toast): add placement prop to ToastContainer #7609
Conversation
| @@ -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'`. | |||
There was a problem hiding this comment.
How does the team feel about a blurb for mfe's that may have multiple ToastContainers?
There was a problem hiding this comment.
Good catch! I checked and we currently don't talk about multiple ToastContainers in the docs. Do we need a general section on that or continue not documenting it?
There was a problem hiding this comment.
Going to be editing more docs soon, so I'll do this in a follow up!
## API Changes
@react-spectrum/toast/@react-spectrum/toast:ToastContainer ToastContainer {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
+ placement?: ToastPlacement
}/@react-spectrum/toast:SpectrumToastContainerProps SpectrumToastContainerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
+ placement?: ToastPlacement
} |
| @@ -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'`. | |||
There was a problem hiding this comment.
Good catch! I checked and we currently don't talk about multiple ToastContainers in the docs. Do we need a general section on that or continue not documenting it?
| @@ -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'; | |||
There was a problem hiding this comment.
I know that we specified in the ticket that we'd only support this set of placement, but it just occurred to me that we support left and right in additional to start and end in our other placement props. I don't quite remember if there was a use case for that or if it was carryover from v2 or not...
✅ Pull Request Checklist:
📝 Test Instructions:
Check storybook, and use controls to try different placements in LTR and RTL locales
🧢 Your Project: