added ability to add in custom validation error messages for text input fields w/ burnettk

spiffworkflow-frontend/src/index.css

@@ -228,6 +228,10 @@ h1.with-icons {
   background: rgba(0,0,0,.05);
 }
 
+.form-instructions {
+  margin-bottom: 10em;
+}
+
 /* Json Web Form CSS Fix - Bootstrap now requries that each li have a "list-inline-item." Also have a PR
 in on this with the react-jsonschema-form repo. This is just a patch fix to allow date inputs to layout a little more cleanly */
 .list-inline>li {

spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx

@@ -89,7 +89,11 @@ export default function BaseInputTemplate<
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    if ('validationErrorMessage' in schema) {
+      errorMessageForField = (schema as any).validationErrorMessage;
+    } else {
+      errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    }
   }
 
   return (
@@ -97,6 +101,7 @@ export default function BaseInputTemplate<
       <TextInput
         id={id}
         name={id}
+        className="input"
         labelText={labelToUse}
         invalid={invalid}
         invalidText={errorMessageForField}

spiffworkflow-frontend/src/themes/carbon/DescriptionField/DescriptionField.tsx

@@ -1,17 +1,34 @@
 import React from 'react';
-import Typography from '@mui/material/Typography';
-import { DescriptionFieldProps } from '@rjsf/utils';
+import {
+  DescriptionFieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-function DescriptionField({ description, id }: DescriptionFieldProps) {
-  if (description) {
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  if (!description) {
+    return null;
+  }
+  if (typeof description === 'string') {
     return (
-      <Typography id={id} variant="subtitle2" style={{ marginTop: '5px' }}>
+      <p id={id} className="field-description">
         {description}
-      </Typography>
+      </p>
     );
   }
-
-  return null;
+  return (
+    <div id={id} className="field-description">
+      {description}
+    </div>
+  );
 }
-
-export default DescriptionField;

spiffworkflow-frontend/src/themes/carbon/README.md

@@ -0,0 +1,9 @@
+### Custom Validation Error Message for String Inputs
+
+If you have a property in your json schema like:
+
+    "user_generated_number_1": {"type": "string", "title": "User Generated Number", "default": "0", "minLength": 3}
+
+it will generate this error message by default: "User Generated Number must NOT have fewer than 3 characters."
+
+If you add the `validationErrorMessage` key to the property json it will print that message instead.

spiffworkflow-frontend/src/themes/carbon/TitleField/TitleField.tsx

@@ -1,16 +1,27 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import { TitleFieldProps } from '@rjsf/utils';
+import {
+  FormContextType,
+  TitleFieldProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-function TitleField({ id, title }: TitleFieldProps) {
+const REQUIRED_FIELD_SYMBOL = '*';
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: TitleFieldProps<T, S, F>) {
+  const { id, title, required } = props;
   return (
-    <Box id={id} mb={1} mt={1}>
-      <Typography variant="h5">{title}</Typography>
-      <Divider />
-    </Box>
+    <legend id={id} className="header">
+      {title}
+      {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
+    </legend>
   );
 }
-
-export default TitleField;

spiffworkflow-frontend/src/themes/carbon/index.css

@@ -1,3 +1,22 @@
 button.react-json-schema-form-submit-button {
   margin-top: 1.5em;
 }
+
+.rjsf .header {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  color: #161616;
+}
+
+.rjsf .field-description {
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  color: #525252;
+  margin-bottom: 1em;
+}
+
+.rjsf .input {
+  margin-bottom: 2em;
+}