Skip to content

Commit 8dbd648

Browse files
pan-kotpan-kot
committed
chore: Drawer position and placement (internal only)
1 parent 7364de0 commit 8dbd648

File tree

17 files changed

+869
-19
lines changed

17 files changed

+869
-19
lines changed

‎pages/drawer/drawer-position-absolute.page.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useContext } from 'react';
5+
import { capitalize, range } from 'lodash';
6+
7+
import { FormField, Input } from '~components';
8+
import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
9+
10+
import AppContext, { AppContextType } from '../app/app-context';
11+
import { SimplePage } from '../app/templates';
12+
13+
const accentColor = '#6237a7';
14+
const overlayFontColor = '#ffffff';
15+
16+
type PageContext = React.Context<
17+
AppContextType<{
18+
overlayZIndex?: number;
19+
}>
20+
>;
21+
22+
export default function () {
23+
const {
24+
urlParams: { overlayZIndex = 1 },
25+
setUrlParams,
26+
} = useContext(AppContext as PageContext);
27+
return (
28+
<SimplePage
29+
title="Drawer position: absolute"
30+
subtitle="This page demonstrates drawers with absolute position."
31+
i18n={{}}
32+
screenshotArea={{}}
33+
settings={
34+
<FormField label="Overlay z-index">
35+
<Input
36+
type="number"
37+
value={overlayZIndex.toString()}
38+
onChange={({ detail }) => setUrlParams({ overlayZIndex: parseInt(detail.value) })}
39+
/>
40+
</FormField>
41+
}
42+
>
43+
<div style={{ border: `1px solid ${accentColor}`, position: 'relative' }}>
44+
<div style={{ flex: 1, padding: 16 }}>
45+
{range(0, 50).map(i => (
46+
<div key={i}>Line {i + 1}</div>
47+
))}
48+
</div>
49+
<CustomOverlay zIndex={overlayZIndex}>Custom overlay with zIndex={overlayZIndex}</CustomOverlay>
50+
<AbsoluteDrawer placement="top" offset={{ start: 200, end: 200 }} zIndex={1} contentHeight={200} />
51+
<AbsoluteDrawer placement="start" offset={{ bottom: 200 }} zIndex={2} contentWidth={200} />
52+
<AbsoluteDrawer placement="end" offset={{ bottom: 200 }} zIndex={3} contentWidth={200} />
53+
<AbsoluteDrawer placement="bottom" offset={{}} zIndex={4} contentHeight={200} />
54+
<AbsoluteDrawer placement="bottom" offset={{}} zIndex={5} contentHeight={150} />
55+
</div>
56+
</SimplePage>
57+
);
58+
}
59+
60+
function AbsoluteDrawer({
61+
placement,
62+
offset,
63+
zIndex,
64+
contentWidth,
65+
contentHeight,
66+
}: DrawerProps & { contentWidth?: number; contentHeight?: number }) {
67+
const sizeStr = contentHeight ? `height=${contentHeight}px` : `width=${contentWidth}px`;
68+
const formatOffset = (offset?: DrawerProps.Offset) => JSON.stringify(offset, null, 2).replace(/"/g, '');
69+
return (
70+
<Drawer position="absolute" placement={placement} disableContentPaddings={true} offset={offset} zIndex={zIndex}>
71+
<div style={{ boxSizing: 'border-box', padding: 16, width: contentWidth, height: contentHeight }}>
72+
{capitalize(placement)} drawer with content {sizeStr}, {`offset=${formatOffset(offset)}`}, and zIndex={zIndex}
73+
</div>
74+
</Drawer>
75+
);
76+
}
77+
78+
function CustomOverlay({ zIndex, children }: { zIndex?: number; children: React.ReactNode }) {
79+
return (
80+
<div
81+
style={{
82+
position: 'absolute',
83+
inset: 0,
84+
background: accentColor,
85+
color: overlayFontColor,
86+
opacity: 0.85,
87+
display: 'flex',
88+
alignItems: 'center',
89+
justifyContent: 'center',
90+
zIndex,
91+
}}
92+
>
93+
{children}
94+
</div>
95+
);
96+
}

‎pages/drawer/drawer-position-static.page.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useContext } from 'react';
5+
6+
import { Box, Button, ColumnLayout, SpaceBetween, Tabs } from '~components';
7+
import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
8+
9+
import AppContext, { AppContextType } from '../app/app-context';
10+
import { SimplePage } from '../app/templates';
11+
12+
const accentColor = '#6237a7';
13+
14+
type PageContext = React.Context<
15+
AppContextType<{
16+
tabId?: string;
17+
}>
18+
>;
19+
20+
function createTab(label: string, content: React.ReactNode) {
21+
return { id: label, label, content };
22+
}
23+
24+
export default function () {
25+
const {
26+
urlParams: { tabId = 'Features' },
27+
setUrlParams,
28+
} = useContext(AppContext as PageContext);
29+
return (
30+
<SimplePage
31+
title="Drawer position: static"
32+
subtitle="This page demonstrates drawers with static (default) position."
33+
i18n={{}}
34+
screenshotArea={{}}
35+
>
36+
<Tabs
37+
activeTabId={tabId}
38+
onChange={({ detail }) => setUrlParams({ tabId: detail.activeTabId })}
39+
tabs={[createTab('Features', <DrawerFeaturesTab />), createTab('Custom placement', <CustomPlacementTab />)]}
40+
/>
41+
</SimplePage>
42+
);
43+
}
44+
45+
function DrawerFeaturesTab() {
46+
return (
47+
<SpaceBetween size="s">
48+
<Box>Note: all examples in this tab use a custom wrapper around the drawer to render visible borders.</Box>
49+
<hr />
50+
<ColumnLayout columns={2}>
51+
<Box variant="p">Drawer with content and disabled content paddings.</Box>
52+
<DrawerWithBorder disableContentPaddings={true}>
53+
<SpaceBetween size="m">
54+
<Box>Content line 1</Box>
55+
<Box>Content line 2</Box>
56+
<Box>Content line 3</Box>
57+
</SpaceBetween>
58+
</DrawerWithBorder>
59+
60+
<Box variant="p">Drawer with header, content, and footer.</Box>
61+
<DrawerWithBorder header="Header" footer="Footer">
62+
Content
63+
</DrawerWithBorder>
64+
65+
<SpaceBetween size="xs">
66+
<Box variant="p">Drawer with header actions.</Box>
67+
<Box variant="p">
68+
By default, there is a reserved space next to header actions where an externally-provided close action can
69+
be rendered (using absolute positioning).
70+
</Box>
71+
</SpaceBetween>
72+
<DrawerWithBorder header="Header" headerActions={<Button>Action</Button>}>
73+
Content
74+
</DrawerWithBorder>
75+
</ColumnLayout>
76+
</SpaceBetween>
77+
);
78+
}
79+
80+
function CustomPlacementTab() {
81+
return (
82+
<SpaceBetween size="s">
83+
<Box>
84+
Statically positioned drawers can be arranged into custom layouts and wrapped into elements with absolute,
85+
sticky, or fixed position. In that case, the drawer borders are rendered by the consumers.
86+
</Box>
87+
<hr />
88+
<ColumnLayout columns={2}>
89+
<Box variant="p">Static drawers around content with custom flex layout.</Box>
90+
<div style={{ border: `2px solid ${accentColor}` }}>
91+
<div style={{ display: 'flex' }}>
92+
<div style={{ border: `2px solid ${accentColor}`, margin: `-2px 0 -2px -2px` }}>
93+
<Drawer header="Left">Left content</Drawer>
94+
</div>
95+
<div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
96+
Container content
97+
</div>
98+
<div style={{ border: `2px solid ${accentColor}`, margin: '-2px -2px -2px 0' }}>
99+
<Drawer header="Right">Right content</Drawer>
100+
</div>
101+
</div>
102+
<div style={{ border: `2px solid ${accentColor}`, margin: '0 -2px -2px -2px' }}>
103+
<Drawer header="Bottom">Bottom content</Drawer>
104+
</div>
105+
</div>
106+
107+
<Box variant="p">Custom sticky drawer at the bottom.</Box>
108+
<div style={{ border: `2px solid ${accentColor}` }}>
109+
<div style={{ height: 300, padding: 16 }}>Container content</div>
110+
<div style={{ borderTop: `2px solid ${accentColor}`, position: 'sticky', bottom: 0 }}>
111+
<Drawer header="Drawer">I am a static drawer inside a sticky wrapper.</Drawer>
112+
</div>
113+
</div>
114+
</ColumnLayout>
115+
</SpaceBetween>
116+
);
117+
}
118+
119+
function DrawerWithBorder(props: DrawerProps) {
120+
return (
121+
<div style={{ padding: 2, background: accentColor }}>
122+
<Drawer {...props} />
123+
</div>
124+
);
125+
}

‎pages/drawer/drawer-position-sticky.page.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useContext } from 'react';
5+
import { range } from 'lodash';
6+
7+
import { Box, Checkbox, SpaceBetween } from '~components';
8+
import Drawer from '~components/drawer/next';
9+
10+
import AppContext, { AppContextType } from '../app/app-context';
11+
import { SimplePage } from '../app/templates';
12+
13+
const accentColor = '#6237a7';
14+
15+
type PageContext = React.Context<
16+
AppContextType<{
17+
offsets?: boolean;
18+
stickyOffsets?: boolean;
19+
}>
20+
>;
21+
22+
export default function () {
23+
const {
24+
urlParams: { offsets = false, stickyOffsets = false },
25+
setUrlParams,
26+
} = useContext(AppContext as PageContext);
27+
const offset = offsets ? { start: 50, end: 50, top: 20, bottom: 20 } : undefined;
28+
const stickyOffset = stickyOffsets ? { top: 50, bottom: 50 } : undefined;
29+
const offsetProps = { offset, stickyOffset };
30+
return (
31+
<SimplePage
32+
title="Drawer position: sticky"
33+
subtitle="This page demonstrates drawers with sticky position. Drawers in sticky position only support top and bottom placements."
34+
i18n={{}}
35+
screenshotArea={{}}
36+
settings={
37+
<SpaceBetween size="s">
38+
<Checkbox checked={offsets} onChange={({ detail }) => setUrlParams({ offsets: detail.checked })}>
39+
Use offsets {offset && <Box variant="awsui-inline-code">{JSON.stringify(offset, null, 2)}</Box>}
40+
</Checkbox>
41+
<Checkbox checked={stickyOffsets} onChange={({ detail }) => setUrlParams({ stickyOffsets: detail.checked })}>
42+
Use sticky offsets{' '}
43+
{stickyOffset && <Box variant="awsui-inline-code">{JSON.stringify(stickyOffset, null, 2)}</Box>}
44+
</Checkbox>
45+
</SpaceBetween>
46+
}
47+
>
48+
<div style={{ border: `1px solid ${accentColor}` }}>
49+
<Drawer header="Sticky top drawer" footer="Footer" position="sticky" placement="top" {...offsetProps}>
50+
Content
51+
</Drawer>
52+
<div style={{ flex: 1, padding: 16 }}>
53+
{range(0, 100).map(i => (
54+
<div key={i}>Line {i + 1}</div>
55+
))}
56+
</div>
57+
<Drawer header="Sticky bottom drawer" footer="Footer" position="sticky" placement="bottom" {...offsetProps}>
58+
Content
59+
</Drawer>
60+
</div>
61+
</SimplePage>
62+
);
63+
}

‎pages/drawer/drawer-position-viewport.page.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useContext } from 'react';
5+
import { capitalize, range } from 'lodash';
6+
7+
import { Box, Checkbox, Select, SpaceBetween } from '~components';
8+
import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
9+
import { colorBackgroundCellShaded as contentBackgroundColor } from '~design-tokens';
10+
11+
import AppContext, { AppContextType } from '../app/app-context';
12+
import { SimplePage } from '../app/templates';
13+
14+
const accentColor = '#6237a7';
15+
const overlayFontColor = '#ffffff';
16+
17+
type PageContext = React.Context<
18+
AppContextType<{
19+
offsets?: boolean;
20+
customOverlay?: boolean;
21+
placement?: DrawerProps.Placement;
22+
}>
23+
>;
24+
25+
const placementOptions = [{ value: 'top' }, { value: 'bottom' }, { value: 'start' }, { value: 'end' }];
26+
27+
export default function () {
28+
const {
29+
urlParams: { offsets = false, customOverlay = false, placement = 'bottom' },
30+
setUrlParams,
31+
} = useContext(AppContext as PageContext);
32+
const offset = offsets ? { start: 50, end: 50, top: 50, bottom: 50 } : {};
33+
return (
34+
<SimplePage
35+
title="Drawer position: viewport"
36+
subtitle="This page demonstrates drawers with viewport (fixed) position."
37+
i18n={{}}
38+
screenshotArea={{}}
39+
>
40+
<div>
41+
{range(0, 50).map(i => (
42+
<div key={i}>Line {i + 1}</div>
43+
))}
44+
</div>
45+
46+
{customOverlay && <CustomOverlay>Custom fixed overlay</CustomOverlay>}
47+
48+
<ViewportDrawer placement={placement} disableContentPaddings={true} offset={offset}>
49+
<Checkbox checked={offsets} onChange={({ detail }) => setUrlParams({ offsets: detail.checked })}>
50+
Use offsets
51+
</Checkbox>
52+
<Checkbox checked={customOverlay} onChange={({ detail }) => setUrlParams({ customOverlay: detail.checked })}>
53+
Show custom overlay
54+
</Checkbox>
55+
<Select
56+
inlineLabelText="Placement"
57+
options={placementOptions}
58+
selectedOption={placementOptions.find(o => o.value === placement) ?? null}
59+
onChange={({ detail }) => setUrlParams({ placement: detail.selectedOption.value as DrawerProps.Placement })}
60+
/>
61+
</ViewportDrawer>
62+
</SimplePage>
63+
);
64+
}
65+
66+
function ViewportDrawer({ placement, offset, zIndex, children }: DrawerProps) {
67+
const formatOffset = (offset?: DrawerProps.Offset) => JSON.stringify(offset, null, 2).replace(/"/g, '');
68+
return (
69+
<Drawer position="viewport" placement={placement} disableContentPaddings={true} offset={offset} zIndex={zIndex}>
70+
<div
71+
style={{ boxSizing: 'border-box', padding: 16, width: 300, height: 300, background: contentBackgroundColor }}
72+
>
73+
<SpaceBetween size="xs">
74+
<Box>
75+
{capitalize(placement)} drawer with 300px/300px content and {`offset=${formatOffset(offset)}`}
76+
</Box>
77+
{children}
78+
</SpaceBetween>
79+
</div>
80+
</Drawer>
81+
);
82+
}
83+
84+
function CustomOverlay({ children }: { children: React.ReactNode }) {
85+
return (
86+
<div
87+
style={{
88+
position: 'fixed',
89+
inset: 0,
90+
background: accentColor,
91+
color: overlayFontColor,
92+
opacity: 0.85,
93+
display: 'flex',
94+
alignItems: 'center',
95+
justifyContent: 'center',
96+
}}
97+
>
98+
{children}
99+
</div>
100+
);
101+
}

0 commit comments

Comments
 (0)