fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Feature]: Toast: Support immediately removing a toast

Open WanderG opened this issue 1 year ago • 1 comments

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

  • [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Normal

WanderG avatar Sep 23 '24 10:09 WanderG