chore: Removes drawer animations (#1653)

Co-authored-by: Katie George <[email protected]>
cloudscape-design · Oct 16, 2023 · 800f510 · 800f510
1 parent 89948e0
commit 800f510
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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` }),