simplifying modal and dialog props and styling

bcgov · Sep 6, 2024 · 97eb06a · 97eb06a
1 parent 3daf0b4
commit 97eb06a
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 68 deletions.
diff --git a/packages/react-components/src/components/Dialog/Dialog.css b/packages/react-components/src/components/Dialog/Dialog.css
@@ -1,12 +1,11 @@
 .bcds-react-aria-Dialog {
   display: flex;
   flex-direction: column;
+  min-height: var(--layout-margin-xxxlarge);
 }
 
 .bcds-react-aria-Dialog--Container {
   position: relative;
-  min-height: var(--layout-margin-medium);
-  padding: var(--layout-padding-medium);
 }
 
 /* Close icon */

diff --git a/packages/react-components/src/components/Modal/Modal.css b/packages/react-components/src/components/Modal/Modal.css
@@ -20,7 +20,9 @@
 .bcds-react-aria-Modal--Container {
   box-sizing: border-box;
   max-width: 100vw;
+  width: 600px;
   max-height: 100vh;
+  height: auto;
   margin: var(--layout-margin-large);
   border-radius: var(--layout-border-radius-medium);
   border: var(--layout-border-width-small) solid

diff --git a/packages/react-components/src/components/Modal/Modal.tsx b/packages/react-components/src/components/Modal/Modal.tsx
@@ -6,32 +6,21 @@ import {
 
 import "./Modal.css";
 
-export interface ModalProps extends ReactAriaModalOverlayProps {
-  /* Sets height of modal container */
-  modalHeight: string | number;
-  /* Sets width of modal container */
-  modalWidth: string | number;
-}
-
 export default function Modal({
   children,
   isDismissable,
   isKeyboardDismissDisabled,
-  modalHeight = "auto",
-  modalWidth = 600,
+  shouldCloseOnInteractOutside,
   ...props
-}: ModalProps) {
+}: ReactAriaModalOverlayProps) {
   return (
     <ReactAriaModalOverlay
       className="bcds-react-aria-Modal--Overlay"
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
     >
-      <ReactAriaModal
-        className="bcds-react-aria-Modal--Container"
-        style={{ width: modalWidth, height: modalHeight }}
-        {...props}
-      >
+      <ReactAriaModal className="bcds-react-aria-Modal--Container" {...props}>
         {children}
       </ReactAriaModal>
     </ReactAriaModalOverlay>

diff --git a/packages/react-components/src/pages/ModalDialog/ModalDialog.tsx b/packages/react-components/src/pages/ModalDialog/ModalDialog.tsx
@@ -17,7 +17,7 @@ export default function ModalDialogPage() {
       <h3>Info Alert Dialog</h3>
       <DialogTrigger>
         <Button variant="primary">Open an alert dialog</Button>
-        <Modal modalHeight={"auto"} modalWidth={600}>
+        <Modal>
           <AlertDialog
             title="This is a modal dialog"
             description="It has some additional description text"
@@ -35,7 +35,7 @@ export default function ModalDialogPage() {
       <h3>Warning Alert Dialog</h3>
       <DialogTrigger>
         <Button variant="primary">Open a warning dialog</Button>
-        <Modal modalHeight={"auto"} modalWidth={600}>
+        <Modal>
           <AlertDialog
             variant="warning"
             title="This is a warning dialog"
@@ -54,7 +54,7 @@ export default function ModalDialogPage() {
       <h3>Error Alert Dialog</h3>
       <DialogTrigger>
         <Button variant="primary">Open a warning dialog</Button>
-        <Modal modalHeight={"auto"} modalWidth={600}>
+        <Modal>
           <AlertDialog
             variant="error"
             title="This is an error dialog"
@@ -74,51 +74,63 @@ export default function ModalDialogPage() {
       <h3>Empty dialog (closeable and dismissable)</h3>
       <DialogTrigger>
         <Button variant="secondary">Open a generic dialog</Button>
-        <Modal modalHeight={"auto"} modalWidth={600} isDismissable>
+        <Modal isDismissable>
           <Dialog isCloseable></Dialog>
         </Modal>
       </DialogTrigger>
       <h3>Generic dialog with composed form</h3>
       <DialogTrigger>
         <Button variant="secondary">Open a generic dialog</Button>
-        <Modal modalHeight={"auto"} modalWidth={600} isDismissable>
+        <Modal isDismissable>
           <Dialog>
-            <span style={{ font: "var(--typography-bold-h3" }}>
-              This dialog contains a form
-            </span>
-            <Form
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "var(--layout-margin-small)",
-              }}
-            >
-              <TextField isRequired label="Name" />
-              <TextField isRequired type="email" label="Email address" />
-              <Select
-                items={[
-                  { id: "vancouver", label: "Vancouver" },
-                  { id: "victoria", label: "Victoria" },
-                  { id: "kelowna", label: "Kelowna" },
-                  { id: "kamloops", label: "Kamloops" },
-                  { id: "princegeorge", label: "Prince George" },
-                  { id: "princerupert", label: "Prince Rupert" },
-                ]}
-                label="City"
-                isRequired
-              />
-              <ButtonGroup alignment="start" orientation="horizontal">
-                <Button variant="primary" type="submit">
-                  Submit
-                </Button>
-                <Button variant="secondary" type="reset">
-                  Reset
-                </Button>
-              </ButtonGroup>
-            </Form>
+            <div style={{ padding: "var(--layout-padding-medium" }}>
+              <span style={{ font: "var(--typography-bold-h3" }}>
+                This dialog contains a form
+              </span>
+              <Form
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "var(--layout-margin-small)",
+                }}
+              >
+                <TextField isRequired label="Name" />
+                <TextField isRequired type="email" label="Email address" />
+                <Select
+                  items={[
+                    { id: "vancouver", label: "Vancouver" },
+                    { id: "victoria", label: "Victoria" },
+                    { id: "kelowna", label: "Kelowna" },
+                    { id: "kamloops", label: "Kamloops" },
+                    { id: "princegeorge", label: "Prince George" },
+                    { id: "princerupert", label: "Prince Rupert" },
+                  ]}
+                  label="City"
+                  isRequired
+                />
+                <ButtonGroup alignment="start" orientation="horizontal">
+                  <Button variant="primary" type="submit">
+                    Submit
+                  </Button>
+                  <Button variant="secondary" type="reset">
+                    Reset
+                  </Button>
+                </ButtonGroup>
+              </Form>
+            </div>
           </Dialog>
         </Modal>
       </DialogTrigger>
+      <h2>Default style</h2>
+      <DialogTrigger>
+        <Button>Open a default style dialog</Button>
+        <Modal>Some stuff goes here</Modal>
+      </DialogTrigger>
+      <h3>Override style</h3>
+      <DialogTrigger>
+        <Button>Open a square dialog</Button>
+        <Modal style={{ width: "300px", height: "300px" }}></Modal>
+      </DialogTrigger>
     </>
   );
 }
diff --git a/packages/react-components/src/stories/Dialog.stories.tsx b/packages/react-components/src/stories/Dialog.stories.tsx
@@ -38,7 +38,7 @@ export const DialogTemplate: Story = {
   render: ({ ...args }: DialogProps) => (
     <DialogTrigger>
       <Button>Open the dialog</Button>
-      <Modal modalHeight={"auto"} modalWidth={600}>
+      <Modal>
         <Dialog {...args} />
       </Modal>
     </DialogTrigger>

diff --git a/packages/react-components/src/stories/Modal.stories.tsx b/packages/react-components/src/stories/Modal.stories.tsx
@@ -19,19 +19,8 @@ const meta = {
       description:
         "Whether pressing the escape key to close the modal should be disabled",
     },
-    modalHeight: {
-      control: { type: "text" },
-      description: "Sets the height of the modal",
-    },
-    modalWidth: {
-      control: { type: "text" },
-      description: "Sets the width of the modal",
-    },
-  },
-  args: {
-    modalHeight: 200,
-    modalWidth: 600,
   },
+  args: {},
 } satisfies Meta<typeof Modal>;
 
 export default meta;