fix(form-builder): fix columns support for nested object fields

sanity-io · Jan 11, 2022 · 14abb94 · 14abb94
1 parent 90bd5f7
commit 14abb94
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/dev/test-studio/schema/debug/fieldGroupsDefault.js b/dev/test-studio/schema/debug/fieldGroupsDefault.js
@@ -32,6 +32,51 @@ export default {
     {name: 'field2', type: 'string', group: 'group2'},
     {name: 'field3', type: 'string', group: 'group1'},
     {name: 'field4', type: 'string', group: ['group1', 'group2', 'group3', 'group4']},
+    {
+      name: 'myObject',
+      type: 'myObject',
+      title: 'MyObject',
+      description: 'The first field here should be the title used in previews',
+      group: ['group1', 'group2', 'group3', 'group4'],
+    },
+    {
+      name: 'stats',
+      title: 'Stats',
+      type: 'object',
+      groups: [
+        {
+          name: 'group1',
+          title: 'Group 1',
+          default: true,
+        },
+      ],
+      group: ['group4', 'group3', 'group2'],
+      fields: [
+        {
+          name: 'time',
+          title: 'Time',
+          group: ['group1'],
+          type: 'object',
+          options: {
+            columns: 2,
+          },
+          description: 'Time in minutes',
+          fields: [
+            {
+              name: 'prep',
+              title: 'Prep',
+              type: 'number',
+            },
+            {
+              name: 'cook',
+              title: 'Cook',
+              type: 'number',
+            },
+          ],
+        },
+        {name: 'anotherEnd', type: 'string', title: 'Another field at the end'},
+      ],
+    },
     {
       name: 'fieldGroup',
       type: 'object',

diff --git a/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.styled.tsx b/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.styled.tsx
@@ -0,0 +1,9 @@
+import {Card} from '@sanity/ui'
+import styled from 'styled-components'
+
+// The negative margins here removes the extra space between the tabs and the fields when inside of a grid
+export const FieldGroupTabsWrapper = styled(Card)<{$level?: number}>`
+  margin-bottom: ${({$level, theme}) => ($level === 0 ? 0 : theme.sanity.space[5] * -1)}px;
+  padding-bottom: ${({$level, theme}) =>
+    $level === 0 ? theme.sanity.space[4] : theme.sanity.space[4]}px;
+`
diff --git a/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx b/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx
@@ -12,7 +12,7 @@ import {
 } from '@sanity/types'
 import {FormFieldPresence} from '@sanity/base/presence'
 import {FormFieldSet} from '@sanity/base/components'
-import {Card, Grid} from '@sanity/ui'
+import {Grid} from '@sanity/ui'
 import {castArray, find, findLast} from 'lodash'
 import {useId} from '@reach/auto-id'
 import {useCurrentUser} from '@sanity/base/hooks'
@@ -28,6 +28,7 @@ import {UnknownFields} from './UnknownFields'
 import {ObjectFieldSet} from './ObjectFieldSet'
 import {getCollapsedWithDefaults} from './utils'
 import {FieldGroupTabs} from './fieldGroups'
+import {FieldGroupTabsWrapper} from './ObjectInput.styled'
 
 const EMPTY_MARKERS: Marker[] = EMPTY_ARRAY
 const EMPTY_PRESENCE: FormFieldPresence[] = EMPTY_ARRAY
@@ -446,16 +447,18 @@ export const ObjectInput = memo(
 
     const renderFieldGroups = useCallback(() => {
       if (!hasGroups) {
-        return (
+        return level === 0 ? (
           <Grid columns={columns} gapX={4} gapY={5}>
             {renderAllFields()}
           </Grid>
+        ) : (
+          <>{renderAllFields()}</>
         )
       }
 
       return (
         <>
-          <Card marginBottom={3} data-testid="field-groups">
+          <FieldGroupTabsWrapper $level={level} data-testid="field-groups">
             <FieldGroupTabs
               disabled={changesOpen}
               inputId={inputId}
@@ -464,12 +467,15 @@ export const ObjectInput = memo(
               groups={filterGroups}
               shouldAutoFocus={level === 0 && focusPath.length === 0}
             />
-            <Card paddingTop={4}>
-              <Grid columns={columns} gapX={4} gapY={5} id={`${inputId}-field-group-fields`}>
-                {renderAllFields()}
-              </Grid>
-            </Card>
-          </Card>
+          </FieldGroupTabsWrapper>
+          {/* Similar to the check below on line 495, we check if nesting level is 0. FormFieldSet on line 502 wraps the fields in its own Grid container. */}
+          {level === 0 ? (
+            <Grid columns={columns} gapX={4} gapY={5} id={`${inputId}-field-group-fields`}>
+              {renderAllFields()}
+            </Grid>
+          ) : (
+            <>{renderAllFields()}</>
+          )}
         </>
       )
     }, [