chore: Add more to test page and fix nav motion and full-height displ…

…ay in all themes
cloudscape-design · Nov 6, 2024 · 6c3925c · 6c3925c
1 parent 186e838
commit 6c3925c
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 13 deletions.
diff --git a/pages/app-layout/styles.scss b/pages/app-layout/styles.scss
@@ -97,14 +97,15 @@
 .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: 8px;
+  padding-block: awsui.$space-scaled-s;
 }
 .drawer-sticky-footer {
   background-color: lightpink;
   border-block-start: 2px solid grey;
-  padding-block: 12px;
+  padding-block: awsui.$space-scaled-s;
 }
diff --git a/pages/app-layout/utils/content-blocks.tsx b/pages/app-layout/utils/content-blocks.tsx
@@ -182,7 +182,9 @@ export function CustomDrawerContent() {
   return (
     <div className={styles['custom-drawer-wrapper']}>
       <div className={styles['drawer-sticky-header']} data-testid="drawer-sticky-header">
-        <h2>Header</h2>
+        <Box variant="h3" tagOverride="h2" padding="n">
+          Sticky header
+        </Box>
       </div>
       <div className={styles['drawer-scrollable-content']}>
         <ScrollableDrawerContent />

diff --git a/pages/app-layout/with-drawers-scrollable.page.tsx b/pages/app-layout/with-drawers-scrollable.page.tsx
@@ -45,9 +45,9 @@ const getAriaLabels = (title: string) => {
 };
 
 awsuiPlugins.appLayout.registerDrawer({
-  id: 'circle',
+  id: 'circle1-global',
   type: 'global',
-  ariaLabels: getAriaLabels('global drawer'),
+  ariaLabels: getAriaLabels('global drawer 1'),
   defaultActive: true,
   resizable: true,
   defaultSize: 320,
@@ -62,6 +62,25 @@ awsuiPlugins.appLayout.registerDrawer({
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'circle2-global',
+  type: 'global',
+  defaultActive: false,
+  resizable: true,
+  defaultSize: 320,
+
+  ariaLabels: getAriaLabels('global drawer 2'),
+
+  mountContent: container => {
+    ReactDOM.render(
+      <Drawer header="Global drawer">
+        <ScrollableDrawerContent contentType="text" />
+      </Drawer>,
+      container
+    );
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
 
 awsuiPlugins.appLayout.registerDrawer({
   id: 'security',
@@ -181,7 +200,7 @@ export default function WithDrawersScrollable() {
                   Fill side nav content area
                 </Toggle>
 
-                <Button onClick={() => awsuiPlugins.appLayout.openDrawer('circle1-global')}>
+                <Button onClick={() => awsuiPlugins.appLayout.openDrawer('circle2-global')}>
                   Open a drawer without a trigger
                 </Button>
               </SpaceBetween>

diff --git a/src/app-layout/drawer/styles.scss b/src/app-layout/drawer/styles.scss
@@ -36,6 +36,8 @@
   position: fixed;
   overflow: auto;
   background-color: awsui.$color-background-layout-panel-content;
+  display: flex;
+  flex-direction: column;
   .drawer-mobile > & {
     z-index: constants.$drawer-z-index-mobile;
     inset: 0;
@@ -58,8 +60,8 @@
     block-size: 100%;
     position: relative;
   }
-  > .drawer-content-wrapper[aria-hidden='false'] {
-    display: contents;
+  > .drawer-content-wrapper {
+    flex: 1;
   }
 }
 

diff --git a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
@@ -62,7 +62,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
         insetBlockStart: drawerTopOffset,
       }}
     >
-      <div className={clsx(styles['content-container'], styles['animated-content'])}>
+      <div className={styles['animated-content']}>
         <div className={clsx(styles['hide-navigation'])}>
           <InternalButton
             ariaLabel={ariaLabels?.navigationClose ?? undefined}

diff --git a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
@@ -20,6 +20,7 @@
   overscroll-behavior-y: contain;
   word-wrap: break-word;
   pointer-events: auto;
+  display: flex;
 
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
@@ -28,10 +29,6 @@
     display: none;
   }
 
-  &.is-navigation-open > .content-container {
-    display: contents;
-  }
-
   /*
   A non-semantic node is added with a fixed width equal to the final Navigation
   width. This will create the visual appearance of horizontal movement and

diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
@@ -93,6 +93,7 @@ nav.navigation {
   word-wrap: break-word;
   pointer-events: auto;
   border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  display: flex;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {