feat: add customizable admin field descriptions

src/admin/components/forms/Label/index.scss

@@ -3,7 +3,7 @@
 label.field-label {
   display: flex;
   padding-bottom: base(.25);
-  color: $color-gray;
+  color: $color-dark-gray;
 
   .required {
     color: $color-red;

src/admin/components/forms/RenderFieldDescription/index.scss

@@ -0,0 +1,8 @@
+@import '../../../scss/styles.scss';
+
+.field-description {
+  display: flex;
+  padding-top: base(.25);
+  padding-bottom: base(.25);
+  color: $color-gray;
+}

src/admin/components/forms/RenderFieldDescription/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+
+const RenderFieldDescription: React.FC<Props> = (props) => {
+  const {
+    description,
+    value,
+    CustomComponent,
+  } = props;
+
+  if (CustomComponent) {
+    return (
+      <div
+        className="field-description"
+      >
+        <CustomComponent value />
+      </div>
+    );
+  }
+
+  if (description) {
+    return (
+      <div
+        className="field-description"
+      >
+        {typeof description === 'function' ? description({ value }) : description}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default RenderFieldDescription;

src/admin/components/forms/RenderFieldDescription/types.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  description?: string | ((value) => string);
+  CustomComponent?: React.ComponentType<{ value: unknown }>;
+  value: unknown;
+}

src/admin/components/forms/field-types/Text/index.tsx

@@ -5,6 +5,7 @@ import Label from '../../Label';
 import Error from '../../Error';
 import { text } from '../../../../../fields/validations';
 import { Props } from './types';
+import RenderFieldDescription from '../../RenderFieldDescription';
 
 import './index.scss';
 
@@ -21,6 +22,10 @@ const Text: React.FC<Props> = (props) => {
       style,
       width,
       condition,
+      description,
+      components: {
+        Description,
+      } = {},
     } = {},
   } = props;
 
@@ -73,6 +78,11 @@ const Text: React.FC<Props> = (props) => {
         id={path}
         name={path}
       />
+      <RenderFieldDescription
+        value={value || ''}
+        description={description}
+        CustomComponent={Description}
+      />
     </div>
   );
 };

src/collections/config/types.ts

@@ -99,7 +99,7 @@ export type PayloadCollectionConfig = {
   admin?: {
     useAsTitle?: string;
     defaultColumns?: string[];
-    disableDuplicate?: boolean
+    disableDuplicate?: boolean;
     components?: {
       views?: {
         Edit?: React.ComponentType

src/fields/config/schema.ts

@@ -6,6 +6,10 @@ const component = joi.alternatives().try(
 );
 
 export const baseAdminFields = joi.object().keys({
+  description: joi.alternatives().try(
+    joi.string(),
+    joi.func(),
+  ),
   position: joi.string().valid('sidebar'),
   width: joi.string(),
   style: joi.object().unknown(),
@@ -17,6 +21,7 @@ export const baseAdminFields = joi.object().keys({
     Cell: component,
     Field: component,
     Filter: component,
+    Description: component,
   }).default({}),
 });
 

src/fields/config/types.ts

@@ -22,7 +22,7 @@ export type FieldAccess = (args: {
   siblingData: Record<string, unknown>
 }) => Promise<boolean> | boolean;
 
-export type Condition = (data: Record<string, unknown>, siblingData: Record<string, unknown>) => boolean
+export type Condition = (data: Record<string, unknown>, siblingData: Record<string, unknown>) => boolean;
 
 type Admin = {
   position?: string;
@@ -31,7 +31,13 @@ type Admin = {
   readOnly?: boolean;
   disabled?: boolean;
   condition?: Condition;
-  components?: { [key: string]: React.ComponentType };
+  description?: string | ((data: Record<string, unknown>) => string);
+  components?: {
+    Filter?: React.ComponentType;
+    Cell?: React.ComponentType;
+    Field?: React.ComponentType;
+    Description?: React.ComponentType<{value: unknown}>
+  }
   hidden?: boolean
 }
 
@@ -214,11 +220,11 @@ export type RadioField = FieldBase & {
 }
 
 export type Block = {
-  slug: string,
-  labels?: Labels
-  fields: Field[],
-  imageURL?: string
-  imageAltText?: string
+  slug: string;
+  labels?: Labels;
+  fields: Field[];
+  imageURL?: string;
+  imageAltText?: string;
 }
 
 export type BlockField = FieldBase & {