Files
payload/test/fields/collections/Group/index.ts
Paul d5611953a7 fix: allow unnamed group fields to not set a label at all (#12580)
Technically you could already set `label: undefined` and it would be
supported by group fields but the types didn't reflect this.

So now you can create an unnamed group field like this:

```ts
{
      type: 'group',
      fields: [
        {
          type: 'text',
          name: 'insideGroupWithNoLabel',
        },
      ],
    },
```

This will remove the label while still visually grouping the fields.

![image](https://github.com/user-attachments/assets/ecb0b364-9cff-4d71-bf9f-86961915aecd)

---------

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
2025-05-29 22:03:39 +00:00

365 lines
7.6 KiB
TypeScript

import type { CollectionConfig } from 'payload'
import { groupFieldsSlug } from '../../slugs.js'
export const groupDefaultValue = 'set from parent'
export const groupDefaultChild = 'child takes priority'
const GroupFields: CollectionConfig = {
slug: groupFieldsSlug,
versions: true,
admin: {
defaultColumns: ['id', 'group', 'insideUnnamedGroup', 'deeplyNestedGroup'],
},
fields: [
{
label: 'Group Field',
name: 'group',
type: 'group',
defaultValue: {
defaultParent: groupDefaultValue,
},
admin: {
description: 'This is a group.',
},
fields: [
{
name: 'text',
type: 'text',
required: true,
defaultValue: groupDefaultValue,
},
{
name: 'defaultParent',
type: 'text',
defaultValue: groupDefaultChild,
},
{
name: 'defaultChild',
type: 'text',
defaultValue: groupDefaultChild,
},
{
name: 'subGroup',
type: 'group',
fields: [
{
name: 'textWithinGroup',
type: 'text',
},
{
name: 'arrayWithinGroup',
type: 'array',
fields: [
{
name: 'textWithinArray',
type: 'text',
},
],
},
],
},
],
},
{
name: 'arrayOfGroups',
type: 'array',
defaultValue: [
{
groupItem: {
text: 'Hello world',
},
},
],
fields: [
{
name: 'groupItem',
type: 'group',
fields: [{ name: 'text', type: 'text' }],
},
],
},
{
name: 'localizedGroup',
type: 'group',
fields: [
{
name: 'text',
type: 'text',
},
],
localized: true,
},
{
name: 'potentiallyEmptyGroup',
type: 'group',
fields: [
{
name: 'text',
type: 'text',
},
],
},
{
type: 'row',
fields: [
{
name: 'groupInRow',
type: 'group',
fields: [
{
name: 'field',
type: 'text',
},
{
name: 'secondField',
type: 'text',
},
{
name: 'thirdField',
type: 'text',
},
],
},
{
name: 'secondGroupInRow',
type: 'group',
fields: [
{
name: 'field',
type: 'text',
},
{
name: 'nestedGroup',
type: 'group',
fields: [
{
name: 'nestedField',
type: 'text',
},
],
},
],
},
],
},
{
type: 'tabs',
tabs: [
{
name: 'groups',
label: 'Groups in tabs',
fields: [
{
type: 'row',
fields: [
{
name: 'groupInRow',
type: 'group',
fields: [
{
name: 'field',
type: 'text',
},
{
name: 'secondField',
type: 'text',
},
{
name: 'thirdField',
type: 'text',
},
],
},
{
name: 'secondGroupInRow',
type: 'group',
fields: [
{
name: 'field',
type: 'text',
},
{
name: 'nestedGroup',
type: 'group',
fields: [
{
name: 'nestedField',
type: 'text',
},
],
},
],
},
],
},
],
},
],
},
{
name: 'camelCaseGroup',
type: 'group',
fields: [
{
name: 'array',
type: 'array',
fields: [
{
type: 'text',
name: 'text',
localized: true,
},
{
type: 'array',
name: 'array',
fields: [
{
type: 'text',
name: 'text',
},
],
},
],
},
],
},
{
name: 'localizedGroupArr',
type: 'group',
localized: true,
fields: [
{
name: 'array',
type: 'array',
fields: [
{
type: 'text',
name: 'text',
},
],
},
],
},
{
name: 'localizedGroupSelect',
type: 'group',
localized: true,
fields: [
{
type: 'select',
hasMany: true,
options: ['one', 'two'],
name: 'select',
},
],
},
{
name: 'localizedGroupRel',
type: 'group',
localized: true,
fields: [
{
type: 'relationship',
relationTo: 'email-fields',
name: 'email',
},
],
},
{
name: 'localizedGroupManyRel',
type: 'group',
localized: true,
fields: [
{
type: 'relationship',
relationTo: 'email-fields',
name: 'email',
hasMany: true,
},
],
},
{
name: 'localizedGroupPolyRel',
type: 'group',
localized: true,
fields: [
{
type: 'relationship',
relationTo: ['email-fields'],
name: 'email',
},
],
},
{
name: 'localizedGroupPolyHasManyRel',
type: 'group',
localized: true,
fields: [
{
type: 'relationship',
relationTo: ['email-fields'],
name: 'email',
hasMany: true,
},
],
},
{
type: 'group',
label: 'Unnamed group',
fields: [
{
type: 'text',
name: 'insideUnnamedGroup',
},
],
},
{
type: 'group',
fields: [
{
type: 'text',
name: 'insideGroupWithNoLabel',
},
],
},
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
name: 'deeplyNestedGroup',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'group',
label: 'Deeply nested group',
fields: [
{
type: 'text',
name: 'insideNestedUnnamedGroup',
},
],
},
],
},
],
},
],
},
],
},
],
}
export default GroupFields