From d3e3e65f7156db86a05e43c061d4ec6ae3605c92 Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:56:46 -0800 Subject: [PATCH 1/5] chore: Add dev pages for drawers with scrollable content --- pages/app-layout/runtime-drawers.page.tsx | 14 +- pages/app-layout/styles.scss | 28 +++ pages/app-layout/utils/content-blocks.tsx | 107 +++++++++ pages/app-layout/utils/external-widget.tsx | 4 +- .../with-drawers-scrollable.page.tsx | 226 ++++++++++++++++++ .../__integ__/awsui-applayout.test.ts | 11 +- 6 files changed, 380 insertions(+), 10 deletions(-) create mode 100644 pages/app-layout/with-drawers-scrollable.page.tsx diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx index 84bc575965..6e77c60b70 100644 --- a/pages/app-layout/runtime-drawers.page.tsx +++ b/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: , + content: , id: 'pro-help', trigger: { iconName: 'contact', @@ -102,7 +101,10 @@ export default function WithDrawers() { Use Drawers - + + + } + > + + + } + splitPanel={ + + + + + + + } + splitPanelPreferences={{ + position: urlParams.splitPanelPosition, + }} + onSplitPanelPreferencesChange={event => { + const { position } = event.detail; + setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined }); + }} + {...drawersProps} + /> + ); +} diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts index 01b318ce95..2b48762faa 100644 --- a/src/app-layout/__integ__/awsui-applayout.test.ts +++ b/src/app-layout/__integ__/awsui-applayout.test.ts @@ -19,7 +19,7 @@ class AppLayoutPage extends BasePageObject { } getNavPosition() { - return this.getBoundingBox(wrapper.findNavigation().findSideNavigation().findHeaderLink().toSelector()); + return this.getBoundingBox(wrapper.findNavigation().findSideNavigation().findItemByIndex(1).toSelector()); } getContentPosition() { @@ -188,4 +188,13 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme expect(contentTop).toEqual(expectedOffset); }) ); + + test.only( + 'Side nav does not display a scrollbar when there is no header', + setupTest({ pageName: 'with-drawers-scrollable' }, async page => { + const navBefore = await page.getNavPosition(); + await page.elementScrollTo(wrapper.findNavigation().toSelector(), { top: 100 }); + await expect(page.getNavPosition()).resolves.toEqual(navBefore); + }) + ); }); From b1a48843d9a03de94fe5e1d7b80959b7daacf60e Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Tue, 5 Nov 2024 21:13:50 -0800 Subject: [PATCH 2/5] chore: Allow drawer content to use full height --- .../__integ__/runtime-drawers.test.ts | 63 ++++++++++++++----- src/app-layout/drawer/index.tsx | 5 +- src/app-layout/drawer/styles.scss | 3 + .../visual-refresh-toolbar/compute-layout.ts | 11 +++- .../drawer/global-drawer.tsx | 12 ++-- .../drawer/local-drawer.tsx | 13 ++-- .../navigation/index.tsx | 10 +-- .../navigation/styles.scss | 4 ++ .../split-panel/index.tsx | 8 ++- src/app-layout/visual-refresh/drawers.scss | 1 + 10 files changed, 94 insertions(+), 36 deletions(-) diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/src/app-layout/__integ__/runtime-drawers.test.ts index 85ba58df97..27e098fb65 100644 --- a/src/app-layout/__integ__/runtime-drawers.test.ts +++ b/src/app-layout/__integ__/runtime-drawers.test.ts @@ -5,6 +5,7 @@ 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) => { @@ -14,19 +15,17 @@ const findDrawerContentById = (wrapper: AppLayoutWrapper, id: string) => { return wrapper.find(`[data-testid="awsui-app-layout-drawer-content-${id}"]`); }; -describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme => { - function setupTest(testFn: (page: BasePageObject) => Promise) { +describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme => { + function setupTest({ hasDrawers = 'false' }, testFn: (page: BasePageObject) => Promise) { return useBrowser(async browser => { const page = new BasePageObject(browser); await browser.url( - `#/light/app-layout/runtime-drawers?${new URLSearchParams({ - hasDrawers: 'false', + `#/light/app-layout/runtime-drawers?${getUrlParams(theme, { + hasDrawers: hasDrawers, hasTools: 'true', splitPanelPosition: 'side', - visualRefresh: `${theme !== 'classic'}`, - appLayoutToolbar: `${theme === 'refresh-toolbar'}`, - }).toString()}` + })}` ); await page.waitForVisible(wrapper.findDrawerTriggerById('security').toSelector(), true); await testFn(page); @@ -37,7 +36,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%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()); @@ -53,7 +52,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%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 @@ -64,7 +63,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%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()); @@ -76,6 +75,25 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%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); + }) + ); }); }); @@ -90,13 +108,11 @@ describe('Visual refresh toolbar only', () => { const page = new PageObject(browser); await browser.url( - `#/light/app-layout/runtime-drawers?${new URLSearchParams({ + `#/light/app-layout/runtime-drawers?${getUrlParams('refresh-toolbar', { hasDrawers: 'false', hasTools: 'true', splitPanelPosition: 'side', - visualRefresh: 'true', - appLayoutToolbar: 'true', - }).toString()}` + })}` ); await page.waitForVisible(wrapper.findDrawerTriggerById('security').toSelector(), true); await testFn(page); @@ -243,4 +259,23 @@ describe('Visual refresh toolbar only', () => { }) ); } + + test( + 'should show sticky elements on scroll in custom 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); + }) + ); }); diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx index c0398c803f..603ca23bfb 100644 --- a/src/app-layout/drawer/index.tsx +++ b/src/app-layout/drawer/index.tsx @@ -119,9 +119,12 @@ export const Drawer = React.forwardRef( > {!isMobile && !hideOpenButton && regularOpenButton} {!isMobile && isOpen &&
{resizeHandle}
} .drawer-content-wrapper[aria-hidden='false'] { + display: contents; + } } .drawer-triggers-wrapper { diff --git a/src/app-layout/visual-refresh-toolbar/compute-layout.ts b/src/app-layout/visual-refresh-toolbar/compute-layout.ts index 64e7a0e63c..bc59e06db4 100644 --- a/src/app-layout/visual-refresh-toolbar/compute-layout.ts +++ b/src/app-layout/visual-refresh-toolbar/compute-layout.ts @@ -110,10 +110,15 @@ export function computeVerticalLayout({ return { toolbar, notifications, header, drawers }; } -export function getDrawerTopOffset( +export function getDrawerStyles( verticalOffsets: VerticalLayoutOutput, isMobile: boolean, placement: AppLayoutPropsWithDefaults['placement'] -) { - return isMobile ? verticalOffsets.toolbar : verticalOffsets.drawers ?? placement.insetBlockStart; +): { + 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 }; } diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx index 71dc20b242..af16b2ce9a 100644 --- a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx +++ b/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 { getDrawerTopOffset } from '../compute-layout'; +import { getDrawerStyles } 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 drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement); + const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement); const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0; const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0; const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0; @@ -104,8 +104,8 @@ function AppLayoutGlobalDrawerImplementation({ } }} style={{ - blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`, - insetBlockStart: drawersTopOffset, + blockSize: drawerHeight, + insetBlockStart: drawerTopOffset, ...(!isMobile && { [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`, }), @@ -142,7 +142,9 @@ function AppLayoutGlobalDrawerImplementation({ variant="icon" /> -
{activeGlobalDrawer?.content}
+
+ {activeGlobalDrawer?.content} +
); diff --git a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx index 75ff267f4a..7cf2529d2f 100644 --- a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx +++ b/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 { getDrawerTopOffset } from '../compute-layout'; +import { getDrawerStyles } 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 drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement); + const { drawerTopOffset, drawerHeight } = getDrawerStyles(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: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`, - insetBlockStart: drawersTopOffset, + blockSize: drawerHeight, + insetBlockStart: drawerTopOffset, ...(!isMobile && !isLegacyDrawer && { [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`, @@ -127,11 +127,14 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD styles['drawer-content'], activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden'] )} + style={{ blockSize: drawerHeight }} > {toolsContent} {activeDrawerId !== TOOLS_DRAWER_ID && ( -
{activeDrawer?.content}
+
+ {activeDrawer?.content} +
)} diff --git a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx index 37dce24694..d4afe826da 100644 --- a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx @@ -7,7 +7,7 @@ import { findUpUntil } from '@cloudscape-design/component-toolkit/dom'; import { InternalButton } from '../../../button/internal'; import { createWidgetizedComponent } from '../../../internal/widgets'; -import { getDrawerTopOffset } from '../compute-layout'; +import { getDrawerStyles } from '../compute-layout'; import { AppLayoutInternals } from '../interfaces'; import sharedStyles from '../../resize/styles.css.js'; @@ -30,7 +30,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay verticalOffsets, } = appLayoutInternals; - const drawersTopOffset = getDrawerTopOffset(verticalOffsets, isMobile, placement); + const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement); // Close the Navigation drawer on mobile when a user clicks a link inside. const onNavigationClick = (event: React.MouseEvent) => { @@ -58,11 +58,11 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay aria-hidden={!navigationOpen} onClick={onNavigationClick} style={{ - blockSize: `calc(100vh - ${drawersTopOffset}px - ${placement.insetBlockEnd}px)`, - insetBlockStart: drawersTopOffset, + blockSize: drawerHeight, + insetBlockStart: drawerTopOffset, }} > -
+
.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-toolbar/split-panel/index.tsx b/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx index 3a27c0d5d8..32a24ffeba 100644 --- a/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/split-panel/index.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { createWidgetizedComponent } from '../../../internal/widgets'; import { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel'; +import { getDrawerStyles } from '../compute-layout'; import { AppLayoutInternals } from '../interfaces'; import styles from './styles.css.js'; @@ -19,15 +20,16 @@ export function AppLayoutSplitPanelDrawerSideImplementation({ appLayoutInternals, splitPanelInternals, }: AppLayoutSplitPanelDrawerSideImplementationProps) { - const { splitPanelControlId, placement, verticalOffsets } = appLayoutInternals; - const drawerTopOffset = verticalOffsets.drawers ?? placement.insetBlockStart; + const { splitPanelControlId, placement, verticalOffsets, isMobile } = appLayoutInternals; + const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement); + return (
diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss index 3e50af269e..6b796b3693 100644 --- a/src/app-layout/visual-refresh/drawers.scss +++ b/src/app-layout/visual-refresh/drawers.scss @@ -142,6 +142,7 @@ > .drawer-content { grid-column: 1 / span 4; + block-size: var(#{custom-props.$contentHeight}); &.drawer-content-hidden { display: none; } From 4f7836a622f7cd22ce122a7de28b694fa6d81e42 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Wed, 6 Nov 2024 12:10:19 +0100 Subject: [PATCH 3/5] Apply suggestions from code review --- src/app-layout/__integ__/awsui-applayout.test.ts | 2 +- src/app-layout/drawer/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts index 2b48762faa..6b5ec24dcf 100644 --- a/src/app-layout/__integ__/awsui-applayout.test.ts +++ b/src/app-layout/__integ__/awsui-applayout.test.ts @@ -189,7 +189,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme }) ); - test.only( + test( 'Side nav does not display a scrollbar when there is no header', setupTest({ pageName: 'with-drawers-scrollable' }, async page => { const navBefore = await page.getNavPosition(); diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx index 603ca23bfb..4119c934d1 100644 --- a/src/app-layout/drawer/index.tsx +++ b/src/app-layout/drawer/index.tsx @@ -123,7 +123,7 @@ export const Drawer = React.forwardRef( aria-label={mainLabel} aria-hidden={!isOpen} style={{ - ['blockSize']: `calc(100vh - ${(topOffset || 0) + (bottomOffset || 0)}px)`, + blockSize: `calc(100vh - ${(topOffset || 0) + (bottomOffset || 0)}px)`, }} > {!isMobile && isOpen &&
{resizeHandle}
} From d6be80252a29e382fea78bcb56820851a64160cc Mon Sep 17 00:00:00 2001 From: Jessica Kuelz <15003460+jkuelz@users.noreply.github.com> Date: Wed, 6 Nov 2024 10:29:08 -0800 Subject: [PATCH 4/5] chore: Add more to test page and fix nav motion and full-height display in all themes --- pages/app-layout/styles.scss | 5 +- pages/app-layout/utils/content-blocks.tsx | 4 +- .../with-drawers-scrollable.page.tsx | 145 +++++++++++------- src/app-layout/drawer/styles.scss | 6 +- .../navigation/index.tsx | 2 +- .../navigation/styles.scss | 5 +- src/app-layout/visual-refresh/navigation.scss | 1 + 7 files changed, 100 insertions(+), 68 deletions(-) diff --git a/pages/app-layout/styles.scss b/pages/app-layout/styles.scss index e1f6939bb8..597b003c85 100644 --- 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 index 4351fd7e19..8145c7538b 100644 --- a/pages/app-layout/utils/content-blocks.tsx +++ b/pages/app-layout/utils/content-blocks.tsx @@ -182,7 +182,9 @@ export function CustomDrawerContent() { return (
-

Header

+ + Sticky header +
diff --git a/pages/app-layout/with-drawers-scrollable.page.tsx b/pages/app-layout/with-drawers-scrollable.page.tsx index 0cab89b87d..b29765b421 100644 --- a/pages/app-layout/with-drawers-scrollable.page.tsx +++ b/pages/app-layout/with-drawers-scrollable.page.tsx @@ -19,6 +19,7 @@ import { AppLayoutProps } from '~components/app-layout'; import awsuiPlugins from '~components/internal/plugins'; import AppContext, { AppContextType } from '../app/app-context'; +import ScreenshotArea from '../utils/screenshot-area'; import { Breadcrumbs, Containers, @@ -45,9 +46,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 +63,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( + + + , + container + ); + }, + unmountContent: container => unmountComponentAtNode(container), +}); awsuiPlugins.appLayout.registerDrawer({ id: 'security', @@ -162,65 +182,74 @@ export default function WithDrawersScrollable() { }; return ( - } - navigation={sideNavContents} - ref={appLayoutRef} - content={ - -
- Testing Scrollable Drawers -
+ + } + navigation={sideNavContents} + ref={appLayoutRef} + content={ + +
+ Testing Scrollable Drawers +
- - setUrlParams({ sideNavFill: detail.checked })}> - Fill side nav content area - + + setUrlParams({ sideNavFill: detail.checked })} + data-testid="toggle-side-nav-content" + > + Fill side nav content area + - + + + } + > + + + } + splitPanel={ + + + + - } - > - - - } - splitPanel={ - - - - - - - } - splitPanelPreferences={{ - position: urlParams.splitPanelPosition, - }} - onSplitPanelPreferencesChange={event => { - const { position } = event.detail; - setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined }); - }} - {...drawersProps} - /> + + } + splitPanelPreferences={{ + position: urlParams.splitPanelPosition, + }} + onSplitPanelPreferencesChange={event => { + const { position } = event.detail; + setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined }); + }} + {...drawersProps} + /> + ); } diff --git a/src/app-layout/drawer/styles.scss b/src/app-layout/drawer/styles.scss index 0d66ad3796..bbdd100366 100644 --- 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 index d4afe826da..8658a72b14 100644 --- 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, }} > -
+