microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.53k stars 2.73k forks source link

[Feature]: Toast: Support immediately removing a toast #32887

Open WanderG opened 1 month ago

WanderG commented 1 month ago

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

When dismissing a toast, an animation is used, making it slow to dismiss multiple toasts. We would like to be able to more quickly close a few toasts.

I have found a workaround that cannot be used in production, as the types do not support it, and presumable only happens to work by accident. But it demonstrates what I want:
https://stackblitz.com/edit/jcm3kt-k6affw?file=src%2Fexample.tsx

I can see a few possible solutions:

  1. Allow customizing/removing the animation
  2. Update the ToastChangeData type to support the remove method (as used in the example)
  3. Add options to the dismissToast function returned by useToastController, to allow immediately removing the toast

Of these 3 options (but I'm sure there are more), I'd prefer the 3rd, as it would allow me to only immediately remove the toast on user-interaction, while keeping the animation when a toast is removed after a timeout.

toast-quick-close

Have you discussed this feature with our team

No response

Additional context

No response

Validations

Priority

Normal

miroslavstastny commented 1 month ago

We should add motion slot to Toast component.