Skip to content

Commit 848c19c

Browse files
committed
Add story to dev
1 parent 1841ecc commit 848c19c

File tree

1 file changed

+48
-1
lines changed

1 file changed

+48
-1
lines changed

packages/react/src/AnchoredOverlay/AnchoredOverlay.dev.stories.tsx

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, {useState, useRef} from 'react'
44
import {Button} from '../Button'
55
import {AnchoredOverlay} from '.'
66
import {Stack} from '../Stack'
7-
import {Dialog, Spinner, ActionList, ActionMenu} from '..'
7+
import {Dialog, Spinner, ActionList, ActionMenu, Text} from '..'
88

99
const meta = {
1010
title: 'Components/AnchoredOverlay/Dev',
@@ -309,3 +309,50 @@ export const WithActionMenu = {
309309
},
310310
},
311311
}
312+
313+
export const SmallViewportRightAligned = {
314+
render: () => {
315+
const [open, setOpen] = useState(false)
316+
317+
return (
318+
<div style={{display: 'flex', justifyContent: 'flex-end'}}>
319+
<AnchoredOverlay
320+
open={open}
321+
onOpen={() => setOpen(true)}
322+
onClose={() => setOpen(false)}
323+
renderAnchor={props => <Button {...props}>Button</Button>}
324+
overlayProps={{
325+
role: 'dialog',
326+
'aria-modal': true,
327+
'aria-label': 'Small viewport positioning test',
328+
style: {minWidth: '320px'},
329+
}}
330+
width="xlarge"
331+
focusZoneSettings={{disabled: true}}
332+
preventOverflow={false}
333+
>
334+
<div style={{padding: '16px', width: '100%', height: '400px'}}>
335+
<Stack gap="condensed">
336+
<Text weight="medium">Overlay content</Text>
337+
<Text>
338+
This overlay is wider than the available space to the left of the anchor. It should reposition to avoid
339+
overflowing the viewport.
340+
</Text>
341+
</Stack>
342+
</div>
343+
</AnchoredOverlay>
344+
</div>
345+
)
346+
},
347+
parameters: {
348+
viewport: {
349+
defaultViewport: 'small',
350+
},
351+
docs: {
352+
description: {
353+
story:
354+
'Tests overlay positioning when the trigger button is right-aligned on a small viewport. The overlay is wider than the space to the left of the anchor.',
355+
},
356+
},
357+
},
358+
}

0 commit comments

Comments
 (0)