Skip to content

Commit b2fae12

Browse files
MarcusNotheisMarcusNotheis
authored
fix(MessageBox): allow any react node to be passed as children (#670)
1 parent 48bbfb7 commit b2fae12

File tree

5 files changed

+260
-174
lines changed

5 files changed

+260
-174
lines changed

‎packages/main/src/components/MessageBox/MessageBox.stories.mdx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Title, Subtitle, Description, Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { DocsHeader } from '@shared/stories/DocsHeader';
3+
import { Button } from '@ui5/webcomponents-react/lib/Button';
4+
import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox';
5+
import { MessageBoxActions } from '@ui5/webcomponents-react/lib/MessageBoxActions';
6+
import { MessageBoxTypes } from '@ui5/webcomponents-react/lib/MessageBoxTypes';
7+
import { useRef, useCallback } from 'react';
8+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
9+
10+
<Meta
11+
title="Components / MessageBox"
12+
component={MessageBox}
13+
argTypes={{ ref: { type: null }, ...createSelectArgTypes({ type: MessageBoxTypes }) }}
14+
args={{
15+
open: false,
16+
type: MessageBoxTypes.CONFIRM,
17+
children: 'My Message Box Content'
18+
}}
19+
/>
20+
21+
<DocsHeader />
22+
23+
<Canvas>
24+
<Story name="Default">
25+
{(args) => {
26+
const messageBoxRef = useRef();
27+
const onButtonClick = useCallback(
28+
(e) => {
29+
messageBoxRef.current.open();
30+
},
31+
[messageBoxRef]
32+
);
33+
const onCloseMessageBox = useCallback(
34+
(e) => {
35+
messageBoxRef.current.close();
36+
},
37+
[messageBoxRef]
38+
);
39+
return (
40+
<>
41+
<Button onClick={onButtonClick}>Open Messagebox</Button>
42+
<MessageBox
43+
ref={messageBoxRef}
44+
type={args.type}
45+
open={args.open}
46+
onClose={onCloseMessageBox}
47+
title={args.title}
48+
>
49+
{args.children}
50+
</MessageBox>
51+
</>
52+
);
53+
}}
54+
</Story>
55+
</Canvas>
56+
57+
<ArgsTable story="." />
58+
59+
### with Custom Action
60+
61+
<Canvas>
62+
<Story name="With Custom Action">
63+
{(args) => {
64+
const messageBoxRef = useRef();
65+
const onButtonClick = useCallback(
66+
(e) => {
67+
messageBoxRef.current.open();
68+
},
69+
[messageBoxRef]
70+
);
71+
const onCloseMessageBox = useCallback(
72+
(e) => {
73+
messageBoxRef.current.close();
74+
},
75+
[messageBoxRef]
76+
);
77+
return (
78+
<>
79+
<Button onClick={onButtonClick}>Open Messagebox</Button>
80+
<MessageBox
81+
ref={messageBoxRef}
82+
type={args.type}
83+
open={args.open}
84+
onClose={onCloseMessageBox}
85+
title={args.title}
86+
actions={[MessageBoxActions.OK, 'A custom action', MessageBoxActions.CANCEL]}
87+
>
88+
{args.children}
89+
</MessageBox>
90+
</>
91+
);
92+
}}
93+
</Story>
94+
</Canvas>

‎packages/main/src/components/MessageBox/MessageBox.test.tsx

Lines changed: 35 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
1-
import { createPassThroughPropsTest } from '@shared/tests/utils';
21
import { fireEvent, render, screen } from '@shared/tests';
2+
import { createPassThroughPropsTest } from '@shared/tests/utils';
3+
import '@ui5/webcomponents-icons/dist/icons/add';
4+
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
35
import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox';
46
import { MessageBoxActions } from '@ui5/webcomponents-react/lib/MessageBoxActions';
57
import { MessageBoxTypes } from '@ui5/webcomponents-react/lib/MessageBoxTypes';
68
import React from 'react';
79

810
describe('MessageBox', () => {
9-
test('Confirm - OK', () => {
11+
test.each([
12+
[MessageBoxTypes.CONFIRM, MessageBoxActions.OK],
13+
[MessageBoxTypes.SUCCESS, MessageBoxActions.OK],
14+
[MessageBoxTypes.WARNING, MessageBoxActions.OK],
15+
[MessageBoxTypes.ERROR, MessageBoxActions.CLOSE],
16+
[MessageBoxTypes.INFORMATION, MessageBoxActions.OK],
17+
[MessageBoxTypes.HIGHLIGHT, MessageBoxActions.OK]
18+
])('%s', (type, buttonText) => {
1019
const callback = jest.fn();
11-
const { asFragment } = render(
12-
<MessageBox type={MessageBoxTypes.CONFIRM} open onClose={callback}>
13-
Confirm
20+
const { asFragment, unmount } = render(
21+
<MessageBox type={type} open onClose={callback}>
22+
My Message Box Content
1423
</MessageBox>
1524
);
1625

1726
expect(asFragment()).toMatchSnapshot();
1827

19-
fireEvent.click(screen.getByText('OK'));
28+
fireEvent.click(screen.getByText(buttonText));
2029

21-
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.OK);
30+
expect(callback.mock.calls[0][0].detail.action).toEqual(buttonText);
31+
unmount();
2232
});
2333

2434
test('Confirm - Cancel', () => {
@@ -35,58 +45,6 @@ describe('MessageBox', () => {
3545
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.CANCEL);
3646
});
3747

38-
test('Success', () => {
39-
const callback = jest.fn();
40-
const { asFragment } = render(
41-
<MessageBox type={MessageBoxTypes.SUCCESS} open onClose={callback}>
42-
Success
43-
</MessageBox>
44-
);
45-
expect(asFragment()).toMatchSnapshot();
46-
47-
fireEvent.click(screen.getByText('OK'));
48-
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.OK);
49-
});
50-
51-
test('Warning', () => {
52-
const callback = jest.fn();
53-
const { asFragment } = render(
54-
<MessageBox type={MessageBoxTypes.WARNING} open onClose={callback}>
55-
Warning
56-
</MessageBox>
57-
);
58-
expect(asFragment()).toMatchSnapshot();
59-
60-
fireEvent.click(screen.getByText('OK'));
61-
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.OK);
62-
});
63-
64-
test('Error', () => {
65-
const callback = jest.fn();
66-
const { asFragment } = render(
67-
<MessageBox type={MessageBoxTypes.ERROR} open onClose={callback}>
68-
Error
69-
</MessageBox>
70-
);
71-
expect(asFragment()).toMatchSnapshot();
72-
73-
fireEvent.click(screen.getByText('Close'));
74-
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.CLOSE);
75-
});
76-
77-
test('Information', () => {
78-
const callback = jest.fn();
79-
const { asFragment } = render(
80-
<MessageBox type={MessageBoxTypes.INFORMATION} open onClose={callback}>
81-
Information
82-
</MessageBox>
83-
);
84-
expect(asFragment()).toMatchSnapshot();
85-
86-
fireEvent.click(screen.getByText('OK'));
87-
expect(callback.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.OK);
88-
});
89-
9048
test('Show', () => {
9149
const callback = jest.fn();
9250
const { asFragment } = render(
@@ -107,7 +65,13 @@ describe('MessageBox', () => {
10765
test('Success w/ custom title', () => {
10866
const callback = jest.fn();
10967
const { asFragment } = render(
110-
<MessageBox type={MessageBoxTypes.SUCCESS} open onClose={callback} title="Custom Success">
68+
<MessageBox
69+
type={MessageBoxTypes.SUCCESS}
70+
open
71+
onClose={callback}
72+
title="Custom Success"
73+
icon={<Icon name="add" />}
74+
>
11175
Custom Success
11276
</MessageBox>
11377
);
@@ -162,5 +126,16 @@ describe('MessageBox', () => {
162126
expect(onClose.mock.calls[1][0].detail.action).toEqual('My Custom Action');
163127
});
164128

129+
test("Don't crash on unknown type", () => {
130+
const callback = jest.fn();
131+
const { asFragment } = render(
132+
<MessageBox open onClose={callback} type="FOO_BAR">
133+
Unknown Type!
134+
</MessageBox>
135+
);
136+
137+
expect(asFragment()).toMatchSnapshot();
138+
});
139+
165140
createPassThroughPropsTest(MessageBox);
166141
});

0 commit comments

Comments
 (0)