Skip to content

Commit 4b97feb

Browse files
committed
feat: update docs. release refMeasure and target node from popover
1 parent 645335a commit 4b97feb

1 file changed

Lines changed: 40 additions & 0 deletions

File tree

src/components/Popover/Popover.mdx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Playground, PropsTable } from 'docz';
77
import Popover from './Popover';
88
import { Button } from '../Button';
99
import { Box, Spacing } from '../Layout';
10+
import { RefMeasure } from '../Helpers';
1011
import { Text } from '../Typography';
1112
import { 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} />

0 commit comments

Comments
 (0)