Skip to content

Commit fa4e540

Browse files
authored
docs(Popover): remove confusing open on hover example (#4627)
1 parent 5d5fc0f commit fa4e540

File tree

1 file changed

+0
-112
lines changed

1 file changed

+0
-112
lines changed

packages/main/src/webComponents/Popover/Popover.stories.mdx

Lines changed: 0 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -251,116 +251,4 @@ const PopoverComponent = () => {
251251
</Story>
252252
</Canvas>
253253

254-
## Popover: open on hover
255-
256-
Hover over the `MicroBarChart` to see a more detailed view.
257-
258-
<Canvas>
259-
<Story name="open on hover">
260-
{(args) => {
261-
const [popoverIsOpen, setPopoverIsOpen] = useState(false);
262-
const handleOpen = () => {
263-
setPopoverIsOpen(true);
264-
};
265-
const handleClose = () => {
266-
setPopoverIsOpen(false);
267-
};
268-
return (
269-
<>
270-
<div id="microBarChart" onMouseEnter={handleOpen} onMouseLeave={handleClose} style={{ width: '120px' }}>
271-
<MicroBarChart
272-
style={{ height: '70px' }}
273-
dimension={{
274-
accessor: 'name'
275-
}}
276-
measure={{
277-
accessor: 'data'
278-
}}
279-
dataset={[
280-
{
281-
name: 'January',
282-
data: 100
283-
},
284-
{
285-
name: 'February',
286-
data: 300
287-
},
288-
{
289-
name: 'March',
290-
data: 530
291-
}
292-
]}
293-
/>
294-
</div>
295-
<Popover {...args} open={popoverIsOpen} opener={'microBarChart'} headerText="Detailed Chart View">
296-
<BarChart
297-
style={{ height: '400px', width: '300px' }}
298-
dimensions={[
299-
{
300-
accessor: 'name'
301-
}
302-
]}
303-
measures={[
304-
{
305-
accessor: 'data'
306-
}
307-
]}
308-
dataset={[
309-
{
310-
name: 'January',
311-
data: 100
312-
},
313-
{
314-
name: 'February',
315-
data: 300
316-
},
317-
{
318-
name: 'March',
319-
data: 530
320-
},
321-
{
322-
name: 'April',
323-
data: 450
324-
},
325-
{
326-
name: 'May',
327-
data: 420
328-
},
329-
{
330-
name: 'June',
331-
data: 455
332-
},
333-
{
334-
name: 'July',
335-
data: 300
336-
},
337-
{
338-
name: 'August',
339-
data: 70
340-
},
341-
{
342-
name: 'September',
343-
data: 220
344-
},
345-
{
346-
name: 'October',
347-
data: 350
348-
},
349-
{
350-
name: 'November',
351-
data: 415
352-
},
353-
{
354-
name: 'December',
355-
data: 350
356-
}
357-
]}
358-
/>
359-
</Popover>
360-
</>
361-
);
362-
}}
363-
</Story>
364-
</Canvas>
365-
366254
<Footer />

0 commit comments

Comments
 (0)