Better SubmitError styling w/ Alert & Markdown

Author: CarsonF

src/components/form/SubmitError.tsx

@@ -1,20 +1,55 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Alert, AlertProps, Collapse } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Markdown from 'markdown-to-jsx';
+import { memo } from 'react';
 import { useFormState } from 'react-final-form';
+import { extendSx } from '~/common';
 
 /**
  * Standard styling for displaying form submission errors.
- * If no children are passed, component is display the form's submitErrors
+ * If no children are passed, the component displays the form's submitErrors
  * if it is a string.
  */
-export const SubmitError = ({ children, ...rest }: TypographyProps) => {
+export const SubmitError = ({ children, ...rest }: AlertProps) => {
   const { submitError } = useFormState({
     subscription: {
       submitError: true,
     },
   });
+  const error = children || submitError;
   return (
-    <Typography color="error" variant="body2" align="center" {...rest}>
-      {children || submitError || <br />}
-    </Typography>
+    <Collapse in={!!error}>
+      <Alert severity="error" {...rest} sx={[{ mb: 2 }, ...extendSx(rest.sx)]}>
+        {children ||
+          (typeof submitError === 'string' ? (
+            <MarkdownStyled>{submitError}</MarkdownStyled>
+          ) : (
+            submitError
+          ))}
+      </Alert>
+    </Collapse>
   );
 };
+
+const MarkdownStyled = memo(function MarkdownStyled({
+  children,
+}: {
+  children: string;
+}) {
+  return <Markdown options={{ wrapper: MkdownRoot }}>{children}</Markdown>;
+});
+
+const MkdownRoot = styled('div')(({ theme }) => ({
+  '> :first-child': {
+    marginBlockStart: 0,
+  },
+  '> :last-child': {
+    marginBlockEnd: 0,
+  },
+  'p, ul': {
+    marginBlock: theme.spacing(1),
+  },
+  ul: {
+    paddingInlineStart: theme.spacing(4),
+  },
+}));

src/scenes/Authentication/ChangePassword/ChangePassword.tsx

@@ -42,7 +42,7 @@ export const ChangePassword = (props: ChangePasswordProps) => {
         });
       }}
     >
-      <SubmitError align="left" />
+      <SubmitError />
       <PasswordField
         name="oldPassword"
         label="Old Password"

src/scenes/Languages/LanguageForm/LanguageForm.tsx

@@ -96,7 +96,7 @@ export const LanguageForm = <Mutation extends LanguageMutation>({
         return (
           <Grid container spacing={3} className={classes.content}>
             <Grid item xs={12}>
-              <SubmitError align="left" />
+              <SubmitError />
             </Grid>
             {canReadAny(
               language,