feat(odyssey-react-mui): add styles and exports for Dialog

okta · Oct 14, 2022 · f8b392b · f8b392b
1 parent 79ef1cf
commit f8b392b
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -27,6 +27,11 @@ export {
   Checkbox,
   CircularProgress,
   CssBaseline,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
   FormControl,
   FormControlLabel,
   FormGroup,
@@ -63,6 +68,11 @@ export type {
   CheckboxProps,
   CircularProgressProps,
   CssBaselineProps,
+  DialogProps,
+  DialogActionsProps,
+  DialogContentProps,
+  DialogContentTextProps,
+  DialogTitleProps,
   FormControlLabelProps,
   FormControlProps,
   FormGroupProps,

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -13,6 +13,7 @@
 import type { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
+import { dialogActionsClasses } from "@mui/material/DialogActions";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
@@ -130,6 +131,13 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiBackdrop: {
+    styleOverrides: {
+      root: {
+        backgroundColor: "rgba(29,29,33,0.75)",
+      },
+    },
+  },
   MuiButton: {
     defaultProps: {
       variant: "primary",
@@ -388,6 +396,75 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiDialog: {
+    defaultProps: {
+      scroll: "paper",
+    },
+    styleOverrides: {
+      paper: ({ theme }) => ({
+        maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
+        boxShadow: "none",
+        filter:
+          "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))",
+      }),
+    },
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        paddingBlockStart: theme.spacing(4),
+        paddingBlockEnd: theme.spacing(6),
+        paddingInline: theme.spacing(6),
+      }),
+    },
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        padding: 0,
+        paddingBlock: theme.spacing(4),
+        paddingInline: theme.spacing(6),
+
+        ...(ownerState.dividers === false && {
+          [`& + .${dialogActionsClasses.root}`]: {
+            paddingBlockStart: theme.spacing(4),
+          },
+        }),
+      }),
+    },
+  },
+  MuiDialogContentText: {
+    defaultProps: {
+      color: "text.primary",
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        marginBlockEnd: theme.spacing(5),
+
+        "&:last-child": {
+          marginBlockEnd: "0",
+        },
+      }),
+    },
+  },
+  MuiDialogTitle: {
+    defaultProps: {
+      component: "h1",
+      variant: "h5",
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBlockEnd: 0,
+        padding: 0,
+        paddingBlockStart: theme.spacing(5),
+        paddingBlockEnd: theme.spacing(4),
+        paddingInline: theme.spacing(6),
+      }),
+    },
+  },
   MuiFormControl: {
     defaultProps: {
       margin: "normal",