test: passing text field suite (#5341)

packages/ui/src/forms/Error/index.tsx

@@ -19,7 +19,7 @@ const Error: React.FC<ErrorProps> = (props) => {
   } = props
 
   const { path: pathFromContext } = useFieldProps()
-  const path = pathFromProps || pathFromContext
+  const path = pathFromContext || pathFromProps
 
   const hasSubmitted = useFormSubmitted()
   const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)

packages/ui/src/forms/FieldDescription/index.tsx

@@ -5,6 +5,7 @@ import React from 'react'
 import type { Props } from './types.js'
 
 import { useTranslation } from '../../providers/Translation/index.js'
+import { useFieldProps } from '../FieldPropsProvider/index.js'
 import './index.scss'
 
 const baseClass = 'field-description'
@@ -12,6 +13,8 @@ const baseClass = 'field-description'
 const FieldDescription: React.FC<Props> = (props) => {
   const { className, description, marginPlacement } = props
 
+  const { path } = useFieldProps()
+
   const { i18n } = useTranslation()
 
   if (description) {
@@ -20,6 +23,7 @@ const FieldDescription: React.FC<Props> = (props) => {
         className={[
           baseClass,
           className,
+          `field-description-${path.replace(/\./g, '__')}`,
           marginPlacement && `${baseClass}--margin-${marginPlacement}`,
         ]
           .filter(Boolean)

packages/ui/src/forms/FieldDescription/types.ts

@@ -1,5 +1,5 @@
 export type Props = {
   className?: string
-  description?: string
+  description?: Record<string, string> | string
   marginPlacement?: 'bottom' | 'top'
 }

packages/ui/src/forms/fields/shared.ts

@@ -42,7 +42,7 @@ export type FormFieldBase = {
   maxLength?: number
   minLength?: number
   path?: string
-  placeholder?: string
+  placeholder?: Record<string, string> | string
   readOnly?: boolean
   required?: boolean
   rtl?: boolean

packages/ui/src/utilities/buildComponentMap/mapFields.tsx

@@ -64,7 +64,8 @@ export const mapFields = (args: {
           description:
             field.admin &&
             'description' in field.admin &&
-            typeof field.admin?.description === 'string'
+            (typeof field.admin?.description === 'string' ||
+              typeof field.admin?.description === 'object')
               ? field.admin.description
               : undefined,
         }
@@ -219,6 +220,10 @@ export const mapFields = (args: {
           maxRows: 'maxRows' in field ? field.maxRows : undefined,
           min: 'min' in field ? field.min : undefined,
           options: 'options' in field ? field.options : undefined,
+          placeholder:
+            'admin' in field && 'placeholder' in field.admin
+              ? field?.admin?.placeholder
+              : undefined,
           readOnly:
             'admin' in field && 'readOnly' in field.admin ? field.admin.readOnly : undefined,
           relationTo: 'relationTo' in field ? field.relationTo : undefined,

test/fields/collections/Text/CustomError.tsx

@@ -1,7 +1,16 @@
+'use client'
+
+import { useField, useFormFields, useFormSubmitted } from '@payloadcms/ui'
 import React from 'react'
 
 const CustomError: React.FC<any> = (props) => {
-  const { showError = false } = props
+  const { path: pathFromProps } = props
+  const submitted = useFormSubmitted()
+  const { path } = useField(pathFromProps)
+  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)
+  const { valid } = field || {}
+
+  const showError = submitted && !valid
 
   if (showError) {
     return <div className="custom-error">#custom-error</div>

test/fields/collections/Text/CustomLabel.tsx

@@ -1,10 +1,12 @@
 'use client'
 
+import { useFieldPath } from '@payloadcms/ui'
 import React from 'react'
 
-const CustomLabel: React.FC<{ htmlFor: string }> = ({ htmlFor }) => {
+const CustomLabel = () => {
+  const { path } = useFieldPath()
   return (
-    <label className="custom-label" htmlFor={htmlFor}>
+    <label className="custom-label" htmlFor={`field-${path.replace(/\./g, '__')}`}>
       #label
     </label>
   )

test/fields/collections/Text/index.ts

@@ -7,6 +7,7 @@ import CustomLabel from './CustomLabel.js'
 import { defaultText, textFieldsSlug } from './shared.js'
 
 const TextFields: CollectionConfig = {
+  slug: textFieldsSlug,
   admin: {
     useAsTitle: 'text',
   },
@@ -14,16 +15,17 @@ const TextFields: CollectionConfig = {
   fields: [
     {
       name: 'text',
-      required: true,
       type: 'text',
+      required: true,
     },
     {
       name: 'localizedText',
-      localized: true,
       type: 'text',
+      localized: true,
     },
     {
       name: 'i18nText',
+      type: 'text',
       admin: {
         description: {
           en: 'en description',
@@ -38,12 +40,11 @@ const TextFields: CollectionConfig = {
         en: 'Text en',
         es: 'Text es',
       },
-      type: 'text',
     },
     {
       name: 'defaultFunction',
-      defaultValue: () => defaultText,
       type: 'text',
+      defaultValue: () => defaultText,
     },
     {
       name: 'defaultAsync',
@@ -58,21 +59,22 @@ const TextFields: CollectionConfig = {
     },
     {
       name: 'overrideLength',
+      type: 'text',
       label: 'Override the 40k text length default',
       maxLength: 50000,
-      type: 'text',
     },
     {
       name: 'fieldWithDefaultValue',
+      type: 'text',
       defaultValue: async () => {
         const defaultValue = new Promise((resolve) => setTimeout(() => resolve('some-value'), 1000))
 
         return defaultValue
       },
-      type: 'text',
     },
     {
       name: 'dependentOnFieldWithDefaultValue',
+      type: 'text',
       hooks: {
         beforeChange: [
           ({ data }) => {
@@ -80,36 +82,35 @@ const TextFields: CollectionConfig = {
           },
         ],
       },
-      type: 'text',
     },
     {
       name: 'customLabel',
+      type: 'text',
       admin: {
         components: {
           Label: CustomLabel,
         },
       },
-      type: 'text',
     },
     {
       name: 'customError',
+      type: 'text',
       admin: {
         components: {
           Error: CustomError,
         },
       },
       minLength: 3,
-      type: 'text',
     },
     {
       name: 'beforeAndAfterInput',
+      type: 'text',
       admin: {
         components: {
           afterInput: [AfterInput],
           beforeInput: [BeforeInput],
         },
       },
-      type: 'text',
     },
     {
       name: 'hasMany',
@@ -141,7 +142,6 @@ const TextFields: CollectionConfig = {
       maxRows: 4,
     },
   ],
-  slug: textFieldsSlug,
 }
 
 export default TextFields

test/fields/config.ts

@@ -34,6 +34,7 @@ export const collectionSlugs: CollectionConfig[] = [
   LexicalFields,
   LexicalMigrateFields,
   {
+    slug: 'users',
     admin: {
       useAsTitle: 'email',
     },
@@ -41,11 +42,10 @@ export const collectionSlugs: CollectionConfig[] = [
     fields: [
       {
         name: 'canViewConditionalField',
-        defaultValue: true,
         type: 'checkbox',
+        defaultValue: true,
       },
     ],
-    slug: 'users',
   },
   ArrayFields,
   BlockFields,

test/helpers/seed.ts

@@ -1,3 +1,5 @@
+import type { MongooseAdapter } from 'packages/db-mongodb/src/index.js'
+
 import fs from 'fs'
 import path from 'path'
 
@@ -9,12 +11,12 @@ import { createSnapshot, dbSnapshot, restoreFromSnapshot } from './snapshot.js'
 type SeedFunction = (_payload: Payload) => Promise<void>
 
 export async function seedDB({
-  shouldResetDB,
   _payload,
-  snapshotKey,
-  seedFunction,
-  uploadsDir,
   collectionSlugs,
+  seedFunction,
+  shouldResetDB,
+  snapshotKey,
+  uploadsDir,
 }: {
   _payload: Payload
   collectionSlugs: string[]
@@ -71,9 +73,10 @@ export async function seedDB({
   // Dropping the db breaks indexes (on mongoose - did not test extensively on postgres yet), so we recreate them here
   if (shouldResetDB) {
     if (isMongoose(_payload)) {
+      const db = _payload.db as MongooseAdapter
       await Promise.all([
-        ...collectionSlugs.map(async (collectionSlug) => {
-          await _payload.db.collections[collectionSlug].createIndexes()
+        Object.entries(db.collections).map(async ([_, collection]) => {
+          await collection.createIndexes()
         }),
       ])
     }