feat(Toast): use View Transition API for Toast animations #7631
Conversation
reidbarber
changed the title
reidbarber
dismissed stale reviews from yihuiliao and snowystinger
via
e7a18b2
## API Changes
@react-stately/toast/@react-stately/toast:ToastQueue ToastQueue <T> {
add: (T, ToastOptions) => void
close: (string) => void
constructor: (ToastStateProps) => void
pauseAll: () => void
- remove: (string) => void
resumeAll: () => void
subscribe: (() => void) => void
visibleToasts: Array<QueuedToast<T>>
}/@react-stately/toast:ToastState ToastState <T> {
add: (T, ToastOptions) => string
close: (string) => void
pauseAll: () => void
- remove: (string) => void
resumeAll: () => void
visibleToasts: Array<QueuedToast<T>>
}/@react-stately/toast:QueuedToast QueuedToast <T> {
- animation?: 'entering' | 'queued' | 'exiting' | null
content: T
key: string
onClose?: () => void
priority?: number
timer?: Timer
}/@react-stately/toast:ToastStateProps ToastStateProps {
- hasExitAnimation?: boolean
maxVisibleToasts?: number
+ wrapUpdate?: (() => R) => R
} |
|
@reidbarber Hello. Our HeroUI toast is using the data attributes (e.g. |
|
@wingkwong the previous data attributes were incomplete and buggy, and to fix them we realized that we'd basically need to reinvent an animation library like Framer Motion or React Transition Group, which have much more advanced support for entry/exit animations. We'd recommend using one of those instead. This is more complicated than the animation states we offer for things like popovers/modals because there is a list of items rather than only a single element to transition. Framer Motion also supports layout animations, which smoothly transition the positions of neighboring items when a new one is added or an item is removed. CSS View Transitions also support this natively in the browser, and with support for that coming along, we decided to avoid adding this complexity to the Toast component. This keeps the component smaller and gives you flexibility to choose an animation solution that suits your needs. |
Removes useToast's existing animation API in favor of using the browser's View Transition API to animate toasts.
✅ Pull Request Checklist:
📝 Test Instructions:
Test the entrance and exist transitions in toast stories, including different placements, closing via timeout, and closing programmatically.
🧢 Your Project: