File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -7,6 +7,7 @@ import { Playground, PropsTable } from 'docz';
77import Popover from ' ./Popover' ;
88import { Button } from ' ../Button' ;
99import { Box , Spacing } from ' ../Layout' ;
10+ import { RefMeasure } from ' ../Helpers' ;
1011import { Text } from ' ../Typography' ;
1112import { Toggle } from ' react-powerplug' ;
1213
@@ -381,6 +382,45 @@ Add `isDynamicContent` to props to give time for Popover to calculate its layout
381382 </Box >
382383</Spacing >
383384
385+ ### Popover from a target node
386+
387+ <Spacing paddingY = { 10 } >
388+ <Toggle >
389+ { ({ on , toggle }) => (
390+ <RefMeasure >
391+ { ({ forwardRef , onLayout , measurements }) => {
392+ return (
393+ <>
394+ <Popover
395+ targetMeasurements = { measurements }
396+ isVisible = { on }
397+ onClose = { toggle }
398+ position = " top-right"
399+ content = {
400+ <Box backgroundColor = " white" >
401+ <Text >
402+ Long text that should be well visible and non-obstructing
403+ Long text that should be well visible and non-obstructing
404+ </Text >
405+ </Box >
406+ }
407+ />
408+ <Button
409+ onLayout = { onLayout }
410+ ref = { forwardRef }
411+ onPress = { toggle }
412+ isInline
413+ >
414+ Some Button
415+ </Button >
416+ </>
417+ );
418+ }}
419+ </RefMeasure >
420+ )}
421+ </Toggle >
422+ </Spacing >
423+
384424## Props
385425
386426<PropsTable of = { Popover } />
You can’t perform that action at this time.
0 commit comments