Skip to content

Commit 4ae2831

Browse files
ktaborsktabors
authored
Popover at edges story: with h/v scrolling to test positioning and boundary offset (#5683)
* Popover at edges story: with h/v scrolling to test positioning and boundry offset * fixed duplicated import
1 parent d330a9d commit 4ae2831

File tree

1 file changed

+175
-2
lines changed

1 file changed

+175
-2
lines changed

‎packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx

Lines changed: 175 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
1717
import {ButtonGroup} from '@react-spectrum/buttongroup';
1818
import {chain} from '@react-aria/utils';
1919
import {Checkbox} from '@react-spectrum/checkbox';
20-
import {Content, Footer, Header} from '@react-spectrum/view';
20+
import {Content, Footer, Header, View} from '@react-spectrum/view';
2121
import {Divider} from '@react-spectrum/divider';
22-
import {Flex} from '@react-spectrum/layout';
22+
import {Flex, Grid} from '@react-spectrum/layout';
2323
import {Heading, Text} from '@react-spectrum/text';
2424
import {Image} from '@react-spectrum/image';
2525
import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
@@ -535,6 +535,179 @@ WithTranslations.story = {
535535
parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
536536
};
537537

538+
export const TriggersOnEdges = () => (
539+
<View width="100%" overflow="auto">
540+
<Grid
541+
areas={[
542+
'top top',
543+
'start end',
544+
'bottom bottom'
545+
]}
546+
columns={['auto', 'auto']}
547+
rows={['size-450', 'auto', 'size-450']}
548+
height="1600px"
549+
width="calc(100vw + 100px)"
550+
marginTop="20px"
551+
marginBottom="20px"
552+
gap="size-100">
553+
<View gridArea="top" justifySelf="center">
554+
<DialogTrigger type="popover" placement="end" shouldFlip={false}>
555+
<ActionButton>Trigger</ActionButton>
556+
<Dialog><Content>Placement Start</Content></Dialog>
557+
</DialogTrigger>
558+
<DialogTrigger type="popover" placement="end top" shouldFlip={false}>
559+
<ActionButton>Trigger</ActionButton>
560+
<Dialog><Content>Placement End Top</Content></Dialog>
561+
</DialogTrigger>
562+
<DialogTrigger type="popover" placement="end bottom" shouldFlip={false}>
563+
<ActionButton>Trigger</ActionButton>
564+
<Dialog><Content>Placement End Bottom</Content></Dialog>
565+
</DialogTrigger>
566+
<DialogTrigger type="popover" placement="start" shouldFlip={false}>
567+
<ActionButton>Trigger</ActionButton>
568+
<Dialog><Content>Placement End</Content></Dialog>
569+
</DialogTrigger>
570+
<DialogTrigger type="popover" placement="start top" shouldFlip={false}>
571+
<ActionButton>Trigger</ActionButton>
572+
<Dialog><Content>Placement Start Top</Content></Dialog>
573+
</DialogTrigger>
574+
<DialogTrigger type="popover" placement="start bottom" shouldFlip={false}>
575+
<ActionButton>Trigger</ActionButton>
576+
<Dialog><Content>Placement Start Bottom</Content></Dialog>
577+
</DialogTrigger>
578+
<DialogTrigger type="popover" placement="bottom" shouldFlip={false}>
579+
<ActionButton>Trigger</ActionButton>
580+
<Dialog><Content>Placement Bottom</Content></Dialog>
581+
</DialogTrigger>
582+
<DialogTrigger type="popover" shouldFlip={false}>
583+
<ActionButton>Trigger</ActionButton>
584+
<Dialog><Content>No Placement (default is bottom)</Content></Dialog>
585+
</DialogTrigger>
586+
</View>
587+
<View gridArea="start" justifySelf="start" alignSelf="center" paddingStart="20px">
588+
<DialogTrigger type="popover" placement="top" shouldFlip={false}>
589+
<ActionButton>T</ActionButton>
590+
<Dialog><Content>Placement Top</Content></Dialog>
591+
</DialogTrigger>
592+
<br />
593+
<DialogTrigger type="popover" placement="top start" shouldFlip={false}>
594+
<ActionButton>T</ActionButton>
595+
<Dialog><Content>Placement Top Start</Content></Dialog>
596+
</DialogTrigger>
597+
<br />
598+
<DialogTrigger type="popover" placement="top end" shouldFlip={false}>
599+
<ActionButton>T</ActionButton>
600+
<Dialog><Content>Placement Top End</Content></Dialog>
601+
</DialogTrigger>
602+
<br />
603+
<DialogTrigger type="popover" placement="bottom" shouldFlip={false}>
604+
<ActionButton>T</ActionButton>
605+
<Dialog><Content>Placement Bottom</Content></Dialog>
606+
</DialogTrigger>
607+
<br />
608+
<DialogTrigger type="popover" placement="bottom start" shouldFlip={false}>
609+
<ActionButton>T</ActionButton>
610+
<Dialog><Content>Placement Bottom Start</Content></Dialog>
611+
</DialogTrigger>
612+
<br />
613+
<DialogTrigger type="popover" placement="bottom end" shouldFlip={false}>
614+
<ActionButton>T</ActionButton>
615+
<Dialog><Content>Placement Bottom End</Content></Dialog>
616+
</DialogTrigger>
617+
<br />
618+
<DialogTrigger type="popover" placement="end" shouldFlip={false}>
619+
<ActionButton>T</ActionButton>
620+
<Dialog><Content>Placement End</Content></Dialog>
621+
</DialogTrigger>
622+
<br />
623+
<DialogTrigger type="popover" shouldFlip={false}>
624+
<ActionButton>Trigger</ActionButton>
625+
<Dialog><Content>No Placement (default is bottom)</Content></Dialog>
626+
</DialogTrigger>
627+
</View>
628+
<View gridArea="end" justifySelf="end" alignSelf="center" paddingEnd="20px">
629+
<DialogTrigger type="popover" placement="top" shouldFlip={false}>
630+
<ActionButton>T</ActionButton>
631+
<Dialog><Content>Placement Top</Content></Dialog>
632+
</DialogTrigger>
633+
<br />
634+
<DialogTrigger type="popover" placement="top end" shouldFlip={false}>
635+
<ActionButton>T</ActionButton>
636+
<Dialog><Content>Placement Top End</Content></Dialog>
637+
</DialogTrigger>
638+
<br />
639+
<DialogTrigger type="popover" placement="top start" shouldFlip={false}>
640+
<ActionButton>T</ActionButton>
641+
<Dialog><Content>Placement Top Start</Content></Dialog>
642+
</DialogTrigger>
643+
<br />
644+
<DialogTrigger type="popover" placement="bottom" shouldFlip={false}>
645+
<ActionButton>T</ActionButton>
646+
<Dialog><Content>Placement Bottom</Content></Dialog>
647+
</DialogTrigger>
648+
<br />
649+
<DialogTrigger type="popover" placement="bottom end" shouldFlip={false}>
650+
<ActionButton>T</ActionButton>
651+
<Dialog><Content>Placement Bottom End</Content></Dialog>
652+
</DialogTrigger>
653+
<br />
654+
<DialogTrigger type="popover" placement="bottom start" shouldFlip={false}>
655+
<ActionButton>T</ActionButton>
656+
<Dialog><Content>Placement Bottom Start</Content></Dialog>
657+
</DialogTrigger>
658+
<br />
659+
<DialogTrigger type="popover" placement="start" shouldFlip={false}>
660+
<ActionButton>T</ActionButton>
661+
<Dialog><Content>Placement Start</Content></Dialog>
662+
</DialogTrigger>
663+
<br />
664+
<DialogTrigger type="popover" shouldFlip={false}>
665+
<ActionButton>Trigger</ActionButton>
666+
<Dialog><Content>No Placement (default is bottom)</Content></Dialog>
667+
</DialogTrigger>
668+
</View>
669+
<View gridArea="bottom" justifySelf="center">
670+
<DialogTrigger type="popover" placement="end" shouldFlip={false}>
671+
<ActionButton>Trigger</ActionButton>
672+
<Dialog><Content>Placement End</Content></Dialog>
673+
</DialogTrigger>
674+
<DialogTrigger type="popover" placement="end bottom" shouldFlip={false}>
675+
<ActionButton>Trigger</ActionButton>
676+
<Dialog><Content>Placement End Bottom</Content></Dialog>
677+
</DialogTrigger>
678+
<DialogTrigger type="popover" placement="end top" shouldFlip={false}>
679+
<ActionButton>Trigger</ActionButton>
680+
<Dialog><Content>Placement End Top</Content></Dialog>
681+
</DialogTrigger>
682+
<DialogTrigger type="popover" placement="start" shouldFlip={false}>
683+
<ActionButton>Trigger</ActionButton>
684+
<Dialog><Content>Placement Start</Content></Dialog>
685+
</DialogTrigger>
686+
<DialogTrigger type="popover" placement="start bottom" shouldFlip={false}>
687+
<ActionButton>Trigger</ActionButton>
688+
<Dialog><Content>Placement Start Bottom</Content></Dialog>
689+
</DialogTrigger>
690+
<DialogTrigger type="popover" placement="start top" shouldFlip={false}>
691+
<ActionButton>Trigger</ActionButton>
692+
<Dialog><Content>Placement Start top</Content></Dialog>
693+
</DialogTrigger>
694+
<DialogTrigger type="popover" placement="top" shouldFlip={false}>
695+
<ActionButton>Trigger</ActionButton>
696+
<Dialog><Content>Placement top</Content></Dialog>
697+
</DialogTrigger>
698+
<DialogTrigger type="popover" shouldFlip={false}>
699+
<ActionButton>Trigger</ActionButton>
700+
<Dialog><Content>No Placement (default is bottom)</Content></Dialog>
701+
</DialogTrigger>
702+
</View>
703+
</Grid>
704+
</View>
705+
);
706+
707+
TriggersOnEdges.story = {
708+
name: 'popover triggers on edges'
709+
};
710+
538711
function render(props) {
539712
let {width = 'auto', ...otherProps} = props;
540713

0 commit comments

Comments
 (0)