From 64d6163f1330ff00a97f372da72472629e68bd77 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Thu, 21 Mar 2024 11:23:51 -0400
Subject: [PATCH] chore(ui): consolidates field label, error, and description
 components

---
 .../fields/Iterable/index.tsx                 | 14 ++++---
 .../fields/Nested/index.tsx                   | 14 ++++---
 .../fields/Relationship/index.tsx             |  4 +-
 .../RenderFieldsToDiff/fields/Text/index.tsx  |  1 +
 packages/payload/src/admin/forms/Error.ts     |  1 +
 packages/payload/src/admin/forms/Label.ts     |  1 +
 .../elements/TableColumns/buildColumns.tsx    | 10 ++++-
 packages/ui/src/fields/Array/index.tsx        | 10 ++---
 packages/ui/src/fields/Blocks/index.tsx       | 10 ++---
 packages/ui/src/fields/Checkbox/Input.tsx     |  2 +-
 packages/ui/src/fields/Checkbox/index.tsx     |  2 +-
 packages/ui/src/fields/Code/index.tsx         |  4 +-
 packages/ui/src/fields/Collapsible/index.tsx  |  8 +---
 packages/ui/src/fields/DateTime/index.tsx     |  4 +-
 packages/ui/src/fields/Email/index.tsx        |  4 +-
 packages/ui/src/fields/JSON/index.tsx         |  4 +-
 packages/ui/src/fields/Number/index.tsx       |  4 +-
 packages/ui/src/fields/Password/index.tsx     |  4 +-
 packages/ui/src/fields/Point/index.tsx        |  6 +--
 packages/ui/src/fields/RadioGroup/index.tsx   |  4 +-
 packages/ui/src/fields/Relationship/index.tsx |  4 +-
 packages/ui/src/fields/Select/index.tsx       |  4 +-
 packages/ui/src/fields/Text/Input.tsx         |  4 +-
 packages/ui/src/fields/Textarea/Input.tsx     |  4 +-
 packages/ui/src/fields/Upload/Input.tsx       |  4 +-
 .../ui/src/forms/FieldDescription/index.tsx   | 12 +++++-
 .../ui/src/forms/FieldDescription/types.ts    |  1 +
 packages/ui/src/forms/FieldError/index.tsx    | 12 +++++-
 packages/ui/src/forms/FieldLabel/index.tsx    | 13 +++++-
 .../WatchChildErrors/buildPathSegments.ts     | 42 ++++++++++---------
 30 files changed, 124 insertions(+), 87 deletions(-)

diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
index c158151597..3b674a5fdf 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
@@ -28,12 +28,14 @@ const Iterable: React.FC<Props> = ({
 
   return (
     <div className={baseClass}>
-      {'label' in field.fieldComponentProps && field.fieldComponentProps.label && (
-        <Label>
-          {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-          {getTranslation(field.fieldComponentProps.label, i18n)}
-        </Label>
-      )}
+      {'label' in field.fieldComponentProps &&
+        field.fieldComponentProps.label &&
+        typeof field.fieldComponentProps.label !== 'function' && (
+          <Label>
+            {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
+            {getTranslation(field.fieldComponentProps.label, i18n)}
+          </Label>
+        )}
       {maxRows > 0 && (
         <React.Fragment>
           {Array.from(Array(maxRows).keys()).map((row, i) => {
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx
index 9258368430..86fd30c00b 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx
@@ -23,12 +23,14 @@ const Nested: React.FC<Props> = ({
 }) => {
   return (
     <div className={baseClass}>
-      {'label' in field.fieldComponentProps && field.fieldComponentProps.label && (
-        <Label>
-          {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-          {getTranslation(field.fieldComponentProps.label, i18n)}
-        </Label>
-      )}
+      {'label' in field.fieldComponentProps &&
+        field.fieldComponentProps.label &&
+        typeof field.fieldComponentProps.label !== 'function' && (
+          <Label>
+            {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
+            {getTranslation(field.fieldComponentProps.label, i18n)}
+          </Label>
+        )}
       <div
         className={[`${baseClass}__wrap`, !disableGutter && `${baseClass}__wrap--gutter`]
           .filter(Boolean)
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
index a94399640c..057edc8e2d 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
@@ -99,7 +99,9 @@ const Relationship: React.FC<Props> = ({ comparison, field, i18n, locale, versio
   }
 
   const label =
-    'label' in field.fieldComponentProps && typeof field.fieldComponentProps.label !== 'boolean'
+    'label' in field.fieldComponentProps &&
+    typeof field.fieldComponentProps.label !== 'boolean' &&
+    typeof field.fieldComponentProps.label !== 'function'
       ? field.fieldComponentProps.label
       : ''
 
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
index 2fc22b61f3..1a59bab27b 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
@@ -36,6 +36,7 @@ const Text: React.FC<Props> = ({
       <Label>
         {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
         {'label' in field.fieldComponentProps &&
+          typeof field.fieldComponentProps.label !== 'function' &&
           getTranslation(field.fieldComponentProps.label || '', i18n)}
       </Label>
       <DiffViewer
diff --git a/packages/payload/src/admin/forms/Error.ts b/packages/payload/src/admin/forms/Error.ts
index 574f8beda3..8d3472e05a 100644
--- a/packages/payload/src/admin/forms/Error.ts
+++ b/packages/payload/src/admin/forms/Error.ts
@@ -1,4 +1,5 @@
 export type ErrorProps = {
+  CustomError?: React.ReactNode
   alignCaret?: 'center' | 'left' | 'right'
   message?: string
   path?: string
diff --git a/packages/payload/src/admin/forms/Label.ts b/packages/payload/src/admin/forms/Label.ts
index 97d11005fd..f5761e255b 100644
--- a/packages/payload/src/admin/forms/Label.ts
+++ b/packages/payload/src/admin/forms/Label.ts
@@ -1,4 +1,5 @@
 export type LabelProps = {
+  CustomLabel?: React.ReactNode
   htmlFor?: string
   label?: JSX.Element | Record<string, string> | false | string
   required?: boolean
diff --git a/packages/ui/src/elements/TableColumns/buildColumns.tsx b/packages/ui/src/elements/TableColumns/buildColumns.tsx
index f3f7f2e3ef..d6d1a77049 100644
--- a/packages/ui/src/elements/TableColumns/buildColumns.tsx
+++ b/packages/ui/src/elements/TableColumns/buildColumns.tsx
@@ -79,7 +79,9 @@ export const buildColumns = (args: {
           undefined
         }
         label={
-          'label' in field.fieldComponentProps && field.fieldComponentProps.label
+          'label' in field.fieldComponentProps &&
+          field.fieldComponentProps.label &&
+          typeof field.fieldComponentProps.label !== 'function'
             ? field.fieldComponentProps.label
             : 'name' in field
               ? field.name
@@ -102,7 +104,11 @@ export const buildColumns = (args: {
           Cell,
           Heading,
         },
-        label: 'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined,
+        label:
+          'label' in field.fieldComponentProps &&
+          typeof field.fieldComponentProps.label !== 'function'
+            ? field.fieldComponentProps.label
+            : undefined,
       }
 
       acc.push(column)
diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx
index 41ba5ddb76..0e64d1f538 100644
--- a/packages/ui/src/fields/Array/index.tsx
+++ b/packages/ui/src/fields/Array/index.tsx
@@ -198,14 +198,14 @@ export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
     >
       {showError && (
         <div className={`${baseClass}__error-wrap`}>
-          {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+          <FieldError CustomError={CustomError} {...(errorProps || {})} />
         </div>
       )}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__header-content`}>
             <h3 className={`${baseClass}__title`}>
-              {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+              <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
             </h3>
             {fieldHasErrors && fieldErrorCount > 0 && (
               <ErrorPill count={fieldErrorCount} i18n={i18n} withMessage />
@@ -234,11 +234,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
             </ul>
           )}
         </div>
-        {CustomDescription !== undefined ? (
-          CustomDescription
-        ) : (
-          <FieldDescription {...(descriptionProps || {})} />
-        )}
+        <FieldDescription CustomDescription={CustomDescription} {...(descriptionProps || {})} />
       </header>
       <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
       {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (
diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx
index 1b4be4edb2..c619f86507 100644
--- a/packages/ui/src/fields/Blocks/index.tsx
+++ b/packages/ui/src/fields/Blocks/index.tsx
@@ -208,14 +208,14 @@ export const BlocksField: React.FC<BlocksFieldProps> = (props) => {
     >
       {showError && (
         <div className={`${baseClass}__error-wrap`}>
-          {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+          <FieldError CustomError={CustomError} {...(errorProps || {})} />
         </div>
       )}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__heading-with-error`}>
             <h3>
-              {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+              <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
             </h3>
             {fieldHasErrors && fieldErrorCount > 0 && (
               <ErrorPill count={fieldErrorCount} i18n={i18n} withMessage />
@@ -244,11 +244,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = (props) => {
             </ul>
           )}
         </div>
-        {CustomDescription !== undefined ? (
-          CustomDescription
-        ) : (
-          <FieldDescription {...(descriptionProps || {})} />
-        )}
+        <FieldDescription CustomDescription={CustomDescription} {...(descriptionProps || {})} />
       </header>
       <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
       {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (
diff --git a/packages/ui/src/fields/Checkbox/Input.tsx b/packages/ui/src/fields/Checkbox/Input.tsx
index fb90d61433..b6aea9ad6a 100644
--- a/packages/ui/src/fields/Checkbox/Input.tsx
+++ b/packages/ui/src/fields/Checkbox/Input.tsx
@@ -74,7 +74,7 @@ export const CheckboxInput: React.FC<Props> = ({
         </span>
         {AfterInput}
       </div>
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx
index 3c23188009..43c52d0eda 100644
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -90,7 +90,7 @@ const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+        <FieldError CustomError={CustomError} {...(errorProps || {})} />
       </div>
       <CheckboxInput
         AfterInput={AfterInput}
diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx
index 44026aefd9..13e399b711 100644
--- a/packages/ui/src/fields/Code/index.tsx
+++ b/packages/ui/src/fields/Code/index.tsx
@@ -83,8 +83,8 @@ const CodeField: React.FC<CodeFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <div>
         {BeforeInput}
         <CodeEditor
diff --git a/packages/ui/src/fields/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx
index 439ced86f0..e676585506 100644
--- a/packages/ui/src/fields/Collapsible/index.tsx
+++ b/packages/ui/src/fields/Collapsible/index.tsx
@@ -124,7 +124,7 @@ const CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
           collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
           header={
             <div className={`${baseClass}__row-label-wrap`}>
-              {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+              <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
               {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
             </div>
           }
@@ -141,11 +141,7 @@ const CollapsibleField: React.FC<CollapsibleFieldProps> = (props) => {
             schemaPath={schemaPath}
           />
         </CollapsibleElement>
-        {CustomDescription !== undefined ? (
-          CustomDescription
-        ) : (
-          <FieldDescription {...(descriptionProps || {})} />
-        )}
+        <FieldDescription CustomDescription={CustomDescription} {...(descriptionProps || {})} />
       </div>
     </Fragment>
   )
diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx
index fc88ae243d..124f6a0e6a 100644
--- a/packages/ui/src/fields/DateTime/index.tsx
+++ b/packages/ui/src/fields/DateTime/index.tsx
@@ -87,9 +87,9 @@ const DateTimeField: React.FC<DateFieldProps> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+        <FieldError CustomError={CustomError} {...(errorProps || {})} />
       </div>
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <div className={`${baseClass}__input-wrapper`} id={`field-${path.replace(/\./g, '__')}`}>
         {BeforeInput}
         <DatePickerField
diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx
index 039221c8d2..a910e1ddd0 100644
--- a/packages/ui/src/fields/Email/index.tsx
+++ b/packages/ui/src/fields/Email/index.tsx
@@ -73,8 +73,8 @@ const EmailField: React.FC<EmailFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <div>
         {BeforeInput}
         <input
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
index ee5600dcd1..6738182de9 100644
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -111,8 +111,8 @@ const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <div>
         {BeforeInput}
         <CodeEditor
diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx
index 59200c1042..f89d12c65c 100644
--- a/packages/ui/src/fields/Number/index.tsx
+++ b/packages/ui/src/fields/Number/index.tsx
@@ -151,8 +151,8 @@ const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
       {hasMany ? (
         <ReactSelect
           className={`field-${path.replace(/\./g, '__')}`}
diff --git a/packages/ui/src/fields/Password/index.tsx b/packages/ui/src/fields/Password/index.tsx
index 06eaae230d..4e8fd30a86 100644
--- a/packages/ui/src/fields/Password/index.tsx
+++ b/packages/ui/src/fields/Password/index.tsx
@@ -67,8 +67,8 @@ export const PasswordField: React.FC<PasswordFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <input
         autoComplete={autoComplete}
         disabled={formProcessing || disabled}
diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx
index 4927ae1906..44b77c6d66 100644
--- a/packages/ui/src/fields/Point/index.tsx
+++ b/packages/ui/src/fields/Point/index.tsx
@@ -100,10 +100,10 @@ const PointField: React.FC<PointFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
       <ul className={`${baseClass}__wrap`}>
         <li>
-          {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+          <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
           <div className="input-wrapper">
             {BeforeInput}
             <input
@@ -120,7 +120,7 @@ const PointField: React.FC<PointFieldProps> = (props) => {
           </div>
         </li>
         <li>
-          {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+          <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
           <div className="input-wrapper">
             {BeforeInput}
             <input
diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
index 6560742fe2..df59193548 100644
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -96,9 +96,9 @@ const RadioGroupField: React.FC<RadioFieldProps> = (props) => {
       }}
     >
       <div className={`${baseClass}__error-wrap`}>
-        {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
+        <FieldError CustomError={CustomError} {...(errorProps || {})} />
       </div>
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>
         {options.map((option) => {
           let optionValue = ''
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 6ec6e59920..4296ce3db2 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -440,8 +440,8 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       {!errorLoading && (
         <div className={`${baseClass}__wrap`}>
           <ReactSelect
diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx
index eb93fa4705..4e916ebe09 100644
--- a/packages/ui/src/fields/Select/index.tsx
+++ b/packages/ui/src/fields/Select/index.tsx
@@ -145,8 +145,8 @@ export const SelectField: React.FC<SelectFieldProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       <div>
         {BeforeInput}
         <ReactSelect
diff --git a/packages/ui/src/fields/Text/Input.tsx b/packages/ui/src/fields/Text/Input.tsx
index f6cdb8ad13..e413423e05 100644
--- a/packages/ui/src/fields/Text/Input.tsx
+++ b/packages/ui/src/fields/Text/Input.tsx
@@ -58,8 +58,8 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       {hasMany ? (
         <ReactSelect
           className={`field-${path.replace(/\./g, '__')}`}
diff --git a/packages/ui/src/fields/Textarea/Input.tsx b/packages/ui/src/fields/Textarea/Input.tsx
index 2eb913c3bd..4d35e8a156 100644
--- a/packages/ui/src/fields/Textarea/Input.tsx
+++ b/packages/ui/src/fields/Textarea/Input.tsx
@@ -52,8 +52,8 @@ export const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         width,
       }}
     >
-      {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-      {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+      <FieldError CustomError={CustomError} {...(errorProps || {})} />
+      <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
       {BeforeInput}
       <label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
         <div className="textarea-inner">
diff --git a/packages/ui/src/fields/Upload/Input.tsx b/packages/ui/src/fields/Upload/Input.tsx
index a47ebe32dc..909cfb2ed5 100644
--- a/packages/ui/src/fields/Upload/Input.tsx
+++ b/packages/ui/src/fields/Upload/Input.tsx
@@ -131,8 +131,8 @@ export const UploadInput: React.FC<UploadInputProps> = (props) => {
           width,
         }}
       >
-        {CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
-        {CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
+        <FieldError CustomError={CustomError} {...(errorProps || {})} />
+        <FieldLabel CustomLabel={CustomLabel} {...(labelProps || {})} />
         {collection?.upload && (
           <React.Fragment>
             {file && !missingFile && (
diff --git a/packages/ui/src/forms/FieldDescription/index.tsx b/packages/ui/src/forms/FieldDescription/index.tsx
index ddff29dd2c..3fa5fbf471 100644
--- a/packages/ui/src/forms/FieldDescription/index.tsx
+++ b/packages/ui/src/forms/FieldDescription/index.tsx
@@ -12,7 +12,7 @@ export { FieldDescriptionProps }
 
 const baseClass = 'field-description'
 
-export const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {
+const DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {
   const { className, description, marginPlacement } = props
 
   const { path } = useFieldProps()
@@ -38,3 +38,13 @@ export const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {
 
   return null
 }
+
+export const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {
+  const { CustomDescription } = props
+
+  if (CustomDescription !== undefined) {
+    return CustomDescription
+  }
+
+  return <DefaultFieldDescription {...props} />
+}
diff --git a/packages/ui/src/forms/FieldDescription/types.ts b/packages/ui/src/forms/FieldDescription/types.ts
index 2e9a25b516..7e60cc0e88 100644
--- a/packages/ui/src/forms/FieldDescription/types.ts
+++ b/packages/ui/src/forms/FieldDescription/types.ts
@@ -1,4 +1,5 @@
 export type FieldDescriptionProps = {
+  CustomDescription?: React.ReactNode
   className?: string
   description?: Record<string, string> | string
   marginPlacement?: 'bottom' | 'top'
diff --git a/packages/ui/src/forms/FieldError/index.tsx b/packages/ui/src/forms/FieldError/index.tsx
index 176223600a..2f7a9d1cdd 100644
--- a/packages/ui/src/forms/FieldError/index.tsx
+++ b/packages/ui/src/forms/FieldError/index.tsx
@@ -11,7 +11,7 @@ import './index.scss'
 
 const baseClass = 'field-error'
 
-export const FieldError: React.FC<ErrorProps> = (props) => {
+const DefaultFieldError: React.FC<ErrorProps> = (props) => {
   const {
     alignCaret = 'right',
     message: messageFromProps,
@@ -40,3 +40,13 @@ export const FieldError: React.FC<ErrorProps> = (props) => {
 
   return null
 }
+
+export const FieldError: React.FC<ErrorProps> = (props) => {
+  const { CustomError } = props
+
+  if (CustomError !== undefined) {
+    return CustomError
+  }
+
+  return <DefaultFieldError {...props} />
+}
diff --git a/packages/ui/src/forms/FieldLabel/index.tsx b/packages/ui/src/forms/FieldLabel/index.tsx
index 9ae6a2caf5..e006591106 100644
--- a/packages/ui/src/forms/FieldLabel/index.tsx
+++ b/packages/ui/src/forms/FieldLabel/index.tsx
@@ -10,8 +10,9 @@ import { useFieldProps } from '../FieldPropsProvider/index.js'
 import { useForm } from '../Form/context.js'
 import './index.scss'
 
-export const FieldLabel: React.FC<LabelProps> = (props) => {
+const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
   const { htmlFor: htmlForFromProps, label: labelFromProps, required = false } = props
+
   const { uuid } = useForm()
   const { path } = useFieldProps()
   const htmlFor = htmlForFromProps || generateFieldID(path, uuid)
@@ -29,3 +30,13 @@ export const FieldLabel: React.FC<LabelProps> = (props) => {
 
   return null
 }
+
+export const FieldLabel: React.FC<LabelProps> = (props) => {
+  const { CustomLabel } = props
+
+  if (CustomLabel !== undefined) {
+    return CustomLabel
+  }
+
+  return <DefaultFieldLabel {...props} />
+}
diff --git a/packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts b/packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts
index 955aa3948a..fdb94eda30 100644
--- a/packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts
+++ b/packages/ui/src/forms/WatchChildErrors/buildPathSegments.ts
@@ -1,32 +1,34 @@
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 export const buildPathSegments = (parentPath: string, fieldMap: FieldMap): string[] => {
-  const pathNames = fieldMap.reduce((acc, subField) => {
-    if ('fieldMap' in subField.fieldComponentProps) {
-      const fieldMap = subField.fieldComponentProps.fieldMap
+  const pathNames = fieldMap.reduce((acc, field) => {
+    const fieldMap =
+      'fieldMap' in field.fieldComponentProps ? field.fieldComponentProps.fieldMap : undefined
 
-      if (fieldMap && subField.isFieldAffectingData) {
+    if (fieldMap) {
+      if (field.isFieldAffectingData) {
         // group, block, array
-        const name = 'name' in subField ? subField.name : 'unnamed'
+        const name = 'name' in field ? field.name : 'unnamed'
         acc.push(parentPath ? `${parentPath}.${name}.` : `${name}.`)
-      } else if (fieldMap) {
+      } else {
         // rows, collapsibles, unnamed-tab
         acc.push(...buildPathSegments(parentPath, fieldMap))
-      } else if (subField.type === 'tabs') {
-        // tabs
-        'tabs' in subField.fieldComponentProps &&
-          subField.fieldComponentProps?.tabs?.forEach((tab) => {
-            let tabPath = parentPath
-            if ('name' in tab) {
-              tabPath = parentPath ? `${parentPath}.${tab.name}` : tab.name
-            }
-            acc.push(...buildPathSegments(tabPath, tab.fieldMap))
-          })
-      } else if (subField.isFieldAffectingData) {
-        // text, number, date, etc.
-        const name = 'name' in subField ? subField.name : 'unnamed'
-        acc.push(parentPath ? `${parentPath}.${name}` : name)
       }
+    } else if (field.type === 'tabs') {
+      // tabs
+      if ('tabs' in field.fieldComponentProps) {
+        field.fieldComponentProps.tabs?.forEach((tab) => {
+          let tabPath = parentPath
+          if ('name' in tab) {
+            tabPath = parentPath ? `${parentPath}.${tab.name}` : tab.name
+          }
+          acc.push(...buildPathSegments(tabPath, tab.fieldMap))
+        })
+      }
+    } else if (field.isFieldAffectingData) {
+      // text, number, date, etc.
+      const name = 'name' in field ? field.name : 'unnamed'
+      acc.push(parentPath ? `${parentPath}.${name}` : name)
     }
 
     return acc