Skip to content

Commit f524ff3

Browse files
Lukas742Lukas742
committed
revise popover stories, add story to Popover component
1 parent c911329 commit f524ff3

File tree

3 files changed

+125
-22
lines changed

3 files changed

+125
-22
lines changed

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

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { Icon } from '@ui5/webcomponents-react/lib/Icon';
66
import { List } from '@ui5/webcomponents-react/lib/List';
77
import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
88
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';
139
import { CSSProperties, useRef } from 'react';
14-
1510
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1611
import { DocsHeader } from '@shared/stories/DocsHeader';
1712

@@ -20,7 +15,6 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
2015
component={Dialog}
2116
argTypes={{
2217
...createSelectArgTypes({}),
23-
children: { control: { disable: true } },
2418
footer: { control: { disable: true } },
2519
header: { control: { disable: true } },
2620
slot: { control: { disable: true } },
@@ -38,6 +32,8 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
3832
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
3933
}}
4034
args={{
35+
children: 'Press "Escape" to close the Dialog.',
36+
headerText: 'Dialog Header',
4137
style: {},
4238
className: '',
4339
tooltip: '',
@@ -82,17 +78,7 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
8278
return (
8379
<>
8480
<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>
81+
<Dialog {...args} ref={dialogRef} footer={<Button onClick={handleClose}>Close</Button>} />
9682
</>
9783
);
9884
}}
@@ -154,7 +140,7 @@ Closing `Dialogs` works in the same way as opening them. So again an attached `r
154140
## Dialog with content
155141

156142
<Canvas>
157-
<Story name="w/ content">
143+
<Story name="with content">
158144
{(args) => {
159145
const dialogRef = useRef(null);
160146
const onButtonClick = () => {

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

Lines changed: 117 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { List } from '@ui5/webcomponents-react/lib/List';
1111
import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
1212
import { CSSProperties, useRef } from 'react';
1313
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
14+
import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';
15+
import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
1416
import { DocsHeader } from '@shared/stories/DocsHeader';
1517
import '@ui5/webcomponents-icons/dist/icons/settings.js';
1618

@@ -25,7 +27,6 @@ import '@ui5/webcomponents-icons/dist/icons/settings.js';
2527
}),
2628
footer: { control: { disable: true } },
2729
header: { control: { disable: true } },
28-
children: { control: { disable: true } },
2930
slot: { control: { disable: true } },
3031
ref: { control: { disable: true } },
3132
style: {
@@ -41,6 +42,8 @@ import '@ui5/webcomponents-icons/dist/icons/settings.js';
4142
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
4243
}}
4344
args={{
45+
children: 'Press "Escape" or click outside to close the Popover.',
46+
headerText: 'Popover Header',
4447
horizontalAlign: PopoverHorizontalAlign.Center,
4548
placementType: PlacementType.Right,
4649
verticalAlign: PopoverVerticalAlign.Center,
@@ -155,7 +158,7 @@ Closing `Popovers` works in the same way as opening them. So again an attached `
155158
## Popover with content
156159

157160
<Canvas>
158-
<Story name="w/ content">
161+
<Story name="with content">
159162
{(args) => {
160163
const popoverRef = useRef(null);
161164
const onButtonClick = (e) => {
@@ -184,3 +187,115 @@ Closing `Popovers` works in the same way as opening them. So again an attached `
184187
}}
185188
</Story>
186189
</Canvas>
190+
191+
## Popover: open on hover
192+
193+
Hover over the `MicroBarChart` to see a more detailed view.
194+
195+
<Canvas>
196+
<Story name="open on hover">
197+
{(args) => {
198+
const popoverRef = useRef(null);
199+
const handleOpen = (e) => {
200+
popoverRef.current.openBy(e.target);
201+
};
202+
const handleClose = () => {
203+
popoverRef.current.close();
204+
};
205+
return (
206+
<>
207+
<div onMouseEnter={handleOpen} onMouseLeave={handleClose} style={{ width: '120px' }}>
208+
<MicroBarChart
209+
style={{ height: '70px' }}
210+
dimension={{
211+
accessor: 'name'
212+
}}
213+
measure={{
214+
accessor: 'data'
215+
}}
216+
dataset={[
217+
{
218+
name: 'January',
219+
data: 100
220+
},
221+
{
222+
name: 'February',
223+
data: 300
224+
},
225+
{
226+
name: 'March',
227+
data: 530
228+
}
229+
]}
230+
/>
231+
</div>
232+
<Popover {...args} ref={popoverRef} headerText="Detailed Chart View">
233+
<BarChart
234+
style={{ height: '400px', width: '300px' }}
235+
dimensions={[
236+
{
237+
accessor: 'name'
238+
}
239+
]}
240+
measures={[
241+
{
242+
accessor: 'data'
243+
}
244+
]}
245+
dataset={[
246+
{
247+
name: 'January',
248+
data: 100
249+
},
250+
{
251+
name: 'February',
252+
data: 300
253+
},
254+
{
255+
name: 'March',
256+
data: 530
257+
},
258+
{
259+
name: 'April',
260+
data: 450
261+
},
262+
{
263+
name: 'May',
264+
data: 420
265+
},
266+
{
267+
name: 'June',
268+
data: 455
269+
},
270+
{
271+
name: 'July',
272+
data: 300
273+
},
274+
{
275+
name: 'August',
276+
data: 70
277+
},
278+
{
279+
name: 'September',
280+
data: 220
281+
},
282+
{
283+
name: 'October',
284+
data: 350
285+
},
286+
{
287+
name: 'November',
288+
data: 415
289+
},
290+
{
291+
name: 'December',
292+
data: 350
293+
}
294+
]}
295+
/>
296+
</Popover>
297+
</>
298+
);
299+
}}
300+
</Story>
301+
</Canvas>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
2626
}),
2727
footer: { control: { disable: true } },
2828
header: { control: { disable: true } },
29-
children: { control: { disable: true } },
3029
slot: { control: { disable: true } },
3130
ref: { control: { disable: true } },
3231
style: {
@@ -42,6 +41,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
4241
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
4342
}}
4443
args={{
44+
children:
45+
'Press "Esc", click outside or in mobile-mode press the "x" in the corner to close the ResponsivePopover.',
46+
headerText: 'ResponsivePopover Header',
4547
horizontalAlign: PopoverHorizontalAlign.Center,
4648
placementType: PlacementType.Right,
4749
verticalAlign: PopoverVerticalAlign.Center,
@@ -148,7 +150,7 @@ Closing `ResponsivePopovers` works in the same way as opening them. So again an
148150
## ResponsivePopover with content
149151

150152
<Canvas>
151-
<Story name="w/ content">
153+
<Story name="with content">
152154
{(args) => {
153155
const popoverRef = useRef(null);
154156
const onButtonClick = (e) => {

0 commit comments

Comments
 (0)