Skip to content

Commit c911329

Browse files
Lukas742Lukas742
committed
refactor Dialog story
1 parent 5eca706 commit c911329

File tree

4 files changed

+185
-56
lines changed

4 files changed

+185
-56
lines changed

‎packages/main/src/webComponents/Dialog/Dialog.stories.mdx

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';
3+
import { Button } from '@ui5/webcomponents-react/lib/Button';
4+
import { Bar } from '@ui5/webcomponents-react/lib/Bar';
5+
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
6+
import { List } from '@ui5/webcomponents-react/lib/List';
7+
import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
8+
import { Title } from '@ui5/webcomponents-react/lib/Title';
9+
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
10+
import { Text } from '@ui5/webcomponents-react/lib/Text';
11+
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
12+
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
13+
import { CSSProperties, useRef } from 'react';
14+
15+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
16+
import { DocsHeader } from '@shared/stories/DocsHeader';
17+
18+
<Meta
19+
title="UI5 Web Components / Dialog"
20+
component={Dialog}
21+
argTypes={{
22+
...createSelectArgTypes({}),
23+
children: { control: { disable: true } },
24+
footer: { control: { disable: true } },
25+
header: { control: { disable: true } },
26+
slot: { control: { disable: true } },
27+
ref: { control: { disable: true } },
28+
style: {
29+
type: CSSProperties,
30+
description:
31+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
32+
},
33+
className: {
34+
type: 'string',
35+
description:
36+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
37+
},
38+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
39+
}}
40+
args={{
41+
style: {},
42+
className: '',
43+
tooltip: '',
44+
slot: '',
45+
ref: null
46+
}}
47+
/>
48+
49+
<DocsHeader />
50+
51+
<br />
52+
53+
### Opening Dialogs
54+
55+
`Dialogs` can only be opened by attaching a `ref` to the component and then call the corresponding **`open`** method.
56+
57+
```JSX
58+
const DialogComponent = () => {
59+
const dialogRef = useRef();
60+
const onButtonClick = () => {
61+
dialogRef.current.open();
62+
};
63+
return (
64+
<>
65+
<Button onClick={onButtonClick}>Open Dialog</Button>
66+
<Dialog ref={dialogRef}>Some Content</Dialog>
67+
</>
68+
);
69+
};
70+
```
71+
72+
<Canvas>
73+
<Story name="Default">
74+
{(args) => {
75+
const dialogRef = useRef(null);
76+
const onButtonClick = () => {
77+
dialogRef.current.open();
78+
};
79+
const handleClose = () => {
80+
dialogRef.current.close();
81+
};
82+
return (
83+
<>
84+
<Button onClick={onButtonClick}>Open Dialog</Button>
85+
<Dialog {...args} ref={dialogRef}>
86+
<FlexBox direction={FlexBoxDirection.Column}>
87+
<Text>Press "Escape" to close this Dialog.</Text>
88+
<br />
89+
<br />
90+
<FlexBox alignItems={FlexBoxAlignItems.Center}>
91+
<Text>Or click here:</Text>
92+
<Button onClick={handleClose}>Close</Button>
93+
</FlexBox>
94+
</FlexBox>
95+
</Dialog>
96+
</>
97+
);
98+
}}
99+
</Story>
100+
</Canvas>
101+
102+
<ArgsTable story="." />
103+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
104+
<h3>Structure</h3>A <code>Dialog</code> consists of a header, content, and a footer for action buttons. The{' '}
105+
<code>Dialog</code> is usually displayed at the center of the screen.
106+
</div>
107+
108+
### Using Dialogs inside other components
109+
110+
`Dialogs` are often used within other components, when opened this could sometimes have unwanted side effects.
111+
In this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `Dialog` outside of the DOM hierarchy of the parent component.
112+
113+
```JSX
114+
const DialogComponent = () => {
115+
const dialogRef = useRef(null);
116+
const onButtonClick = () => {
117+
dialogRef.current.open();
118+
};
119+
return (
120+
<>
121+
<Button onClick={onButtonClick}>Open Dialog</Button>
122+
{createPortal(<Dialog ref={dialogRef} />, document.body)}
123+
</>
124+
);
125+
};
126+
```
127+
128+
### Closing Dialogs
129+
130+
Closing `Dialogs` works in the same way as opening them. So again an attached `ref` is needed on which the corresponding `close` method is called.
131+
132+
```JSX
133+
const DialogComponent = () => {
134+
const dialogRef = useRef();
135+
const handleOpen = (e) => {
136+
dialogRef.current.open();
137+
};
138+
const handleClose = () => {
139+
dialogRef.current.close();
140+
};
141+
return (
142+
<>
143+
<Button onClick={handleOpen}>Open Dialog</Button>
144+
<Dialog ref={dialogRef}>
145+
<Button onClick={handleClose}>Close Dialog</Button>
146+
</Dialog>
147+
</>
148+
);
149+
};
150+
```
151+
152+
# Stories
153+
154+
## Dialog with content
155+
156+
<Canvas>
157+
<Story name="w/ content">
158+
{(args) => {
159+
const dialogRef = useRef(null);
160+
const onButtonClick = () => {
161+
dialogRef.current.open();
162+
};
163+
const handleClose = () => {
164+
dialogRef.current.close();
165+
};
166+
return (
167+
<>
168+
<Button onClick={onButtonClick}>Open Dialog</Button>
169+
<Dialog
170+
{...args}
171+
ref={dialogRef}
172+
header={<Bar contentMiddle={<Title>Dialog</Title>} contentRight={<Icon name="settings" />} />}
173+
footer={<Bar contentRight={<Button onClick={handleClose}>Close</Button>} />}
174+
>
175+
<List>
176+
<StandardListItem info="3">List Item 1</StandardListItem>
177+
<StandardListItem info="2">List Item 2</StandardListItem>
178+
<StandardListItem info="1">List Item 3</StandardListItem>
179+
</List>
180+
</Dialog>
181+
</>
182+
);
183+
}}
184+
</Story>
185+
</Canvas>

‎packages/main/src/webComponents/Dialog/Dialog.stories.tsx

Lines changed: 0 additions & 54 deletions
This file was deleted.

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ import '@ui5/webcomponents-icons/dist/icons/settings.js';
110110

111111
`Popovers` are often used within other components, when opened this could sometimes have unwanted side effects.
112112
In this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `Popover` outside of the DOM hierarchy of the parent component.
113-
In most cases the root node should be sufficient.
114113

115114
```JSX
116115
const PopoverComponent = () => {

‎packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
103103

104104
`ResponsivePopovers` are often used within other components, when opened this could sometimes have unwanted side effects.
105105
In this case, we recommend using [createPortal](https://reactjs.org/docs/portals.html) to mount the `ResponsivePopover` outside of the DOM hierarchy of the parent component.
106-
In most cases the root node should be sufficient.
107106

108107
```JSX
109108
const PopoverComponent = () => {

0 commit comments

Comments
 (0)