Merge pull request #1796 from payloadcms/fix/groups-within-row

fix: updates margin for group field within a row

Author: jmikrut

src/admin/components/forms/field-types/Group/index.scss

@@ -29,6 +29,12 @@
     border-bottom: 0;
   }
 
+  &--within-row {
+    margin: 0;
+    border-top: 0;
+    border-bottom: 0;
+  }
+
   &--within-tab:first-child {
     margin-top: 0;
     border-top: 0;
@@ -80,4 +86,8 @@
 
 .group-field--within-collapsible+.group-field--within-collapsible {
   margin-top: base(-1);
-}
+}
+
+.group-field--within-row+.group-field--within-row {
+  margin-top: 0;
+}

src/admin/components/forms/field-types/Group/index.tsx

@@ -6,6 +6,7 @@ import FieldDescription from '../../FieldDescription';
 import { Props } from './types';
 import { useCollapsible } from '../../../elements/Collapsible/provider';
 import { GroupProvider, useGroup } from './provider';
+import { useRow } from '../Row/provider';
 import { useTabs } from '../Tabs/provider';
 import { getTranslation } from '../../../../../utilities/getTranslation';
 import { createNestedFieldPath } from '../../Form/createNestedFieldPath';
@@ -35,6 +36,7 @@ const Group: React.FC<Props> = (props) => {
 
   const isWithinCollapsible = useCollapsible();
   const isWithinGroup = useGroup();
+  const isWithinRow = useRow();
   const isWithinTab = useTabs();
   const { i18n } = useTranslation();
 
@@ -48,6 +50,7 @@ const Group: React.FC<Props> = (props) => {
         baseClass,
         isWithinCollapsible && `${baseClass}--within-collapsible`,
         isWithinGroup && `${baseClass}--within-group`,
+        isWithinRow && `${baseClass}--within-row`,
         isWithinTab && `${baseClass}--within-tab`,
         (!hideGutter && isWithinGroup) && `${baseClass}--gutter`,
         className,

src/admin/components/forms/field-types/Row/index.tsx

@@ -3,6 +3,7 @@ import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import { Props } from './types';
 import { createNestedFieldPath } from '../../Form/createNestedFieldPath';
+import { RowProvider } from './provider';
 
 import './index.scss';
 
@@ -26,17 +27,19 @@ const Row: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   return (
-    <RenderFields
-      readOnly={readOnly}
-      className={classes}
-      permissions={permissions}
-      fieldTypes={fieldTypes}
-      indexPath={indexPath}
-      fieldSchema={fields.map((field) => ({
-        ...field,
-        path: createNestedFieldPath(path, field),
-      }))}
-    />
+    <RowProvider>
+      <RenderFields
+        readOnly={readOnly}
+        className={classes}
+        permissions={permissions}
+        fieldTypes={fieldTypes}
+        indexPath={indexPath}
+        fieldSchema={fields.map((field) => ({
+          ...field,
+          path: createNestedFieldPath(path, field),
+        }))}
+      />
+    </RowProvider>
   );
 };
 export default withCondition(Row);

src/admin/components/forms/field-types/Row/provider.tsx

@@ -0,0 +1,17 @@
+import React, {
+  createContext, useContext,
+} from 'react';
+
+const Context = createContext(false);
+
+export const RowProvider: React.FC<{ children?: React.ReactNode, withinRow?: boolean }> = ({ children, withinRow = true }) => {
+  return (
+    <Context.Provider value={withinRow}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useRow = (): boolean => useContext(Context);
+
+export default Context;

test/fields/collections/Group/index.ts

@@ -67,6 +67,49 @@ const GroupFields: CollectionConfig = {
         },
       ],
     },
+    {
+      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',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
   ],
 };