Skip to content

Commit 2137076

Browse files
ryo-manbaLFDanLu
andauthored
refactor: isolate Popover stories (#5618)
Co-authored-by: Daniel Lu <dl1644@gmail.com>
1 parent 1c141b3 commit 2137076

File tree

2 files changed

+50
-32
lines changed

2 files changed

+50
-32
lines changed
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Button, Dialog, DialogTrigger, Heading, Popover} from 'react-aria-components';
14+
import React from 'react';
15+
16+
export default {
17+
title: 'React Aria Components'
18+
};
19+
20+
export const PopoverExample = () => (
21+
<DialogTrigger>
22+
<Button>Open popover</Button>
23+
<Popover
24+
placement="bottom start"
25+
style={{
26+
background: 'Canvas',
27+
color: 'CanvasText',
28+
border: '1px solid gray',
29+
padding: 30,
30+
zIndex: 5
31+
}}>
32+
<Dialog>
33+
{({close}) => (
34+
<form style={{display: 'flex', flexDirection: 'column'}}>
35+
<Heading slot="title">Sign up</Heading>
36+
<label>
37+
First Name: <input placeholder="John" />
38+
</label>
39+
<label>
40+
Last Name: <input placeholder="Smith" />
41+
</label>
42+
<Button onPress={close} style={{marginTop: 10}}>
43+
Submit
44+
</Button>
45+
</form>
46+
)}
47+
</Dialog>
48+
</Popover>
49+
</DialogTrigger>
50+
);

packages/react-aria-components/stories/index.stories.tsx

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -389,38 +389,6 @@ export const TooltipExample = () => (
389389
</TooltipTrigger>
390390
);
391391

392-
export const PopoverExample = () => (
393-
<DialogTrigger>
394-
<Button>Open popover</Button>
395-
<Popover
396-
placement="bottom start"
397-
style={{
398-
background: 'Canvas',
399-
color: 'CanvasText',
400-
border: '1px solid gray',
401-
padding: 30,
402-
zIndex: 5
403-
}}>
404-
<Dialog>
405-
{({close}) => (
406-
<form style={{display: 'flex', flexDirection: 'column'}}>
407-
<Heading slot="title">Sign up</Heading>
408-
<label>
409-
First Name: <input placeholder="John" />
410-
</label>
411-
<label>
412-
Last Name: <input placeholder="Smith" />
413-
</label>
414-
<Button onPress={close} style={{marginTop: 10}}>
415-
Submit
416-
</Button>
417-
</form>
418-
)}
419-
</Dialog>
420-
</Popover>
421-
</DialogTrigger>
422-
);
423-
424392
export const ModalExample = () => (
425393
<DialogTrigger>
426394
<Button>Open modal</Button>

0 commit comments

Comments
 (0)