Skip to content

Commit 1ef05ec

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

File tree

16 files changed

+861
-19
lines changed

16 files changed

+861
-19
lines changed

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)