Skip to content

Commit 378b630

Browse files
minheqminheq
committed
feat: popover support for dynamic sizes and small screens
1 parent b3e0870 commit 378b630

2 files changed

Lines changed: 275 additions & 39 deletions

File tree

‎src/components/Popover/Popover.mdx‎

Lines changed: 187 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { Toggle } from 'react-powerplug';
1212

1313
## Usage
1414

15-
### Popovers
15+
### Popovers with fixed width and height content
1616

17-
<Spacing paddingBottom={18} zIndex={1}>
17+
<Spacing paddingBottom={8} zIndex={1}>
1818
<Box flexDirection="row" justifyContent="space-between">
1919
<Toggle>
2020
{({ on, toggle }) => (
@@ -79,7 +79,7 @@ import { Toggle } from 'react-powerplug';
7979
</Box>
8080
</Spacing>
8181

82-
<Spacing paddingY={18} zIndex={2}>
82+
<Spacing paddingY={8} zIndex={2}>
8383
<Box flexDirection="row" justifyContent="space-between">
8484
<Toggle>
8585
{({ on, toggle }) => (
@@ -124,7 +124,7 @@ import { Toggle } from 'react-powerplug';
124124
</Box>
125125
</Spacing>
126126

127-
<Spacing paddingTop={18} zIndex={3}>
127+
<Spacing paddingTop={8} zIndex={3}>
128128
<Box flexDirection="row" justifyContent="space-between">
129129
<Toggle>
130130
{({ on, toggle }) => (
@@ -188,6 +188,189 @@ import { Toggle } from 'react-powerplug';
188188
</Box>
189189
</Spacing>
190190

191+
### Popovers with dynamic width and height content
192+
193+
<Spacing paddingBottom={8} zIndex={1}>
194+
<Box flexDirection="row" justifyContent="space-between">
195+
<Toggle>
196+
{({ on, toggle }) => (
197+
<Popover
198+
isVisible={on}
199+
onClose={toggle}
200+
position="top-right"
201+
content={
202+
<Box backgroundColor="white">
203+
<Text>
204+
Long text that should be well visible and non-obstructing Long
205+
text that should be well visible and non-obstructing
206+
</Text>
207+
</Box>
208+
}
209+
>
210+
<Button onPress={toggle} isInline>
211+
Top right
212+
</Button>
213+
</Popover>
214+
)}
215+
</Toggle>
216+
<Toggle>
217+
{({ on, toggle }) => (
218+
<Popover
219+
isVisible={on}
220+
onClose={toggle}
221+
position="top"
222+
content={
223+
<Box backgroundColor="white">
224+
<Text>
225+
Long text that should be well visible and non-obstructing Long
226+
text that should be well visible and non-obstructing
227+
</Text>
228+
</Box>
229+
}
230+
>
231+
<Button onPress={toggle} isInline>
232+
Top
233+
</Button>
234+
</Popover>
235+
)}
236+
</Toggle>
237+
<Toggle>
238+
{({ on, toggle }) => (
239+
<Popover
240+
isVisible={on}
241+
onClose={toggle}
242+
position="top-left"
243+
content={
244+
<Box backgroundColor="white">
245+
<Text>
246+
Long text that should be well visible and non-obstructing Long
247+
text that should be well visible and non-obstructing
248+
</Text>
249+
</Box>
250+
}
251+
>
252+
<Button onPress={toggle} isInline>
253+
Top left
254+
</Button>
255+
</Popover>
256+
)}
257+
</Toggle>
258+
</Box>
259+
</Spacing>
260+
261+
<Spacing paddingY={8} zIndex={2}>
262+
<Box flexDirection="row" justifyContent="space-between">
263+
<Toggle>
264+
{({ on, toggle }) => (
265+
<Popover
266+
isVisible={on}
267+
onClose={toggle}
268+
position="left"
269+
content={
270+
<Box backgroundColor="white">
271+
<Text>
272+
Long text that should be well visible and non-obstructing Long
273+
text that should be well visible and non-obstructing
274+
</Text>
275+
</Box>
276+
}
277+
>
278+
<Button onPress={toggle} isInline>
279+
Left
280+
</Button>
281+
</Popover>
282+
)}
283+
</Toggle>
284+
<Toggle>
285+
{({ on, toggle }) => (
286+
<Popover
287+
isVisible={on}
288+
onClose={toggle}
289+
position="right"
290+
content={
291+
<Box backgroundColor="white">
292+
<Text>
293+
Long text that should be well visible and non-obstructing Long
294+
text that should be well visible and non-obstructing
295+
</Text>
296+
</Box>
297+
}
298+
>
299+
<Button onPress={toggle} isInline>
300+
Right
301+
</Button>
302+
</Popover>
303+
)}
304+
</Toggle>
305+
</Box>
306+
</Spacing>
307+
308+
<Spacing paddingTop={8} zIndex={3}>
309+
<Box flexDirection="row" justifyContent="space-between">
310+
<Toggle>
311+
{({ on, toggle }) => (
312+
<Popover
313+
isVisible={on}
314+
onClose={toggle}
315+
position="bottom-right"
316+
content={
317+
<Box backgroundColor="white">
318+
<Text>
319+
Long text that should be well visible and non-obstructing Long
320+
text that should be well visible and non-obstructing
321+
</Text>
322+
</Box>
323+
}
324+
>
325+
<Button onPress={toggle} isInline>
326+
Bottom right
327+
</Button>
328+
</Popover>
329+
)}
330+
</Toggle>
331+
<Toggle>
332+
{({ on, toggle }) => (
333+
<Popover
334+
isVisible={on}
335+
onClose={toggle}
336+
position="bottom"
337+
parentHeight={2480}
338+
content={
339+
<Box backgroundColor="white">
340+
<Text>This has parent height set to 2480</Text>
341+
</Box>
342+
}
343+
>
344+
<Button onPress={toggle} isInline>
345+
Bottom
346+
</Button>
347+
</Popover>
348+
)}
349+
</Toggle>
350+
<Toggle>
351+
{({ on, toggle }) => (
352+
<Popover
353+
isVisible={on}
354+
onClose={toggle}
355+
position="bottom-left"
356+
content={
357+
<Box backgroundColor="white">
358+
<Text>
359+
Long text that should be well visible and non-obstructing Long
360+
text that should be well visible and non-obstructing
361+
</Text>
362+
</Box>
363+
}
364+
>
365+
<Button onPress={toggle} isInline>
366+
Bottom left
367+
</Button>
368+
</Popover>
369+
)}
370+
</Toggle>
371+
</Box>
372+
</Spacing>
373+
191374
## Props
192375

193376
<PropsTable of={Popover} />

0 commit comments

Comments
 (0)