From 800f510b9cf0aed20708acb19927b43f42d941dd Mon Sep 17 00:00:00 2001
From: Katie George <katiegeorge94@gmail.com>
Date: Mon, 16 Oct 2023 08:36:35 -0700
Subject: [PATCH] chore: Removes drawer animations (#1653)

Co-authored-by: Katie George <katiegeo@amazon.com>
---
 src/app-layout/__tests__/desktop.test.tsx  |  6 ------
 src/app-layout/visual-refresh/drawers.scss | 17 -----------------
 src/app-layout/visual-refresh/drawers.tsx  |  2 --
 3 files changed, 25 deletions(-)

diff --git a/src/app-layout/__tests__/desktop.test.tsx b/src/app-layout/__tests__/desktop.test.tsx
index 337f9489c1..1fdd0875e7 100644
--- a/src/app-layout/__tests__/desktop.test.tsx
+++ b/src/app-layout/__tests__/desktop.test.tsx
@@ -335,12 +335,6 @@ describe('VR only features', () => {
     (useVisualRefresh as jest.Mock).mockReset();
   });
 
-  test('should add motion class', () => {
-    const { wrapper } = renderComponent(<AppLayout contentType="form" {...resizableDrawer} />);
-    act(() => wrapper.findDrawersTriggers()![0].click());
-    expect(wrapper.findActiveDrawer()!.getElement()).toHaveClass(styles['with-motion']);
-  });
-
   test('renders roles only when aria labels are not provided', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
 
diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
index b9a43e14df..3d711cb2ef 100644
--- a/src/app-layout/visual-refresh/drawers.scss
+++ b/src/app-layout/visual-refresh/drawers.scss
@@ -21,10 +21,6 @@
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
     box-shadow: awsui.$shadow-panel;
-
-    @include styles.with-motion {
-      transition: background-color awsui.$motion-duration-refresh-only-fast;
-    }
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -70,18 +66,10 @@
 
   &.has-multiple-triggers.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-
-    @include styles.with-motion {
-      transition: background-color awsui.$motion-duration-refresh-only-fast;
-    }
   }
 
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
     width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
-
-    @include styles.with-motion {
-      transition: width awsui.$motion-duration-refresh-only-fast;
-    }
   }
 }
 
@@ -103,11 +91,6 @@
 
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
     opacity: 1;
-
-    @include styles.with-motion {
-      transition: opacity awsui.$motion-duration-refresh-only-medium;
-      transition-delay: calc(awsui.$motion-duration-refresh-only-fast / 1.5);
-    }
   }
 
   > .drawers-trigger-overflow {
diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
index 7bec9850d9..ff4b84675c 100644
--- a/src/app-layout/visual-refresh/drawers.tsx
+++ b/src/app-layout/visual-refresh/drawers.tsx
@@ -9,7 +9,6 @@ import TriggerButton from './trigger-button';
 import { useAppLayoutInternals } from './context';
 import splitPanelStyles from '../../split-panel/styles.css.js';
 import styles from './styles.css.js';
-import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import OverflowMenu from '../drawer/overflow-menu';
@@ -99,7 +98,6 @@ function ActiveDrawer() {
         [styles.unfocusable]: isUnfocusable,
         [testutilStyles['active-drawer']]: activeDrawerId,
         [testutilStyles.tools]: isToolsDrawer,
-        [sharedStyles['with-motion']]: activeDrawerId,
       })}
       style={{
         ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),