fix(ui): properly handles column selector labels

packages/ui/src/elements/ColumnSelector/index.tsx

@@ -41,7 +41,7 @@ export const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
       {columns.map((col, i) => {
         if (!col) return null
 
-        const { name, accessor, active, label } = col
+        const { Label, accessor, active } = col
 
         if (col.accessor === '_select') return null
 
@@ -60,7 +60,7 @@ export const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
               toggleColumn(accessor)
             }}
           >
-            {label}
+            {Label}
           </Pill>
         )
       })}

packages/ui/src/elements/SortColumn/index.tsx

@@ -5,11 +5,14 @@ import queryString from 'qs'
 import React, { useCallback } from 'react'
 
 export type SortColumnProps = {
+  Label: React.ReactNode
   disable?: boolean
-  label: React.ReactNode
+  label?: FieldBase['label']
   name: string
 }
 
+import type { FieldBase } from 'payload/types'
+
 import { Chevron } from '../../icons/Chevron/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -18,7 +21,7 @@ import './index.scss'
 const baseClass = 'sort-column'
 
 export const SortColumn: React.FC<SortColumnProps> = (props) => {
-  const { name, disable = false, label } = props
+  const { name, Label, disable = false, label } = props
   const { searchParams } = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()
@@ -52,7 +55,7 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
 
   return (
     <div className={baseClass}>
-      <span className={`${baseClass}__label`}>{label}</span>
+      <span className={`${baseClass}__label`}>{Label}</span>
       {!disable && (
         <div className={`${baseClass}__buttons`}>
           <button

packages/ui/src/elements/Table/index.tsx

@@ -16,6 +16,7 @@ export { TableCellProvider }
 const baseClass = 'table'
 
 export type Column = {
+  Label: React.ReactNode
   accessor: string
   active: boolean
   cellProps?: Partial<CellComponentProps>
@@ -23,7 +24,6 @@ export type Column = {
     Cell: React.ReactNode
     Heading: React.ReactNode
   }
-  label: React.ReactNode
   name: FieldBase['name']
 }
 

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

@@ -72,20 +72,24 @@ export const buildColumnState = (args: {
         <DefaultCell {...field.cellComponentProps} />
       )
 
+    const Label = (
+      <FieldLabel
+        CustomLabel={field.fieldComponentProps.CustomLabel}
+        {...field.fieldComponentProps.labelProps}
+        unstyled
+      />
+    )
+
     const Heading = (
       <SortColumn
+        Label={Label}
         disable={
           ('disableSort' in field && Boolean(field.disableSort)) ||
           fieldIsPresentationalOnly(field) ||
           undefined
         }
-        label={
-          <FieldLabel
-            CustomLabel={field.fieldComponentProps.CustomLabel}
-            {...field.fieldComponentProps.labelProps}
-            unstyled
-          />
-        }
+        // eslint-disable-next-line react/jsx-no-duplicate-props
+        label={'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined}
         name={'name' in field ? field.name : undefined}
       />
     )
@@ -93,6 +97,7 @@ export const buildColumnState = (args: {
     if (field) {
       const column: Column = {
         name,
+        Label,
         accessor: name,
         active,
         cellProps: {
@@ -103,13 +108,6 @@ export const buildColumnState = (args: {
           Cell,
           Heading,
         },
-        label: (
-          <FieldLabel
-            CustomLabel={field.fieldComponentProps.CustomLabel}
-            {...field.fieldComponentProps.labelProps}
-            unstyled
-          />
-        ),
       }
 
       acc.push(column)

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

@@ -1,5 +1,5 @@
 'use client'
-import type { DocumentPreferences, RowLabel as RowLabelType } from 'payload/types'
+import type { DocumentPreferences, FieldBase, RowLabel as RowLabelType } from 'payload/types'
 
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
@@ -28,6 +28,7 @@ import type { FormFieldBase } from '../shared/index.js'
 export type CollapsibleFieldProps = FormFieldBase & {
   fieldMap: FieldMap
   initCollapsed?: boolean
+  label?: FieldBase['label']
   permissions: FieldPermissions
   width?: string
 }

packages/ui/src/fields/Relationship/types.ts

@@ -1,5 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
-import type { ClientCollectionConfig, RelationshipField } from 'payload/types'
+import type { ClientCollectionConfig, FieldBase, RelationshipField } from 'payload/types'
 import type { SanitizedConfig } from 'payload/types'
 
 import type { FormFieldBase } from '../shared/index.js'
@@ -8,6 +8,7 @@ export type RelationshipFieldProps = FormFieldBase & {
   allowCreate?: RelationshipField['admin']['allowCreate']
   hasMany?: boolean
   isSortable?: boolean
+  label?: FieldBase['label']
   name: string
   relationTo?: RelationshipField['relationTo']
   sortOptions?: RelationshipField['admin']['sortOptions']

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

@@ -1,9 +1,11 @@
+import type { FieldBase } from 'packages/payload/src/exports/types.js'
 import type React from 'react'
 
 import type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared/index.js'
 
 export type RichTextFieldProps = FormFieldBase & {
+  label?: FieldBase['label']
   name: string
   richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>
   width?: string

packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx

@@ -2,6 +2,7 @@ import type { FieldDescriptionProps } from '@payloadcms/ui/forms/FieldDescriptio
 import type {
   CellComponentProps,
   Field,
+  FieldBase,
   FieldWithPath,
   LabelProps,
   RowLabelComponent,
@@ -353,6 +354,7 @@ export const mapFields = (args: {
                 readOnly: readOnlyOverride,
               }),
               initCollapsed: field.admin?.initCollapsed,
+              label: !CustomCollapsibleLabel ? (field.label as FieldBase['label']) : undefined,
               readOnly: field.admin?.readOnly,
               required: field.required,
               style: field.admin?.style,
@@ -387,6 +389,7 @@ export const mapFields = (args: {
               name: field.name,
               className: field.admin?.className,
               disabled: field.admin?.disabled,
+              label: field.label,
               placeholder: field.admin?.placeholder,
               readOnly: field.admin?.readOnly,
               required: field.required,
@@ -411,6 +414,7 @@ export const mapFields = (args: {
                 parentPath: path,
                 readOnly: readOnlyOverride,
               }),
+              label: field.label,
               readOnly: field.admin?.readOnly,
               style: field.admin?.style,
               width: field.admin?.width,
@@ -426,6 +430,7 @@ export const mapFields = (args: {
               className: field.admin?.className,
               disabled: field.admin?.disabled,
               editorOptions: field.admin?.editorOptions,
+              label: field.label,
               readOnly: field.admin?.readOnly,
               required: field.required,
               style: field.admin?.style,
@@ -442,6 +447,7 @@ export const mapFields = (args: {
               className: field.admin?.className,
               disabled: field.admin?.disabled,
               hasMany: field.hasMany,
+              label: field.label,
               max: field.max,
               maxRows: field.maxRows,
               min: field.min,
@@ -461,6 +467,7 @@ export const mapFields = (args: {
               name: field.name,
               className: field.admin?.className,
               disabled: field.admin?.disabled,
+              label: field.label,
               readOnly: field.admin?.readOnly,
               required: field.required,
               style: field.admin?.style,
@@ -478,6 +485,7 @@ export const mapFields = (args: {
               className: field.admin?.className,
               disabled: field.admin?.disabled,
               hasMany: field.hasMany,
+              label: field.label,
               readOnly: field.admin?.readOnly,
               relationTo: field.relationTo,
               required: field.required,
@@ -495,6 +503,7 @@ export const mapFields = (args: {
               name: field.name,
               className: field.admin?.className,
               disabled: field.admin?.disabled,
+              label: field.label,
               options: field.options,
               readOnly: field.admin?.readOnly,
               required: field.required,
@@ -511,6 +520,7 @@ export const mapFields = (args: {
               name: field.name,
               className: field.admin?.className,
               disabled: field.admin?.disabled,
+              label: field.label,
               readOnly: field.admin?.readOnly,
               required: field.required,
               style: field.admin?.style,
@@ -603,6 +613,7 @@ export const mapFields = (args: {
               className: field.admin?.className,
               disabled: field.admin?.disabled,
               hasMany: field.hasMany,
+              label: field.label,
               maxLength: field.maxLength,
               minLength: field.minLength,
               placeholder: field.admin?.placeholder,
@@ -621,6 +632,7 @@ export const mapFields = (args: {
               name: field.name,
               className: field.admin?.className,
               disabled: field.admin?.disabled,
+              label: field.label,
               maxLength: field.maxLength,
               minLength: field.minLength,
               placeholder: field.admin?.placeholder,
@@ -645,6 +657,7 @@ export const mapFields = (args: {
               className: field.admin?.className,
               disabled: field.admin?.disabled,
               filterOptions: field.filterOptions,
+              label: field.label,
               readOnly: field.admin?.readOnly,
               relationTo: field.relationTo,
               required: field.required,
@@ -663,6 +676,7 @@ export const mapFields = (args: {
               disabled: field.admin?.disabled,
               hasMany: field.hasMany,
               isClearable: field.admin?.isClearable,
+              label: field.label,
               options: field.options,
               readOnly: field.admin?.readOnly,
               required: field.required,
@@ -722,6 +736,9 @@ export const mapFields = (args: {
       fieldComponentProps: {
         name: 'id',
         label: 'ID',
+        labelProps: {
+          label: 'ID',
+        },
       },
       fieldIsPresentational: false,
       isFieldAffectingData: true,