fix(odyssey-react-mui): make Form, Infobox spacing constent across uses

okta · Jul 20, 2023 · 752461c · 752461c
1 parent 91f1023
commit 752461c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/packages/odyssey-react-mui/src/Form.tsx b/packages/odyssey-react-mui/src/Form.tsx
@@ -117,25 +117,33 @@ const Form = ({
         padding: (theme) => theme.spacing(0),
       }}
     >
-      {title && (
-        <Typography variant="h4" component="h1">
-          {title}
-        </Typography>
-      )}
-      {description && (
-        <Typography component="p" variant="subtitle2">
-          {description}
-        </Typography>
-      )}
-      {alert}
-      {children}
+      <Box
+        component="div"
+        sx={{
+          marginBlockEnd: (theme) => theme.spacing(4),
+        }}
+      >
+        {title && (
+          <Typography variant="h4" component="h1">
+            {title}
+          </Typography>
+        )}
+        {description && (
+          <Typography component="p" variant="subtitle2">
+            {description}
+          </Typography>
+        )}
+        {alert}
+      </Box>
+      <Box component="div">{children}</Box>
       {formActions && (
         <Box
           component="div"
           sx={{
             display: "flex",
             justifyContent: "flex-start",
             gap: (theme) => theme.spacing(1),
+            marginBlockStart: (theme) => theme.spacing(7),
           }}
         >
           {formActions}

diff --git a/packages/odyssey-react-mui/src/Infobox.tsx b/packages/odyssey-react-mui/src/Infobox.tsx
@@ -11,7 +11,7 @@
  */
 
 import { memo, ReactNode } from "react";
-import { Alert, AlertTitle } from "@mui/material";
+import { Alert, AlertTitle, Box } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
@@ -51,7 +51,7 @@ const Infobox = ({ children, role, severity, title }: InfoboxProps) => {
     <Alert role={role} severity={severity} variant="infobox">
       <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
       {title && <AlertTitle>{title}</AlertTitle>}
-      {children}
+      <Box component="div">{children}</Box>
     </Alert>
   );
 };

diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -95,7 +95,7 @@ export const typography = (
       fontVariant: "normal",
       lineHeight: odysseyTokens.TypographyLineHeightBody,
       letterSpacing: "initial",
-      marginBlockEnd: odysseyTokens.Spacing5,
+      marginBlockEnd: odysseyTokens.Spacing4,
     },
     body1: {
       color: odysseyTokens.TypographyColorBody,