Add support for full screen dialogs (#3019)

vivid-planet · Jan 3, 2025 · 5ba64aa · 5ba64aa
1 parent 9f2a127
commit 5ba64aa
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/.changeset/four-terms-hope.md b/.changeset/four-terms-hope.md
@@ -0,0 +1,12 @@
+---
+"@comet/admin-theme": minor
+---
+
+Add support and styling for full screen dialogs using the `fullScreen` prop
+
+```tsx
+<Dialog open fullScreen>
+    <DialogTitle>Dialog Title</DialogTitle>
+    <DialogContent>Dialog content</DialogContent>
+</Dialog>
+```
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialog.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialog.ts
@@ -32,5 +32,10 @@ export const getMuiDialog: GetMuiComponentTheme<"MuiDialog"> = (component, { spa
         paperFullWidth: {
             width: `calc(100% - ${spacing(16)})`,
         },
+        paperFullScreen: {
+            borderRadius: 0,
+            maxWidth: "none",
+            margin: 0,
+        },
     }),
 });
diff --git a/storybook/src/admin/mui/Dialog.stories.tsx b/storybook/src/admin/mui/Dialog.stories.tsx
@@ -1,9 +1,9 @@
-import { CancelButton, Dialog, Field, FinalFormCheckbox, FinalFormInput, FinalFormSelect, OkayButton } from "@comet/admin";
+import { CancelButton, CheckboxField, Dialog, OkayButton, SelectField, TextField } from "@comet/admin";
 import { Save } from "@comet/admin-icons";
-import { Button, DialogActions, DialogContent, DialogContentText, DialogProps, FormControlLabel, MenuItem } from "@mui/material";
+import { Button, DialogActions, DialogContent, DialogContentText, DialogProps } from "@mui/material";
 import { Form } from "react-final-form";
 
-type DialogSize = Exclude<DialogProps["maxWidth"], false> | "fullWidth";
+type DialogSize = Exclude<DialogProps["maxWidth"], false> | "fullWidth" | "fullScreen";
 
 type DialogSizeOptions = {
     [label: string]: DialogSize;
@@ -16,6 +16,7 @@ const dialogSizeOptions: DialogSizeOptions = {
     "LG (1280px)": "lg",
     "XL (1920px)": "xl",
     FullWidth: "fullWidth",
+    FullScreen: "fullScreen",
 };
 
 const selectOptions = [
@@ -74,12 +75,12 @@ export const _Dialog = {
                     render={({ handleSubmit }) => (
                         <form onSubmit={handleSubmit}>
                             <Dialog
-                                scroll="body"
                                 title={selectedDialogTitle}
                                 onClose={selectedDialogOnClose === "callback" ? () => console.log("Dialog closed") : undefined}
                                 open={true}
                                 fullWidth={selectedDialogSize === "fullWidth"}
-                                maxWidth={selectedDialogSize !== "fullWidth" && selectedDialogSize}
+                                fullScreen={selectedDialogSize === "fullScreen"}
+                                maxWidth={selectedDialogSize !== "fullWidth" && selectedDialogSize !== "fullScreen" && selectedDialogSize}
                             >
                                 <>{selectedDialogSize === "xs" ? <ConfirmationDialogContent /> : <DefaultDialogContent />}</>
                             </Dialog>
@@ -108,21 +109,9 @@ function DefaultDialogContent() {
                     Lorem ipsum nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus
                     sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.
                 </DialogContentText>
-                <Field name="text" label="Textfield" component={FinalFormInput} fullWidth />
-                <Field name="select" label="Select" fullWidth>
-                    {(props) => (
-                        <FinalFormSelect {...props} fullWidth>
-                            {selectOptions.map((option) => (
-                                <MenuItem value={option.value} key={option.value}>
-                                    {option.label}
-                                </MenuItem>
-                            ))}
-                        </FinalFormSelect>
-                    )}
-                </Field>
-                <Field name="checked" type="checkbox" fullWidth>
-                    {(props) => <FormControlLabel label="Checkbox" control={<FinalFormCheckbox {...props} />} />}
-                </Field>
+                <TextField name="text" label="Textfield" fullWidth />
+                <SelectField name="select" label="Select" fullWidth options={selectOptions} />
+                <CheckboxField name="checked" label="Checkbox" fullWidth />
             </DialogContent>
             <DialogActions>
                 <CancelButton />