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

fix: updates margin for group field within a row

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;
@@ -81,3 +87,7 @@
 .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,6 +27,7 @@ const Row: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   return (
+    <RowProvider>
       <RenderFields
         readOnly={readOnly}
         className={classes}
@@ -37,6 +39,7 @@ const Row: React.FC<Props> = (props) => {
           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',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
   ],
 };