Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove react-transition-group dependency #2391

Merged
merged 34 commits into from
Jan 28, 2025

Conversation

r100-stack
Copy link
Member

@r100-stack r100-stack commented Jan 6, 2025

Changes

Prerequisite for #2387. Fixes #2199.

This PR removes the dependency to the now mostly unmaintained react-transition-group. This has been our plan for a while now because of running into issues with it and having to find workarounds (e.g. #1835). Since React 19 has now removed the deprecated findDOMNode() that react-transition-group moving away from this package is needed to support React 19 in #2387.

Affected components:

  • Dialog/Modal: Exit animation removed temporarily since it's difficult to implement cleanly in JS.
  • Toast: Used the animate() function to implement the same animation in JS.

There were some animations that used to work in previous v3 versions and also in v2. Some of these animations stopped working in the previous few versions before this PR. So, I just removed the code for those animations since they anyways weren't working even before this PR. Some of these animations include:

  • Table with subcomponent
    v2.12.26 v3.16.0
    v2.mov
    v3.mov
  • SideNavigation with submenu
    v2.12.26 v3.16.0
    v2.mov
    v3.mov

This PR also deprecates the react-transition-group related CSS classes: .iui-enter, .iui-enter-active, .iui-exit, .iui-exit-active since they are no longer needed.

Testing

Confirmed whenever react-transition-group was used or at least was intended to be used, there is no visual change after this PR. The only exception is where we purposefully removed the animation temporarily (Dialog/Modal exit animation).

Docs

Added minor react and css changesets.

It is minor for css because of class deprecations. It is a minor for react since react-transition-group could be a dependency used in users' apps too and so could affect their dependency resolution. An additional reason is that the Dialog/Modal's exit animation is removed temporarily.

After PR TODO:

  • Try to avoid the effect by moving the sync based on visibility logic to where the visibility changes (#2391 (comment)).
  • Confirm if there is some flakiness in the Toasts react tests (#2312 (review)).

@r100-stack r100-stack self-assigned this Jan 6, 2025
@r100-stack r100-stack changed the base branch from main to uyen/modified-new-year-repo January 6, 2025 21:15
Base automatically changed from uyen/modified-new-year-repo to main January 6, 2025 21:23
@r100-stack r100-stack marked this pull request as ready for review January 10, 2025 22:49
@r100-stack r100-stack requested a review from a team as a code owner January 10, 2025 22:49
@r100-stack r100-stack requested review from mayank99 and smmr-dn and removed request for a team January 10, 2025 22:49
@r100-stack r100-stack enabled auto-merge (squash) January 28, 2025 21:39
@r100-stack r100-stack merged commit 55cc09e into main Jan 28, 2025
17 of 18 checks passed
@r100-stack r100-stack deleted the r/react-transition-group-removal branch January 28, 2025 21:45
@mayank99 mayank99 mentioned this pull request Jan 30, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

findDOMNode deprecation warning with newest react 18 version
3 participants