Improve visual styling of error validation boxes

CHANGELOG.md

@@ -26,6 +26,8 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/chakra-ui
 
 - Added `MultiSchemaFieldTemplate`
+- Improve visual styling of error validation boxes
+- Update `chakra-ui/react` package to `^3.19.1`
 
 ## @rjsf/core
 

packages/chakra-ui/package.json

@@ -81,12 +81,11 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@chakra-ui/cli": "^3.16.1",
-    "@chakra-ui/react": "^3.16.1",
+    "@chakra-ui/cli": "^3.19.1",
+    "@chakra-ui/react": "^3.19.1",
     "@emotion/eslint-plugin": "^11.12.0",
     "@emotion/jest": "^11.13.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@rjsf/core": "^6.0.0-beta.10",
     "@rjsf/snapshot-tests": "^6.0.0-beta.10",
     "@rjsf/utils": "^6.0.0-beta.10",

packages/chakra-ui/src/ErrorList/ErrorList.tsx

@@ -1,6 +1,5 @@
 import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { ListIndicator, ListItem, ListRoot } from '@chakra-ui/react';
-import { TriangleAlert } from 'lucide-react';
+import { ListItem, ListRoot } from '@chakra-ui/react';
 
 import { Alert } from '../components/ui/alert';
 
@@ -10,21 +9,10 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
 }: ErrorListProps<T, S, F>) {
   const { translateString } = registry;
   return (
-    <Alert
-      flexDirection='column'
-      alignItems='flex-start'
-      gap={3}
-      status='error'
-      title={translateString(TranslatableString.ErrorsLabel)}
-    >
-      <ListRoot>
+    <Alert status='error' title={translateString(TranslatableString.ErrorsLabel)} mb={3}>
+      <ListRoot listStylePosition='inside'>
         {errors.map((error, i) => (
-          <ListItem key={i}>
-            <ListIndicator asChild color='red.500'>
-              <TriangleAlert />
-            </ListIndicator>
-            {error.stack}
-          </ListItem>
+          <ListItem key={i}>{error.stack}</ListItem>
         ))}
       </ListRoot>
     </Alert>

packages/chakra-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,5 +1,5 @@
 import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-import { ListItem, ListRoot, Text } from '@chakra-ui/react';
+import { Fieldset } from '@chakra-ui/react';
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
@@ -16,15 +16,11 @@ export default function FieldErrorTemplate<
   }
   const id = errorId<T>(idSchema);
 
-  return (
-    <ListRoot>
-      {errors.map((error, i: number) => {
-        return (
-          <ListItem key={i}>
-            <Text id={id}>{error}</Text>
-          </ListItem>
-        );
-      })}
-    </ListRoot>
-  );
+  return errors.map((error, i: number) => {
+    return (
+      <Fieldset.ErrorText mt={0} key={i} id={id}>
+        {error}
+      </Fieldset.ErrorText>
+    );
+  });
 }

packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx

@@ -65,7 +65,7 @@ export default function FieldTemplate<
         {displayLabel && rawDescription ? <Fieldset.Legend mt={2}>{description}</Fieldset.Legend> : null}
         {help}
         <Fieldset.Content>{children}</Fieldset.Content>
-        {errors && <Fieldset.ErrorText>{errors}</Fieldset.ErrorText>}
+        {errors}
       </Fieldset.Root>
     </WrapIfAdditionalTemplate>
   );

packages/chakra-ui/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,3 +1,4 @@
+import { Box, Card } from '@chakra-ui/react';
 import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function MultiSchemaFieldTemplate<
@@ -8,9 +9,11 @@ export default function MultiSchemaFieldTemplate<
   const { optionSchemaField, selector } = props;
 
   return (
-    <div>
-      <div>{selector}</div>
-      {optionSchemaField}
-    </div>
+    <Card.Root mb={2}>
+      <Card.Body pb={2}>
+        <Box mb={4}>{selector}</Box>
+        {optionSchemaField}
+      </Card.Body>
+    </Card.Root>
   );
 }

packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -64,27 +64,29 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid gap={description ? 2 : 6} mb={4}>
-        {properties.map((element, index) =>
-          element.hidden ? (
-            element.content
-          ) : (
-            <GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
-          ),
-        )}
-        {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <GridItem justifySelf='flex-end'>
-            <AddButton
-              id={buttonId<T>(idSchema, 'add')}
-              className='rjsf-object-property-expand'
-              onClick={onAddClick(schema)}
-              disabled={disabled || readonly}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          </GridItem>
-        )}
-      </Grid>
+      {properties.length > 0 && (
+        <Grid gap={description ? 2 : 6} mb={4}>
+          {properties.map((element, index) =>
+            element.hidden ? (
+              element.content
+            ) : (
+              <GridItem key={`${idSchema.$id}-${element.name}-${index}`}>{element.content}</GridItem>
+            ),
+          )}
+          {canExpand<T, S, F>(schema, uiSchema, formData) && (
+            <GridItem justifySelf='flex-end'>
+              <AddButton
+                id={buttonId<T>(idSchema, 'add')}
+                className='rjsf-object-property-expand'
+                onClick={onAddClick(schema)}
+                disabled={disabled || readonly}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </GridItem>
+          )}
+        </Grid>
+      )}
     </>
   );
 }

packages/chakra-ui/src/components/ui/alert.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactElement, ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { Alert as ChakraAlert } from '@chakra-ui/react';
 
 import { CloseButton } from './close-button';
@@ -10,7 +10,6 @@ import { CloseButton } from './close-button';
  * @param {ReactNode} [props.startElement] - The element to display at the start of the alert.
  * @param {ReactNode} [props.endElement] - The element to display at the end of the alert.
  * @param {ReactNode} [props.title] - The title of the alert.
- * @param {ReactElement} [props.icon] - The icon to display in the alert.
  * @param {boolean} [props.closable] - Whether to show the close button.
  * @param {function} [props.onClose] - The function to call when the close button is clicked.
  *
@@ -20,16 +19,15 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
   startElement?: ReactNode;
   endElement?: ReactNode;
   title?: ReactNode;
-  icon?: ReactElement;
   closable?: boolean;
   onClose?: () => void;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
-  const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
+  const { title, children, closable, onClose, startElement, endElement, ...rest } = props;
   return (
     <ChakraAlert.Root ref={ref} {...rest}>
-      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {startElement || <ChakraAlert.Indicator />}
       {children ? (
         <ChakraAlert.Content>
           <ChakraAlert.Title>{title}</ChakraAlert.Title>