Merge pull request #1652 from SeedCompany/better-form-error-styles

Author: CarsonF

src/api/errorHandling/form-error-handling.ts

@@ -1,5 +1,6 @@
 import { isNotFalsy, mapValues } from '@seedcompany/common';
 import { FORM_ERROR, FormApi, setIn, SubmissionErrors } from 'final-form';
+import { isValidElement, ReactElement } from 'react';
 import { Promisable } from 'type-fest';
 import { ErrorMap, getErrorInfo, ValidationError } from './error.types';
 
@@ -53,7 +54,11 @@ export type ErrorHandler<E> =
     ) => Promisable<ErrorHandlerResult>);
 
 type NextHandler<E> = (e: E) => Promisable<ErrorHandlerResult>;
-export type ErrorHandlerResult = string | SubmissionErrors | undefined;
+export type ErrorHandlerResult =
+  | string
+  | ReactElement
+  | SubmissionErrors
+  | undefined;
 
 interface HandlerUtils {
   /** Does the form have this field registered? */
@@ -140,5 +145,7 @@ const resolveHandler =
       typeof handler === 'function'
         ? await handler(error, next, utils)
         : handler;
-    return typeof result === 'string' ? { [FORM_ERROR]: result } : result;
+    return typeof result === 'string' || isValidElement(result)
+      ? { [FORM_ERROR]: result }
+      : result;
   };

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,