revert: Extra scrollbars in drawers (#2940)

pages/app-layout/runtime-drawers.page.tsx

@@ -6,6 +6,7 @@ import {
   AppLayout,
   Button,
   ContentLayout,
+  Drawer,
   Header,
   HelpPanel,
   Link,
@@ -18,7 +19,7 @@ import awsuiPlugins from '~components/internal/plugins';
 
 import './utils/external-widget';
 import AppContext, { AppContextType } from '../app/app-context';
-import { Breadcrumbs, Containers, CustomDrawerContent } from './utils/content-blocks';
+import { Breadcrumbs, Containers } from './utils/content-blocks';
 import appLayoutLabels from './utils/labels';
 
 type DemoContext = React.Context<
@@ -101,10 +102,7 @@ export default function WithDrawers() {
                   Use Drawers
                 </Toggle>
 
-                <Button
-                  onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}
-                  data-testid="open-drawer-button"
-                >
+                <Button onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}>
                   Open a drawer without a trigger
                 </Button>
                 <Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
@@ -175,5 +173,5 @@ function Info({ helpPathSlug }: { helpPathSlug: string }) {
 }
 
 function ProHelp() {
-  return <CustomDrawerContent />;
+  return <Drawer header={<h2>Pro Help</h2>}>Need some Pro Help? We got you.</Drawer>;
 }

pages/app-layout/styles.scss

@@ -80,29 +80,3 @@
     margin-block-start: 4rem;
   }
 }
-
-.custom-drawer-wrapper {
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
-  overflow-y: hidden;
-}
-
-.drawer-sticky-header,
-.drawer-scrollable-content,
-.drawer-sticky-footer {
-  padding-inline: 24px;
-}
-
-.drawer-sticky-header {
-  border-block-end: 2px solid grey;
-}
-.drawer-scrollable-content {
-  flex: 1;
-  overflow-y: auto;
-  padding-block: 8px;
-}
-.drawer-sticky-footer {
-  border-block-start: 2px solid grey;
-  padding-block: 16px;
-}

pages/app-layout/utils/content-blocks.tsx

@@ -12,7 +12,6 @@ import Header from '~components/header';
 import HelpPanel from '~components/help-panel';
 import SideNavigation from '~components/side-navigation';
 import SpaceBetween from '~components/space-between';
-import TextContent from '~components/text-content';
 
 import styles from '../styles.scss';
 
@@ -87,58 +86,3 @@ export function Footer({ legacyConsoleNav }: { legacyConsoleNav: boolean }) {
     </>
   );
 }
-
-export function ScrollableDrawerContent() {
-  return (
-    <div className={styles['drawer-scrollable-content']}>
-      <TextContent>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Augue neque gravida in fermentum. Suspendisse sed nisi lacus sed viverra tellus in hac. Nec
-          sagittis aliquam malesuada bibendum arcu vitae elementum. Lectus proin nibh nisl condimentum id venenatis.
-          Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Nisi porta lorem mollis aliquam ut
-          porttitor leo a. Facilisi morbi tempus iaculis urna. Odio tempor orci dapibus ultrices in iaculis nunc.
-        </p>
-        <div data-testid="scroll-me">The end</div>
-        <p>
-          Ut diam quam nulla porttitor massa id neque. Duis at tellus at urna condimentum mattis pellentesque id nibh.
-          Metus vulputate eu scelerisque felis imperdiet proin fermentum.
-        </p>
-        <h3>Another h3</h3>
-        <p>
-          Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Varius quam quisque id diam
-          vel. Risus viverra adipiscing at in. Orci sagittis eu volutpat odio facilisis mauris. Mauris vitae ultricies
-          leo integer malesuada nunc. Sem et tortor consequat id porta nibh. Semper auctor neque vitae tempus quam
-          pellentesque.
-        </p>
-        <p>Ante in nibh mauris cursus mattis molestie.</p>
-        <p>
-          Pharetra et ultrices neque ornare. Bibendum neque egestas congue quisque egestas diam in arcu cursus.
-          Porttitor eget dolor morbi non arcu risus quis. Integer quis auctor elit sed vulputate mi sit. Mauris nunc
-          congue nisi vitae suscipit tellus mauris a diam. Diam donec adipiscing tristique risus nec feugiat in. Arcu
-          felis bibendum ut tristique et egestas quis. Nulla porttitor massa id neque aliquam vestibulum morbi blandit.
-          In hac habitasse platea dictumst quisque sagittis. Sollicitudin tempor id eu nisl nunc mi ipsum. Ornare aenean
-          euismod elementum nisi quis. Elementum curabitur vitae nunc sed velit dignissim sodales. Amet tellus cras
-          adipiscing enim eu. Id interdum velit laoreet id donec ultrices tincidunt. Ullamcorper eget nulla facilisi
-          etiam. Sodales neque sodales ut etiam sit amet nisl purus. Auctor urna nunc id cursus metus aliquam eleifend
-          mi in. Urna condimentum mattis pellentesque id. Porta lorem mollis aliquam ut porttitor leo a. Lectus quam id
-          leo in vitae turpis massa sed. Pharetra pharetra massa massa ultricies mi.
-        </p>
-      </TextContent>
-    </div>
-  );
-}
-
-export function CustomDrawerContent() {
-  return (
-    <div className={styles['custom-drawer-wrapper']}>
-      <div className={styles['drawer-sticky-header']} data-testid="drawer-sticky-header">
-        <h2>Header</h2>
-      </div>
-      <ScrollableDrawerContent />
-      <div className={styles['drawer-sticky-footer']} data-testid="drawer-sticky-footer">
-        <p>This is a sticky footer, it should always be visisble when the panel is open.</p>
-      </div>
-    </div>
-  );
-}

pages/app-layout/utils/external-widget.tsx

@@ -6,8 +6,6 @@ import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 import Drawer from '~components/drawer';
 import awsuiPlugins from '~components/internal/plugins';
 
-import { CustomDrawerContent } from './content-blocks';
-
 const searchParams = new URL(location.hash.substring(1), location.href).searchParams;
 
 const Content = React.forwardRef((props, ref) => {
@@ -235,7 +233,7 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<CustomDrawerContent />, container);
+    ReactDOM.render(<div>global widget content circle 3 (without trigger button)</div>, container);
   },
   unmountContent: container => unmountComponentAtNode(container),
 });

src/app-layout/__integ__/runtime-drawers.test.ts

@@ -5,24 +5,25 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/selectors';
 import { viewports } from './constants';
-import { getUrlParams, Theme } from './utils';
 
 const wrapper = createWrapper().findAppLayout();
 const findDrawerById = (wrapper: AppLayoutWrapper, id: string) => {
   return wrapper.find(`[data-testid="awsui-app-layout-drawer-${id}"]`);
 };
 
-describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
-  function setupTest({ hasDrawers = 'false' }, testFn: (page: BasePageObject) => Promise<void>) {
+describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme => {
+  function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
     return useBrowser(async browser => {
       const page = new BasePageObject(browser);
 
       await browser.url(
-        `#/light/app-layout/runtime-drawers?${getUrlParams(theme, {
-          hasDrawers: hasDrawers,
+        `#/light/app-layout/runtime-drawers?${new URLSearchParams({
+          hasDrawers: 'false',
           hasTools: 'true',
           splitPanelPosition: 'side',
-        })}`
+          visualRefresh: `${theme !== 'classic'}`,
+          appLayoutToolbar: `${theme === 'refresh-toolbar'}`,
+        }).toString()}`
       );
       await page.waitForVisible(wrapper.findDrawerTriggerById('security').toSelector(), true);
       await testFn(page);
@@ -33,7 +34,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
   describe('desktop', () => {
     test(
       'should resize equally with tools or drawers',
-      setupTest({}, async page => {
+      setupTest(async page => {
         await page.setWindowSize({ ...viewports.desktop, width: 1800 });
         await page.click(wrapper.findToolsToggle().toSelector());
         await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
@@ -49,7 +50,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
 
     test(
       'renders according to defaultSize property',
-      setupTest({}, async page => {
+      setupTest(async page => {
         await page.setWindowSize(viewports.desktop);
         await page.click(wrapper.findDrawerTriggerById('security').toSelector());
         // using `clientWidth` to neglect possible border width set on this element
@@ -60,7 +61,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
 
     test(
       'should call resize handler',
-      setupTest({}, async page => {
+      setupTest(async page => {
         await page.setWindowSize(viewports.desktop);
         // close navigation panel to give drawer more room to resize
         await page.click(wrapper.findNavigationClose().toSelector());
@@ -72,25 +73,6 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
         await expect(page.getText('[data-testid="current-size"]')).resolves.toEqual('resized: true');
       })
     );
-
-    test(
-      'should show sticky elements on scroll in drawer',
-      setupTest({ hasDrawers: 'true' }, async page => {
-        await page.setWindowSize(viewports.desktop);
-        await page.waitForVisible(wrapper.findDrawerTriggerById('pro-help').toSelector(), true);
-
-        await expect(page.isDisplayed('[data-testid="drawer-sticky-footer"]')).resolves.toBe(false);
-        await page.click(wrapper.findDrawerTriggerById('pro-help').toSelector());
-        await expect(page.isDisplayed('[data-testid="drawer-sticky-footer"]')).resolves.toBe(true);
-
-        const getScrollPosition = () => page.getBoundingBox('[data-testid="drawer-sticky-header"]');
-        const scrollBefore = await getScrollPosition();
-
-        await page.elementScrollTo(wrapper.findActiveDrawer().toSelector(), { top: 100 });
-        await expect(getScrollPosition()).resolves.toEqual(scrollBefore);
-        await expect(page.isDisplayed('[data-testid="drawer-sticky-header"]')).resolves.toBe(true);
-      })
-    );
   });
 });
 
@@ -105,11 +87,13 @@ describe('Visual refresh toolbar only', () => {
       const page = new PageObject(browser);
 
       await browser.url(
-        `#/light/app-layout/runtime-drawers?${getUrlParams('refresh-toolbar', {
+        `#/light/app-layout/runtime-drawers?${new URLSearchParams({
           hasDrawers: 'false',
           hasTools: 'true',
           splitPanelPosition: 'side',
-        })}`
+          visualRefresh: 'true',
+          appLayoutToolbar: 'true',
+        }).toString()}`
       );
       await page.waitForVisible(wrapper.findDrawerTriggerById('security').toSelector(), true);
       await testFn(page);
@@ -237,23 +221,4 @@ describe('Visual refresh toolbar only', () => {
       await expect(page.hasHorizontalScroll()).resolves.toBe(false);
     })
   );
-
-  test(
-    'should show sticky elements on scroll in global drawer',
-    setupTest(async page => {
-      await page.setWindowSize(viewports.desktop);
-      await expect(page.isDisplayed('[data-testid="drawer-sticky-footer"]')).resolves.toBe(false);
-
-      await page.click(createWrapper().findButton('[data-testid="open-drawer-button"]').toSelector());
-      await page.waitForVisible(findDrawerById(wrapper, 'circle4-global')!.toSelector(), true);
-      await expect(page.isDisplayed('[data-testid="drawer-sticky-footer"]')).resolves.toBe(true);
-
-      const getScrollPosition = () => page.getBoundingBox('[data-testid="drawer-sticky-header"]');
-      const scrollBefore = await getScrollPosition();
-
-      await page.elementScrollTo(wrapper.findActiveDrawer().toSelector(), { top: 100 });
-      await expect(getScrollPosition()).resolves.toEqual(scrollBefore);
-      await expect(page.isDisplayed('[data-testid="drawer-sticky-header"]')).resolves.toBe(true);
-    })
-  );
 });

src/app-layout/drawer/index.tsx

@@ -122,9 +122,6 @@ export const Drawer = React.forwardRef(
             className={clsx(resizeHandle && styles['drawer-resize-content'])}
             aria-label={mainLabel}
             aria-hidden={!isOpen}
-            style={{
-              ['blockSize']: `calc(100vh - ${(topOffset || 0) + (bottomOffset || 0)}px)`,
-            }}
           >
             {!isMobile && isOpen && <div className={styles['resize-handle-wrapper']}>{resizeHandle}</div>}
             <CloseButton

src/app-layout/resize/styles.scss

@@ -10,7 +10,7 @@
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     @include styles.with-motion {
       transition: awsui.$motion-duration-refresh-only-medium;
-      transition-property: border-color, opacity, inline-size, inset-block-start;
+      transition-property: border-color, opacity, block-size, inline-size, inset-block-start;
     }
   }
 }

src/app-layout/visual-refresh-toolbar/compute-layout.ts

@@ -110,15 +110,10 @@ export function computeVerticalLayout({
   return { toolbar, notifications, header, drawers };
 }
 
-export function getDrawerStyles(
+export function getDrawerTopOffset(
   verticalOffsets: VerticalLayoutOutput,
   isMobile: boolean,
   placement: AppLayoutPropsWithDefaults['placement']
-): {
-  drawerTopOffset: number;
-  drawerHeight: string;
-} {
-  const drawerTopOffset = isMobile ? verticalOffsets.toolbar : verticalOffsets.drawers ?? placement.insetBlockStart;
-  const drawerHeight = `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`;
-  return { drawerTopOffset, drawerHeight };
+) {
+  return isMobile ? verticalOffsets.toolbar : verticalOffsets.drawers ?? placement.insetBlockStart;
 }

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

@@ -10,7 +10,7 @@ import { NonCancelableEventHandler } from '../../../internal/events';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
 import { AppLayoutProps } from '../../interfaces';
-import { getDrawerStyles } from '../compute-layout';
+import { getDrawerTopOffset } from '../compute-layout';
 import { AppLayoutInternals } from '../interfaces';
 import { useResize } from './use-resize';
 
@@ -52,7 +52,7 @@ function AppLayoutGlobalDrawerImplementation({
     content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
   };
 
-  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);
   const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;
   const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;
   const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;
@@ -98,8 +98,8 @@ function AppLayoutGlobalDrawerImplementation({
               }
             }}
             style={{
-              blockSize: drawerHeight,
-              insetBlockStart: drawerTopOffset,
+              blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
+              insetBlockStart: drawersTopOffset,
               ...(!isMobile && {
                 [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
               }),
@@ -133,9 +133,7 @@ function AppLayoutGlobalDrawerImplementation({
                   variant="icon"
                 />
               </div>
-              <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
-                {activeGlobalDrawer?.content}
-              </div>
+              <div className={styles['drawer-content']}>{activeGlobalDrawer?.content}</div>
             </div>
           </aside>
         );

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

@@ -10,7 +10,7 @@ import customCssProps from '../../../internal/generated/custom-css-properties';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { getLimitedValue } from '../../../split-panel/utils/size-utils';
 import { TOOLS_DRAWER_ID } from '../../utils/use-drawers';
-import { getDrawerStyles } from '../compute-layout';
+import { getDrawerTopOffset } from '../compute-layout';
 import { AppLayoutInternals } from '../interfaces';
 import { useResize } from './use-resize';
 
@@ -46,7 +46,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
     content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
   };
 
-  const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
+  const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement);
   const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;
   const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID || toolsOnlyMode;
   const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;
@@ -85,8 +85,8 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
             }
           }}
           style={{
-            blockSize: drawerHeight,
-            insetBlockStart: drawerTopOffset,
+            blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`,
+            insetBlockStart: drawersTopOffset,
             ...(!isMobile &&
               !isLegacyDrawer && {
                 [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
@@ -131,9 +131,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
               {toolsContent}
             </div>
             {activeDrawerId !== TOOLS_DRAWER_ID && (
-              <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
-                {activeDrawer?.content}
-              </div>
+              <div className={styles['drawer-content']}>{activeDrawer?.content}</div>
             )}
           </div>
         </aside>