feat: specifies component names for arrays/collapsibles, simplifies threaded data

test/fields/collections/Array/HeaderComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types';
+import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types';
 
-export const ArrayCollapsibleLabel: CollapsibleLabel = (props) => {
-  const { collapsibleData, fallback } = props;
-  return <span style={{ color: 'hotpink' }}>{collapsibleData.title || fallback}</span>;
+export const ArrayRowLabel: RowLabelComponent = (props) => {
+  const { data, fallback } = props;
+  return <span style={{ color: 'hotpink' }}>{data.title || fallback}</span>;
 };

test/fields/collections/Array/index.ts

@@ -1,5 +1,5 @@
 import type { CollectionConfig } from '../../../../src/collections/config/types';
-import { ArrayCollapsibleLabel } from './HeaderComponent';
+import { ArrayRowLabel } from './HeaderComponent';
 
 export const arrayDefaultValue = [
   { text: 'row one' },
@@ -85,7 +85,7 @@ const ArrayFields: CollectionConfig = {
     },
     {
       type: 'array',
-      name: 'collapsibleLabelAsFunction',
+      name: 'rowLabelAsFunction',
       fields: [
         {
           name: 'title',
@@ -93,15 +93,15 @@ const ArrayFields: CollectionConfig = {
         },
       ],
       admin: {
-        description: 'Collapsible labels rendered from a function.',
+        description: 'Row labels rendered from a function.',
         components: {
-          CollapsibleLabel: ({ collapsibleData, fallback }) => collapsibleData.title || fallback,
+          RowLabel: ({ data, fallback }) => data.title || fallback,
         },
       },
     },
     {
       type: 'array',
-      name: 'rowHeaderAsComponent',
+      name: 'rowLabelAsComponent',
       fields: [
         {
           name: 'title',
@@ -109,9 +109,9 @@ const ArrayFields: CollectionConfig = {
         },
       ],
       admin: {
-        description: 'Collapsible labels rendered as components.',
+        description: 'Row labels rendered as react components.',
         components: {
-          CollapsibleLabel: ArrayCollapsibleLabel,
+          RowLabel: ArrayRowLabel,
         },
       },
     },

test/fields/collections/Collapsible/HeaderComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CollapsibleLabel } from '../../../../src/admin/components/forms/CollapsibleLabel/types';
+import { RowLabel } from '../../../../src/admin/components/forms/RowLabel/types';
 
-export const CollapsibleLabelComponent: CollapsibleLabel = (props) => {
-  const { collapsibleData, fallback } = props;
-  return <span style={{ color: 'coral' }}>{collapsibleData.componentTitleField || fallback}</span>;
+export const CollapsibleLabelComponent: RowLabel = (props) => {
+  const { data, fallback } = props;
+  return <span style={{ color: 'coral' }}>{data.componentTitleField || fallback}</span>;
 };

test/fields/collections/Collapsible/index.ts

@@ -81,7 +81,7 @@ const CollapsibleFields: CollectionConfig = {
         description: 'Collapsible label rendered from a function.',
         initCollapsed: true,
         components: {
-          CollapsibleLabel: ({ collapsibleData }) => collapsibleData.functionTitleField || 'Untitled',
+          CollapsibleLabel: ({ data }) => data.functionTitleField || 'Untitled',
         },
       },
       fields: [