Add DescriptionFieldTemplate to mantine theme

Author: zfarhad

packages/mantine/src/templates/DescriptionField.tsx

@@ -0,0 +1,23 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Text } from '@mantine/core';
+
+/** 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 (
+      <Text id={id} mt={3} mb='sm'>
+        {description}
+      </Text>
+    );
+  }
+
+  return null;
+}

packages/mantine/src/templates/FieldTemplate.tsx

@@ -6,15 +6,30 @@ import {
   getTemplate,
   getUiOptions,
 } from '@rjsf/utils';
-import { Box } from '@mantine/core';
+import { Box, Text } from '@mantine/core';
 
 export default function FieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: FieldTemplateProps<T, S, F>) {
-  const { id, classNames, style, label, errors, help, hidden, schema, uiSchema, registry, children, ...otherProps } =
-    props;
+  const {
+    id,
+    classNames,
+    style,
+    label,
+    errors,
+    help,
+    displayLabel,
+    description,
+    rawDescription,
+    hidden,
+    schema,
+    uiSchema,
+    registry,
+    children,
+    ...otherProps
+  } = props;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
@@ -39,8 +54,13 @@ export default function FieldTemplate<
       {...otherProps}
     >
       {children}
-      {help}
+      {displayLabel && rawDescription && (
+        <Text size='sm' mt={5}>
+          {description}
+        </Text>
+      )}
       {errors}
+      {help}
     </WrapIfAdditionalTemplate>
   );
 }

packages/mantine/src/templates/ObjectFieldTemplate.tsx

@@ -71,6 +71,7 @@ export default function ObjectFieldTemplate<
         cols={gridCols}
         spacing={gridSpacing as MantineSpacing | undefined}
         verticalSpacing={gridVerticalSpacing as MantineSpacing | undefined}
+        mb='sm'
       >
         {properties
           .filter((e) => !e.hidden)

packages/mantine/src/templates/index.ts

@@ -4,6 +4,7 @@ import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
+import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import ButtonTemplates from './ButtonTemplates';
 import FieldErrorTemplate from './FieldErrorTemplate';
@@ -24,6 +25,7 @@ export function generateTemplates<
     ArrayFieldTitleTemplate,
     BaseInputTemplate,
     ButtonTemplates: ButtonTemplates<T, S, F>(),
+    DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
     FieldErrorTemplate,
     FieldTemplate,