fixup! Add modal dialog to Storybook

mozilla · Jan 14, 2025 · f33c7a0 · f33c7a0
1 parent 0762ebd
commit f33c7a0
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/src/app/components/client/stories/ModalDialog.stories.tsx b/src/app/components/client/stories/ModalDialog.stories.tsx
@@ -46,14 +46,28 @@ const ModalDialog = (props: ModalDialogProps) => {
             </Dialog>
           ) : (
             <>
-              <p>
-                This is modal content; note that it&apos;s not possible to
-                interact with the content behind the modal overlay. Here&apos;s
-                a button to close the modal: &nbsp;
-              </p>
-              <Button variant="primary" onPress={() => modalState.close()}>
-                Close modal
-              </Button>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  gap: 16,
+                }}
+              >
+                <p>
+                  This is modal content; note that it&apos;s not possible to
+                  interact with the content behind the modal overlay.
+                  Here&apos;s a button to close the modal: &nbsp;
+                </p>
+                <Button variant="primary" onPress={() => modalState.close()}>
+                  Close modal
+                </Button>
+                <p>
+                  Note that modal overlays aren&apos;t usually used on their
+                  own. This is merely an example to help clarify the boundaries
+                  between the Modal and Dialog components.
+                </p>
+              </div>
             </>
           )}
         </ModalOverlay>