feat: support className config for row, block and array fields (#504)

payloadcms · Apr 5, 2022 · 0461c21 · 0461c21
1 parent 9e9aa64
commit 0461c21
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/src/admin/components/forms/field-types/Array/Array.tsx b/src/admin/components/forms/field-types/Array/Array.tsx
@@ -37,6 +37,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
       readOnly,
       description,
       condition,
+      className,
     },
   } = props;
 
@@ -121,10 +122,15 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const hasMaxRows = maxRows && rows.length >= maxRows;
 
+  const classes = [
+    baseClass,
+    className,
+  ].filter(Boolean).join(' ');
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
-        className={baseClass}
+        className={classes}
       >
         <div className={`${baseClass}__error-wrap`}>
           <Error

diff --git a/src/admin/components/forms/field-types/Blocks/Blocks.tsx b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
@@ -47,6 +47,7 @@ const Blocks: React.FC<Props> = (props) => {
       readOnly,
       description,
       condition,
+      className,
     },
   } = props;
 
@@ -168,10 +169,15 @@ const Blocks: React.FC<Props> = (props) => {
 
   const hasMaxRows = maxRows && rows.length >= maxRows;
 
+  const classes = [
+    baseClass,
+    className,
+  ].filter(Boolean).join(' ');
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
-        className={baseClass}
+        className={classes}
       >
         <div className={`${baseClass}__error-wrap`}>
           <Error

diff --git a/src/admin/components/forms/field-types/Row/index.tsx b/src/admin/components/forms/field-types/Row/index.tsx
@@ -14,13 +14,20 @@ const Row: React.FC<Props> = (props) => {
     permissions,
     admin: {
       readOnly,
+      className,
     },
   } = props;
 
+  const classes = [
+    'field-type',
+    'row',
+    className,
+  ].filter(Boolean).join(' ');
+
   return (
     <RenderFields
       readOnly={readOnly}
-      className="field-type row"
+      className={classes}
       permissions={permissions?.fields}
       fieldTypes={fieldTypes}
       fieldSchema={fields.map((field) => ({