fix(ui): properly extracts label from field in FieldLabel component (#8190)

Although the `<FieldLabel />` component receives a `field` prop, it does
not use this prop to extract the `label` from the field. This is
currently only an issue when rendering this component directly, such as
within `admin.components.Label`. The label simply won't appear unless
explicitly provided, despite it being passed as `field.label`. This is
not an issue when rendering field components themselves, because they
properly thread this value through as a top-level prop.

Here's an example of the issue:

```tsx
import type { TextFieldLabelServerComponent } from 'payload'

import { FieldLabel } from '@payloadcms/ui'
import React from 'react'

export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
  return (
    <FieldLabel
      field={clientField}
      label={clientField.label} // this should not be needed!
    />
  )
}
```

Here is the end result:

```tsx
import type { TextFieldLabelServerComponent } from 'payload'

import { FieldLabel } from '@payloadcms/ui'
import React from 'react'

export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
  return <FieldLabel field={clientField} />
}
```

Author: jacobsfletch

packages/payload/src/admin/forms/Label.ts

@@ -1,5 +1,5 @@
 import type { ServerProps, StaticLabel } from '../../config/types.js'
-import type { ClientField, Field } from '../../fields/config/types.js'
+import type { Field } from '../../fields/config/types.js'
 import type { MappedComponent } from '../types.js'
 import type { ClientFieldWithOptionalType } from './Field.js'
 
@@ -27,7 +27,7 @@ export type FieldLabelServerProps<
 } & GenericLabelProps &
   Partial<ServerProps>
 
-export type SanitizedLabelProps<TFieldClient extends ClientField> = Omit<
+export type SanitizedLabelProps<TFieldClient extends ClientFieldWithOptionalType> = Omit<
   FieldLabelClientProps<TFieldClient>,
   'label' | 'required'
 >

packages/richtext-lexical/src/field/Field.tsx

@@ -41,7 +41,6 @@ const RichTextComponent: React.FC<
         style,
         width,
       } = {},
-      label,
       required,
     },
     field,
@@ -101,13 +100,7 @@ const RichTextComponent: React.FC<
         {...(errorProps || {})}
         alignCaret="left"
       />
-      <FieldLabel
-        field={field}
-        Label={Label}
-        label={label}
-        required={required}
-        {...(labelProps || {})}
-      />
+      <FieldLabel field={field} Label={Label} {...(labelProps || {})} />
       <div className={`${baseClass}__wrap`}>
         <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
           <LexicalProvider

packages/richtext-slate/src/field/RichText.tsx

@@ -66,7 +66,6 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
         style,
         width,
       } = {},
-      label,
       required,
     },
     labelProps,
@@ -321,13 +320,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldLabel
-        Label={Label}
-        label={label}
-        required={required}
-        {...(labelProps || {})}
-        field={field}
-      />
+      <FieldLabel Label={Label} {...(labelProps || {})} field={field} />
       <div className={`${baseClass}__wrap`}>
         <FieldError CustomError={Error} field={field} path={path} {...(errorProps || {})} />
         <Slate

packages/ui/src/elements/TableColumns/buildColumnState.tsx

@@ -101,14 +101,7 @@ export const buildColumnState = (args: Args): Column[] => {
         ? field.admin.components.Label
         : undefined
 
-    const Label = (
-      <FieldLabel
-        field={field}
-        Label={CustomLabelToRender}
-        label={'label' in field ? (field.label as StaticLabel) : undefined}
-        unstyled
-      />
-    )
+    const Label = <FieldLabel field={field} Label={CustomLabelToRender} unstyled />
 
     const fieldAffectsDataSubFields =
       field &&

packages/ui/src/fields/Array/index.tsx

@@ -239,8 +239,6 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
                 as="span"
                 field={field}
                 Label={field?.admin?.components?.Label}
-                label={label}
-                required={required}
                 unstyled
                 {...(labelProps || {})}
               />

packages/ui/src/fields/Blocks/index.tsx

@@ -231,8 +231,6 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
                 as="span"
                 field={field}
                 Label={field?.admin?.components?.Description}
-                label={label}
-                required={required}
                 unstyled
                 {...(labelProps || {})}
               />

packages/ui/src/fields/Code/index.tsx

@@ -83,13 +83,7 @@ const CodeFieldComponent: CodeFieldClientComponent = (props) => {
         width,
       }}
     >
-      <FieldLabel
-        field={field}
-        Label={field?.admin?.components?.Label}
-        label={label}
-        required={required}
-        {...(labelProps || {})}
-      />
+      <FieldLabel field={field} Label={field?.admin?.components?.Label} {...(labelProps || {})} />
       <div className={`${fieldBaseClass}__wrap`}>
         <FieldError
           CustomError={field?.admin?.components?.Error}

packages/ui/src/fields/DateTime/index.tsx

@@ -81,13 +81,7 @@ const DateTimeFieldComponent: DateFieldClientComponent = (props) => {
         width,
       }}
     >
-      <FieldLabel
-        field={field}
-        Label={field?.admin?.components?.Label}
-        label={label}
-        required={required}
-        {...(labelProps || {})}
-      />
+      <FieldLabel field={field} Label={field?.admin?.components?.Label} {...(labelProps || {})} />
       <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\./g, '__')}`}>
         <FieldError
           CustomError={field?.admin?.components?.Error}

packages/ui/src/fields/Email/index.tsx

@@ -77,13 +77,7 @@ const EmailFieldComponent: EmailFieldClientComponent = (props) => {
         width,
       }}
     >
-      <FieldLabel
-        field={field}
-        Label={field?.admin?.components?.Label}
-        label={label}
-        required={required}
-        {...(labelProps || {})}
-      />
+      <FieldLabel field={field} Label={field?.admin?.components?.Label} {...(labelProps || {})} />
       <div className={`${fieldBaseClass}__wrap`}>
         <FieldError
           CustomError={field?.admin?.components?.Error}

packages/ui/src/fields/FieldLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FieldLabelClientComponent, GenericLabelProps } from 'payload'
+import type { FieldLabelClientComponent, GenericLabelProps, StaticLabel } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
@@ -44,9 +44,25 @@ const DefaultFieldLabel: React.FC<GenericLabelProps> = (props) => {
 export const FieldLabel: FieldLabelClientComponent = (props) => {
   const { Label, ...rest } = props
 
+  // Don't get `Label` from `field.admin.components.Label` here because
+  // this will cause an infinite loop when threading field through custom usages of `FieldLabel`
   if (Label) {
     return <RenderComponent clientProps={rest} mappedComponent={Label} />
   }
 
-  return <DefaultFieldLabel {...rest} />
+  return (
+    <DefaultFieldLabel
+      {...rest}
+      label={
+        typeof props?.label !== 'undefined'
+          ? props.label
+          : props?.field && 'label' in props.field && (props.field.label as StaticLabel) // type assertion needed for `row` fields
+      }
+      required={
+        typeof props.required !== 'undefined'
+          ? props.required
+          : props?.field && 'required' in props.field && (props.field?.required as boolean) // type assertion needed for `group` fields
+      }
+    />
+  )
 }