Skip to content

Commit f33c7a0

Browse files
committed
fixup! Add modal dialog to Storybook
1 parent 0762ebd commit f33c7a0

File tree

1 file changed

+22
-8
lines changed

1 file changed

+22
-8
lines changed

src/app/components/client/stories/ModalDialog.stories.tsx

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,28 @@ const ModalDialog = (props: ModalDialogProps) => {
4646
</Dialog>
4747
) : (
4848
<>
49-
<p>
50-
This is modal content; note that it&apos;s not possible to
51-
interact with the content behind the modal overlay. Here&apos;s
52-
a button to close the modal: &nbsp;
53-
</p>
54-
<Button variant="primary" onPress={() => modalState.close()}>
55-
Close modal
56-
</Button>
49+
<div
50+
style={{
51+
display: "flex",
52+
flexDirection: "column",
53+
alignItems: "flex-start",
54+
gap: 16,
55+
}}
56+
>
57+
<p>
58+
This is modal content; note that it&apos;s not possible to
59+
interact with the content behind the modal overlay.
60+
Here&apos;s a button to close the modal: &nbsp;
61+
</p>
62+
<Button variant="primary" onPress={() => modalState.close()}>
63+
Close modal
64+
</Button>
65+
<p>
66+
Note that modal overlays aren&apos;t usually used on their
67+
own. This is merely an example to help clarify the boundaries
68+
between the Modal and Dialog components.
69+
</p>
70+
</div>
5771
</>
5872
)}
5973
</ModalOverlay>

0 commit comments

Comments
 (0)