diff --git a/packages/next/src/views/Versions/buildColumns.tsx b/packages/next/src/views/Versions/buildColumns.tsx index e93a7f3ce0..5870562b87 100644 --- a/packages/next/src/views/Versions/buildColumns.tsx +++ b/packages/next/src/views/Versions/buildColumns.tsx @@ -29,6 +29,7 @@ export const buildVersionColumns = ({ }): Column[] => [ { name: '', + Label: '', accessor: 'updatedAt', active: true, components: { @@ -39,28 +40,27 @@ export const buildVersionColumns = ({ globalSlug={globalConfig?.slug} /> ), - Heading: , + Heading: , }, - label: '', }, { name: '', + Label: '', accessor: 'id', active: true, components: { Cell: , - Heading: , + Heading: , }, - label: '', }, { name: '', + Label: '', accessor: 'autosave', active: true, components: { Cell: , - Heading: , + Heading: , }, - label: '', }, ] diff --git a/packages/ui/src/elements/ColumnSelector/index.tsx b/packages/ui/src/elements/ColumnSelector/index.tsx index 929e1d82ca..b7016aa5a3 100644 --- a/packages/ui/src/elements/ColumnSelector/index.tsx +++ b/packages/ui/src/elements/ColumnSelector/index.tsx @@ -41,7 +41,7 @@ export const ColumnSelector: React.FC = ({ 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 = ({ collectionSlug }) => { toggleColumn(accessor) }} > - {label} + {Label} ) })} diff --git a/packages/ui/src/elements/SortColumn/index.tsx b/packages/ui/src/elements/SortColumn/index.tsx index 5b602b5da1..1c15f72e10 100644 --- a/packages/ui/src/elements/SortColumn/index.tsx +++ b/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 = (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 = (props) => { return ( - {label} + {Label} {!disable && ( @@ -23,7 +24,6 @@ export type Column = { Cell: React.ReactNode Heading: React.ReactNode } - label: React.ReactNode name: FieldBase['name'] } diff --git a/packages/ui/src/elements/TableColumns/buildColumnState.tsx b/packages/ui/src/elements/TableColumns/buildColumnState.tsx index 22391397ac..77449944ed 100644 --- a/packages/ui/src/elements/TableColumns/buildColumnState.tsx +++ b/packages/ui/src/elements/TableColumns/buildColumnState.tsx @@ -72,20 +72,24 @@ export const buildColumnState = (args: { ) + const Label = ( + + ) + const Heading = ( - } + // 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: ( - - ), } acc.push(column) diff --git a/packages/ui/src/fields/Collapsible/index.tsx b/packages/ui/src/fields/Collapsible/index.tsx index 4328e5ba72..f6ba06f8c5 100644 --- a/packages/ui/src/fields/Collapsible/index.tsx +++ b/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 } diff --git a/packages/ui/src/fields/Relationship/types.ts b/packages/ui/src/fields/Relationship/types.ts index 185b76a885..17e153f179 100644 --- a/packages/ui/src/fields/Relationship/types.ts +++ b/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'] diff --git a/packages/ui/src/fields/RichText/index.tsx b/packages/ui/src/fields/RichText/index.tsx index c85fd56e65..7ab1d7ba7b 100644 --- a/packages/ui/src/fields/RichText/index.tsx +++ b/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 width?: string diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx index e00e0b8b6f..2ed184110d 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx +++ b/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,