chore: Refine exit motion for global drawer #3529

at-susie · 2025-05-21T09:09:30Z

Description

This PR fixes an animation issue for global-drawer.
We would like to have a smooth transition when a drawer is being closed.

Before this change, the style drawer-hidden was added immediately when a close button is clicked, which was one of the two reasons for the unwanted sudden closing behavior. To address this, an additional condition has been added to make sure only after the Transition's component state becomes exited.:
[styles['drawer-hidden']]: !show && state === 'exited'
And I updated relevant styles accordingly.

Additionally, I've added Transition component to the global-tools in the skeleton to ensure only after it gets the panel-hidden style.

Issue-2.mp4

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2025-05-21T09:19:21Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.56%. Comparing base (250c45e) to head (63e8600).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3529      +/-   ##
==========================================
+ Coverage   96.54%   96.56%   +0.01%     
==========================================
  Files         805      805              
  Lines       23446    23449       +3     
  Branches     7750     8106     +356     
==========================================
+ Hits        22637    22644       +7     
+ Misses        802      752      -50     
- Partials        7       53      +46

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx

…scape-design/components into g-drawer-motion-refinement

at-susie · 2025-05-22T11:36:02Z

Replaced the 3rd party Transition component with the internal one. This change provides an expected motion behavior that we wanted to achieve with minimum change on the global drawer style.

One note is that the appear props is not available in the internal Transition component. If necessary we can introduce i, but before that I want to discuss if it's necessary.

at-susie · 2025-05-22T11:37:48Z

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx

@@ -75,8 +75,9 @@ function AppLayoutGlobalDrawerImplementation({
    (wasExpanded && !isExpanded);

  return (
-    <Transition nodeRef={drawerRef} in={show || isExpanded} appear={show || isExpanded} timeout={0}>
-      {state => {
+    <Transition in={show} exit={!show}>


Note: Removed isExpanded condition because when 'isExpanded' it's always show.

Note: The appear props is not available in the internal Transition component. If necessary we can introduce it, but before that I want to discuss if it's necessary.

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx

georgylobko

This PR introduces a closing animation only for global drawers with preserveInactiveContent: true, and only after they’ve been opened at least once. The first open is not animated. However, it also breaks the existing animation for global drawers that don’t use preserveInactiveContent: true. See the video below for reference.

Screen.Recording.2025-05-26.at.15.09.44.mov

at-susie · 2025-05-26T16:21:48Z

This PR introduces a closing animation only for global drawers with preserveInactiveContent: true, and only after they’ve been opened at least once. The first open is not animated. However, it also breaks the existing animation for global drawers that don’t use preserveInactiveContent: true. See the video below for reference.

@georgylobko I've addressed those issues as follows:

"closing animation only for global drawers with preserveInactiveContent: true"
- Fixed by removing the defaultActive condition from animationDisabled
"only after they've been opened at least once. The first open is not animated"
- Fixed by using hasOpened state to control Transition's in prop
- First open is now properly animated with appear={true} and proper state management
"breaks the existing animation for global drawers that don't use preserveInactiveContent: true"
- Fixed by removing the preserveInactiveContent-related checks
- global-drawers now have consistent animation behavior regardless of their settings

Note:
I've checked other Transition component instances that use our internal Transition component which are:

src/app-layout/visual-refresh/split-panel.tsx (used only for bottom position)
src/app-layout/visual-refresh/navigation.tsx
The changes on the internal Transition component don't create any regression.

georgylobko

Fixed by removing the defaultActive condition from animationDisabled

this code was introduced on purpose and should be there, it makes sure that animation is not applied on initial load in consoles. you cannot just remove existing conditions

Fixed by using hasOpened state to control Transition's in prop

why? you already have a prop show. what is the purpose of this addition?

at-susie · 2025-05-27T08:05:20Z

@georgylobko Thanks for your feedback!

Fixed by removing the defaultActive condition from animationDisabled

Got it, I've brought it back.

Fixed by using hasOpened state to control Transition's in prop

When a drawer mounts with show=true, the Transition component's initial state is 'entered' (from its useState logic). This skips the animation sequence because it starts in the final state, preventing it from having the first-open motion. This ensures we get:

Initial mount: 'exited' state
After useEffect: 'enter' -> 'entering' -> 'entered'

Without hasOpened, we'd get:

Initial mount: 'entered' state (no animation)
Subsequent opens: 'enter' -> 'entering' -> 'entered'

The state is necessary to force the proper animation sequence on first mount, while still respecting the animationDisabled logic.

georgylobko · 2025-05-27T08:17:50Z

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx

-              if (!hasTriggerButton) {
-                return;
-              }
+    <Transition in={hasOpened && show} exit={!show}>


Curious why this file got completely reformatted? Could you check your linter and turn it back?

georgylobko · 2025-05-27T08:19:04Z

src/internal/components/transition/index.tsx

-          setTransitionState('enter');
-          onStatusChange('enter');
-        }
+      appear={true}


This component is used in multiple other places. Did you make sure other components / use cases aren't affected?

chore: Refine exit motion for global drawer

8d0edea

at-susie marked this pull request as ready for review May 21, 2025 09:11

at-susie requested a review from a team as a code owner May 21, 2025 09:11

at-susie requested review from avinashbot and georgylobko and removed request for a team and avinashbot May 21, 2025 09:11

at-susie deployed to dev-pages May 21, 2025 09:18 — with GitHub Actions View deployment

at-susie requested a review from just-boris May 21, 2025 10:38

at-susie commented May 21, 2025

View reviewed changes

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx Outdated Show resolved Hide resolved

Merge branch 'main' into g-drawer-motion-refinement

7f59eb0

at-susie deployed to dev-pages May 21, 2025 14:51 — with GitHub Actions View deployment

at-susie added 3 commits May 22, 2025 12:40

chore: Replace Transition with the internal one

40e8e74

Merge branch 'main' into g-drawer-motion-refinement

1104b54

Merge branch 'g-drawer-motion-refinement' of https://github.com/cloud…

9cec04d

…scape-design/components into g-drawer-motion-refinement

at-susie deployed to dev-pages May 22, 2025 10:50 — with GitHub Actions View deployment

chore: Bring original code back

2c575ff

at-susie deployed to dev-pages May 22, 2025 11:34 — with GitHub Actions View deployment

at-susie commented May 22, 2025

View reviewed changes

Merge branch 'main' into g-drawer-motion-refinement

1254d6a

at-susie deployed to dev-pages May 23, 2025 10:10 — with GitHub Actions View deployment

just-boris reviewed May 23, 2025

View reviewed changes

src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx Outdated Show resolved Hide resolved

georgylobko requested changes May 26, 2025

View reviewed changes

Merge branch 'main' into g-drawer-motion-refinement

966670b

at-susie deployed to dev-pages May 26, 2025 14:26 — with GitHub Actions View deployment

chore: Fix issues for first time open

0296f43

at-susie deployed to dev-pages May 26, 2025 16:19 — with GitHub Actions View deployment

at-susie requested a review from georgylobko May 26, 2025 16:24

georgylobko requested changes May 26, 2025

View reviewed changes

at-susie added 2 commits May 27, 2025 09:56

chore: Bring defaultActive condition

ffa8a53

Merge branch 'main' into g-drawer-motion-refinement

63e8600

at-susie requested a review from georgylobko May 27, 2025 08:05

at-susie deployed to dev-pages May 27, 2025 08:06 — with GitHub Actions View deployment

georgylobko reviewed May 27, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Refine exit motion for global drawer #3529

chore: Refine exit motion for global drawer #3529

Uh oh!

at-susie commented May 21, 2025 •

edited

Loading

Uh oh!

codecov bot commented May 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

at-susie commented May 22, 2025

Uh oh!

at-susie May 22, 2025

Uh oh!

at-susie May 22, 2025 •

edited

Loading

Uh oh!

Uh oh!

georgylobko left a comment

Uh oh!

at-susie commented May 26, 2025 •

edited

Loading

Uh oh!

georgylobko left a comment •

edited

Loading

Uh oh!

at-susie commented May 27, 2025

Uh oh!

georgylobko May 27, 2025

Uh oh!

georgylobko May 27, 2025

Uh oh!

Uh oh!

chore: Refine exit motion for global drawer #3529

Are you sure you want to change the base?

chore: Refine exit motion for global drawer #3529

Uh oh!

Conversation

at-susie commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

at-susie commented May 22, 2025

Uh oh!

at-susie May 22, 2025

Choose a reason for hiding this comment

Uh oh!

at-susie May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

georgylobko left a comment

Choose a reason for hiding this comment

Uh oh!

at-susie commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

georgylobko left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

at-susie commented May 27, 2025

Uh oh!

georgylobko May 27, 2025

Choose a reason for hiding this comment

Uh oh!

georgylobko May 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

at-susie commented May 21, 2025 •

edited

Loading

codecov bot commented May 21, 2025 •

edited

Loading

at-susie May 22, 2025 •

edited

Loading

at-susie commented May 26, 2025 •

edited

Loading

georgylobko left a comment •

edited

Loading