[Bug]: There's no way to know when a Dialog or Drawer has finished animating in and out

Weffe commented 8 months ago

Library

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

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 10.00 GB / 31.60 GB
  Browsers:
    Chrome: 121.0.6167.87
    Edge: Chromium (121.0.2277.83)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

n/a

Bug Description

Back in https://github.com/microsoft/fluentui/issues/8562 for Fluent 8, a PR was made to address this issue to add some callback props to know when the panel/dialog, etc was done animating in or out. There is no equivalent callback props for Fluent 9 Dialog and Drawer.

Expected Behavior

Expose the useMotion() state's type as callback props so that consumers can know when the component is done animating in and out.

This is useful, for example, if I want to wait for a Drawer to animate out before showing some new content to the user.

Logs

No response

Requested priority

High

Products/sites affected

https://dataexplorer.azure.com/

Are you willing to submit a PR to fix?

no

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

layershifter commented 8 months ago

This is not a bug, it's a feature. To provide context, Dialog & Drawer have motions implemented differently: Dialog using react-transition-group, Drawer using useMotion(). There is also a wider discussion on how motions should be implemented in Fluent at all, #29958. We should reach an agreement there before any callbacks will be exposed.

Anyway, there is a standard way built-in into the platform to handle animation events:

For Dialog & Drawer it could be done by backdrop.onTransitionEnd:

Dialog - https://stackblitz.com/edit/stackblitz-starters-wwhi31
Drawer - https://stackblitz.com/edit/stackblitz-starters-tcvegp

Weffe commented 8 months ago

Oh nice, I didn't see that in the backdrop in the Drawer docs so I'd probably close this bug and instead just update the docs to be more clear about when to know the Dialog/Drawer is done animating (e.g. by using backdrop.onTransitionEnd until direct callbacks are finalized IF they're added in the future).

ValentinaKozlova commented 8 months ago

Closing, as it's not a bug

microsoft / fluentui