chore: Allow drawer content to use full height

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

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

pages/app-layout/styles.scss

@@ -80,3 +80,32 @@
     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 {
+  background-color: peachpuff;
+  border-block-end: 2px solid grey;
+  padding-block: awsui.$space-scaled-l;
+}
+.drawer-scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  padding-block: awsui.$space-scaled-s;
+}
+.drawer-sticky-footer {
+  background-color: lightpink;
+  border-block-start: 2px solid grey;
+  padding-block: awsui.$space-scaled-s;
+}

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

@@ -4,6 +4,9 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 import range from 'lodash/range';
 
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
+
+import { Box } from '~components';
 import BreadcrumbGroup from '~components/breadcrumb-group';
 import Button from '~components/button';
 import Container from '~components/container';
@@ -12,6 +15,7 @@ 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';
 
@@ -86,3 +90,108 @@ export function Footer({ legacyConsoleNav }: { legacyConsoleNav: boolean }) {
     </>
   );
 }
+
+export function ScrollableDrawerContent({ contentType = 'text' }: { contentType?: 'text' | 'image' }) {
+  return contentType === 'image' ? (
+    <SpaceBetween size="l">
+      <div className={styles.contentPlaceholder} />
+      <div className={styles.contentPlaceholder} />
+      <div className={styles.contentPlaceholder} />
+    </SpaceBetween>
+  ) : (
+    <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>
+  );
+}
+
+export function ContentFill() {
+  return (
+    <div style={{ minBlockSize: '100%', position: 'relative' }}>
+      <div
+        style={{
+          position: 'absolute',
+          insetBlockStart: '50%',
+          insetInlineStart: '50%',
+          transform: getIsRtl(document.body) ? 'translate(50%, -50%)' : 'translate(-50%, -50%)',
+        }}
+      >
+        <Box fontSize="heading-m">
+          In Visual Refresh, there should be a cross exactly in each corner of <br />
+          the content area, without any scrollbars.
+        </Box>
+      </div>
+      <CornerMarker insetBlockStart={0} insetInlineStart={0} />
+      <CornerMarker insetBlockEnd={0} insetInlineStart={0} />
+      <CornerMarker insetBlockStart={0} insetInlineEnd={0} />
+      <CornerMarker insetBlockEnd={0} insetInlineEnd={0} />
+    </div>
+  );
+}
+
+function CornerMarker(props: {
+  insetBlockStart?: number;
+  insetInlineEnd?: number;
+  insetInlineStart?: number;
+  insetBlockEnd?: number;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 10 10"
+      style={{ inlineSize: '50px', blockSize: '50px', position: 'absolute', ...props }}
+    >
+      <line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" strokeWidth="1" />
+      <line x1="0" y1="10" x2="10" y2="0" stroke="currentColor" strokeWidth="1" />
+    </svg>
+  );
+}
+
+export function CustomDrawerContent() {
+  return (
+    <div className={styles['custom-drawer-wrapper']}>
+      <div className={styles['drawer-sticky-header']} data-testid="drawer-sticky-header">
+        <Box variant="h3" tagOverride="h2" padding="n">
+          Sticky header
+        </Box>
+      </div>
+      <div className={styles['drawer-scrollable-content']}>
+        <ScrollableDrawerContent />
+      </div>
+      <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,6 +6,8 @@ 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) => {
@@ -237,7 +239,7 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<div>global widget content circle 3 (without trigger button)</div>, container);
+    ReactDOM.render(<CustomDrawerContent />, container);
   },
   unmountContent: container => unmountComponentAtNode(container),
 });