fix: Add missing animations to discreet split panel (#3322)

jperals · web-flow · commit 47c19bfae622 · 2025-03-06T16:53:47.000Z
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/app-layout/dashboard-content-type.page.tsx b/pages/app-layout/dashboard-content-type.page.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import AppLayout from '~components/app-layout';
 import Button from '~components/button';
 import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
 import SplitPanel from '~components/split-panel';
 
 import ScreenshotArea from '../utils/screenshot-area';
@@ -23,12 +24,14 @@ export default function () {
         breadcrumbs={<Breadcrumbs />}
         navigation={<Navigation />}
         tools={<Tools>{toolsContent.long}</Tools>}
-        contentHeader={
-          <Header variant="h1" actions={<Button onClick={() => setSplitPanelOpen(true)}>Add widget</Button>}>
-            Dashboard page
-          </Header>
+        content={
+          <SpaceBetween size="m">
+            <Header variant="h1" actions={<Button onClick={() => setSplitPanelOpen(true)}>Add widget</Button>}>
+              Dashboard page
+            </Header>
+            <Containers />
+          </SpaceBetween>
         }
-        content={<Containers />}
         splitPanelPreferences={{ position: 'side' }}
         splitPanelOpen={splitPanelOpen}
         splitPanel={
diff --git a/src/__integ__/utils.ts b/src/__integ__/utils.ts
@@ -2,6 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as glob from 'glob';
 
+export type Theme = 'classic' | 'refresh' | 'refresh-toolbar';
+export type Size = 'desktop' | 'mobile';
+
 export function findAllPages(): string[] {
   return glob.sync('**/*.page.tsx', { cwd: 'pages' }).map(file => file.replace(/\.page\.tsx$/, ''));
 }
+
+export async function times(n: number, fn: () => Promise<void>) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  for (const _ of new Array(n)) {
+    await fn();
+  }
+}
diff --git a/src/__tests__/utils.tsx b/src/__tests__/utils.tsx
@@ -62,16 +62,21 @@ function wrap({ default: Component }: { default: React.ComponentType }, Wrapper:
 
 export function requireComponent(componentName: string): any {
   if (componentName === 'split-panel') {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
     return wrap(require(path.join(componentsDir, 'split-panel')), WrappedSplitPanel);
   }
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(componentsDir, componentName));
 }
 
 export function requireComponentDefinition(componentName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(definitionsDir, componentName));
 }
 
 export function requireDesignTokensFile(fileName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(designTokensDir, fileName));
 }
+
+export const testIf = (condition: boolean) => (condition ? test : test.skip);
diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils.js';
 import { viewports } from './constants';
-import { getUrlParams, testIf, Theme } from './utils';
+import { getUrlParams, testIf } from './utils';
 
 import splitPanelTestUtilStyles from '../../../lib/components/split-panel/test-classes/styles.selectors.js';
 
@@ -131,7 +132,9 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
         setupTest(
           async page => {
             // Mobile nav is closed on page load
-            mobile && (await page.click(wrapper.findNavigationToggle().toSelector()));
+            if (mobile) {
+              await page.click(wrapper.findNavigationToggle().toSelector());
+            }
             await page.setWindowSize({ width: 1100, height: 800 });
             await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
             await expect(page.isExisting(wrapper.findSplitPanel().findOpenPanelSide().toSelector())).resolves.toBe(
diff --git a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
@@ -5,8 +5,9 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
 import { scrollbarThickness } from '../../__integ__/scrollbars';
+import { Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 
diff --git a/src/app-layout/__integ__/app-layout-refresh-edge-controls.test.ts b/src/app-layout/__integ__/app-layout-refresh-edge-controls.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 
diff --git a/src/app-layout/__integ__/app-layout-refresh-notifications.test.ts b/src/app-layout/__integ__/app-layout-refresh-notifications.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 
diff --git a/src/app-layout/__integ__/app-layout-sticky-elements.test.ts b/src/app-layout/__integ__/app-layout-sticky-elements.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
-import { getUrlParams, testIf, Theme } from './utils';
+import { getUrlParams, testIf } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 
diff --git a/src/app-layout/__integ__/awsui-applayout-sticky.test.ts b/src/app-layout/__integ__/awsui-applayout-sticky.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 const stickyToggleSelector = createWrapper().findFlashbar().findItems().get(1).findActionButton().toSelector();
diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils.js';
 import { viewports } from './constants';
-import { getUrlParams, testIf, Theme } from './utils';
+import { getUrlParams, testIf } from './utils';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
 
diff --git a/src/app-layout/__integ__/multi-app-layout.test.ts b/src/app-layout/__integ__/multi-app-layout.test.ts
@@ -4,7 +4,8 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
-import { getUrlParams, Theme } from './utils';
+import { Theme } from '../../__integ__/utils';
+import { getUrlParams } from './utils';
 
 const iframeId = '#inner-iframe';
 
diff --git a/src/app-layout/__integ__/navigation.test.ts b/src/app-layout/__integ__/navigation.test.ts
@@ -5,7 +5,8 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
-import { getUrlParams, Theme } from './utils';
+import { Theme } from '../../__integ__/utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout().findNavigation();
 
diff --git a/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts b/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts
@@ -4,7 +4,8 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
-import { getUrlParams, Theme } from './utils';
+import { Theme } from '../../__integ__/utils';
+import { getUrlParams } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 
diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/src/app-layout/__integ__/runtime-drawers.test.ts
@@ -4,8 +4,9 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/selectors';
+import { Theme } from '../../__integ__/utils.js';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
+import { getUrlParams } from './utils';
 
 import vrDrawerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import vrToolbarDrawerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js';
diff --git a/src/app-layout/__integ__/utils.ts b/src/app-layout/__integ__/utils.ts
@@ -4,17 +4,16 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Size, Theme } from '../../__integ__/utils';
 import { viewports } from './constants';
 
 export const testIf = (condition: boolean) => (condition ? test : test.skip);
 
-export type Theme = 'classic' | 'refresh' | 'refresh-toolbar';
-
 interface SetupTestOptions {
   splitPanelPosition?: string;
-  size?: 'desktop' | 'mobile';
+  size?: Size;
   disableContentPaddings?: string;
-  theme?: 'refresh' | 'refresh-toolbar' | 'classic';
+  theme?: Theme;
 }
 
 export function getUrlParams(theme: Theme, other?: Record<string, string>) {
diff --git a/src/app-layout/__tests__/drawers.test.tsx b/src/app-layout/__tests__/drawers.test.tsx
@@ -7,6 +7,7 @@ import { KeyCode } from '@cloudscape-design/test-utils-core/utils.js';
 
 import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import { testIf } from '../../__tests__/utils';
 import {
   describeEachAppLayout,
   findActiveDrawerLandmark,
@@ -19,8 +20,6 @@ import {
 import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 
-const testIf = (condition: boolean) => (condition ? test : test.skip);
-
 const mockEventBubble = {
   bubbles: true,
   isTrusted: true,
diff --git a/src/app-layout/__tests__/trigger-button.test.tsx b/src/app-layout/__tests__/trigger-button.test.tsx
@@ -15,6 +15,7 @@ import VisualRefreshToolbarTriggerButton, {
 import { ButtonProps } from '../../../lib/components/button';
 import { IconProps } from '../../../lib/components/icon/interfaces.js';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import { testIf } from '../../__tests__/utils';
 
 import testUtilStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
@@ -62,8 +63,6 @@ const mockEventBubbleWithRelatedTarget = {
 
 const triggerButtoonTooltipClass = testUtilStyles['trigger-tooltip'];
 
-const testIf = (condition: boolean) => (condition ? test : test.skip);
-
 const renderVisualRefreshTriggerButton = (
   props: Partial<VisualRefreshTriggerButtonProps> = {},
   useAppLayoutInternalsValues: Partial<AllContext.AppLayoutInternals> = {},
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -18,7 +18,7 @@ export interface AppLayoutInternalProps extends AppLayoutPropsWithDefaults {
 export type InternalDrawer = AppLayoutProps.Drawer & { defaultActive?: boolean };
 
 // Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.
-// Treat thsese structures as an API and do not make incompatible changes.
+// Treat these structures as an API and do not make incompatible changes.
 export interface AppLayoutInternals {
   ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];
   headerVariant: AppLayoutPropsWithDefaults['headerVariant'];
diff --git a/src/date-range-picker/__tests__/date-range-picker-absolute.test.tsx b/src/date-range-picker/__tests__/date-range-picker-absolute.test.tsx
@@ -8,6 +8,7 @@ import DateRangePicker, { DateRangePickerProps } from '../../../lib/components/d
 import TestI18nProvider from '../../../lib/components/i18n/testing';
 import { KeyCode } from '../../../lib/components/internal/keycode';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import { testIf } from '../../__tests__/utils';
 import { i18nStrings } from './i18n-strings';
 import { isValidRange } from './is-valid-range';
 
@@ -22,8 +23,6 @@ const defaultProps: DateRangePickerProps = {
   isValidRange,
 };
 
-const testIf = (isTrue: boolean) => (isTrue ? test : test.skip);
-
 const outsideId = 'outside';
 function renderDateRangePicker(props: DateRangePickerProps = defaultProps) {
   const ref = React.createRef<HTMLInputElement>();
diff --git a/src/internal/analytics/__integ__/static-multi-page-create.test.ts b/src/internal/analytics/__integ__/static-multi-page-create.test.ts
@@ -4,7 +4,8 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../../lib/components/test-utils/selectors';
-import { getUrlParams, Theme } from '../../../app-layout/__integ__/utils';
+import { Theme } from '../../../__integ__/utils';
+import { getUrlParams } from '../../../app-layout/__integ__/utils';
 
 interface ExtendedWindow extends Window {
   __awsuiFunnelMetrics__: Array<any>;
diff --git a/src/internal/analytics/__integ__/static-single-page-flow.test.ts b/src/internal/analytics/__integ__/static-single-page-flow.test.ts
@@ -4,7 +4,8 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../../lib/components/test-utils/selectors';
-import { getUrlParams, Theme } from '../../../app-layout/__integ__/utils';
+import { Theme } from '../../../__integ__/utils';
+import { getUrlParams } from '../../../app-layout/__integ__/utils';
 
 interface ExtendedWindow extends Window {
   __awsuiFunnelMetrics__: Array<any>;
diff --git a/src/split-panel/__motion__/split-panel.test.ts b/src/split-panel/__motion__/split-panel.test.ts
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+import { Size, Theme, times } from '../../__integ__/utils';
+import { viewports } from '../../app-layout/__integ__/constants';
+
+const appLayout = createWrapper().findAppLayout();
+const splitPanel = appLayout.findSplitPanel();
+const openButtonSelector = appLayout.findContentRegion().findHeader().findActions().findButton().toSelector();
+const closeButtonSelector = splitPanel.findCloseButton().toSelector();
+
+interface SetupTestOptions {
+  screenSize?: (typeof viewports)['desktop' | 'mobile'];
+  theme: Theme;
+}
+
+const setupTest = (
+  { screenSize = viewports.desktop, theme }: SetupTestOptions,
+  testFn: (page: BasePageObject) => Promise<void>
+) =>
+  useBrowser(screenSize, async browser => {
+    const page = new BasePageObject(browser);
+    const params = new URLSearchParams({
+      visualRefresh: `${theme !== 'classic'}`,
+      appLayoutToolbar: `${theme === 'refresh-toolbar'}`,
+    }).toString();
+    await browser.url(`#/light/app-layout/dashboard-content-type?${params}`);
+    await page.waitForVisible(appLayout.findContentRegion().toSelector());
+    await testFn(page);
+  });
+
+describe('Discreet split panel', () => {
+  describe.each<Theme>(['classic', 'refresh', 'refresh-toolbar'])('%s', theme => {
+    describe.each<Size>(['desktop', 'mobile'])('%s', size => {
+      it(
+        'opens and closes',
+        setupTest({ screenSize: viewports[size], theme }, async page => {
+          const openSplitPanelSelector =
+            size === 'mobile'
+              ? splitPanel.findOpenPanelBottom().toSelector()
+              : splitPanel.findOpenPanelSide().toSelector();
+
+          await expect(page.isDisplayed(openSplitPanelSelector)).resolves.toBe(false);
+
+          // The first time the split panel opens, animations are disabled. The second time they should be enabled.
+          // Test both cases by opening and closing twice.
+          await times(2, async () => {
+            await page.click(openButtonSelector);
+            await page.waitForVisible(openSplitPanelSelector);
+            // Wait for a reasonable time for animations to finish, to avoid trying to click a moving target
+            // (the close button is inside the split panel itself, which might be expanding at this point)
+            await new Promise(resolve => setTimeout(resolve, 500));
+            await page.click(closeButtonSelector);
+            await page.waitForVisible(openSplitPanelSelector, false);
+          });
+        })
+      );
+    });
+  });
+});
diff --git a/src/split-panel/__tests__/split-panel.test.tsx b/src/split-panel/__tests__/split-panel.test.tsx
diff --git a/src/split-panel/bottom.tsx b/src/split-panel/bottom.tsx
diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx
diff --git a/src/split-panel/side.tsx b/src/split-panel/side.tsx

Original file line number	Diff line number	Diff line change
`@@ -62,16 +62,21 @@ function wrap({ default: Component }: { default: React.ComponentType }, Wrapper:`
`62`	`62`
`63`	`63`	`export function requireComponent(componentName: string): any {`
`64`	`64`	`if (componentName === 'split-panel') {`
`65`		`- // eslint-disable-next-line @typescript-eslint/no-var-requires`
	`65`	`+ // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports`
`66`	`66`	`return wrap(require(path.join(componentsDir, 'split-panel')), WrappedSplitPanel);`
`67`	`67`	`}`
	`68`	`+ // eslint-disable-next-line @typescript-eslint/no-require-imports`
`68`	`69`	`return require(path.join(componentsDir, componentName));`
`69`	`70`	`}`
`70`	`71`
`71`	`72`	`export function requireComponentDefinition(componentName: string): any {`
	`73`	`+ // eslint-disable-next-line @typescript-eslint/no-require-imports`
`72`	`74`	`return require(path.join(definitionsDir, componentName));`
`73`	`75`	`}`
`74`	`76`
`75`	`77`	`export function requireDesignTokensFile(fileName: string): any {`
	`78`	`+ // eslint-disable-next-line @typescript-eslint/no-require-imports`
`76`	`79`	`return require(path.join(designTokensDir, fileName));`
`77`	`80`	`}`
	`81`	`+`
	`82`	`+export const testIf = (condition: boolean) => (condition ? test : test.skip);`