refactor(form-builder): adjust spacing and fix lint warnings

sanity-io · Apr 8, 2021 · 676976c · 676976c
1 parent 05fd9af
commit 676976c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 42 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/ArrayInput.tsx b/packages/@sanity/form-builder/src/inputs/arrays/ArrayOfObjectsInput/ArrayInput.tsx
@@ -301,7 +301,7 @@ export class ArrayInput extends React.Component<Props> {
         getUploadOptions={this.getUploadOptions}
         onUpload={this.handleUpload}
       >
-        <Stack space={2}>
+        <Stack space={3}>
           {hasMissingKeys && (
             <Alert
               status="warning"
@@ -336,43 +336,45 @@ export class ArrayInput extends React.Component<Props> {
             </Alert>
           )}
 
-          <Stack space={2}>
-            <List onSortEnd={this.handleSortEnd} isSortable={isSortable} isGrid={isGrid}>
-              {(value || []).map((item, index) => {
-                const isChildMarker = (marker: Marker) =>
-                  startsWith([index], marker.path) ||
-                  startsWith([{_key: item && item._key}], marker.path)
-                const childMarkers = markers.filter(isChildMarker)
-                const isChildPresence = (pItem: FormFieldPresence) =>
-                  startsWith([index], pItem.path) ||
-                  startsWith([{_key: item && item._key}], pItem.path)
-                const childPresence = presence.filter(isChildPresence)
-                return (
-                  <Item
-                    key={item._key || index}
-                    isSortable={isSortable}
-                    isGrid={isGrid}
-                    index={index}
-                  >
-                    <ArrayItem
-                      compareValue={compareValue}
-                      filterField={filterField}
-                      focusPath={focusPath}
+          <Stack data-ui="ArrayInput__content" space={3}>
+            {value && value.length > 0 && (
+              <List onSortEnd={this.handleSortEnd} isSortable={isSortable} isGrid={isGrid}>
+                {value.map((item, index) => {
+                  const isChildMarker = (marker: Marker) =>
+                    startsWith([index], marker.path) ||
+                    startsWith([{_key: item && item._key}], marker.path)
+                  const childMarkers = markers.filter(isChildMarker)
+                  const isChildPresence = (pItem: FormFieldPresence) =>
+                    startsWith([index], pItem.path) ||
+                    startsWith([{_key: item && item._key}], pItem.path)
+                  const childPresence = presence.filter(isChildPresence)
+                  return (
+                    <Item
+                      key={item._key || index}
+                      isSortable={isSortable}
+                      isGrid={isGrid}
                       index={index}
-                      markers={childMarkers.length === 0 ? NO_MARKERS : childMarkers}
-                      onBlur={onBlur}
-                      onChange={this.handleItemChange}
-                      onFocus={onFocus}
-                      onRemove={this.handleRemoveItem}
-                      presence={childPresence}
-                      readOnly={readOnly || hasMissingKeys}
-                      type={type}
-                      value={item}
-                    />
-                  </Item>
-                )
-              })}
-            </List>
+                    >
+                      <ArrayItem
+                        compareValue={compareValue}
+                        filterField={filterField}
+                        focusPath={focusPath}
+                        index={index}
+                        markers={childMarkers.length === 0 ? NO_MARKERS : childMarkers}
+                        onBlur={onBlur}
+                        onChange={this.handleItemChange}
+                        onFocus={onFocus}
+                        onRemove={this.handleRemoveItem}
+                        presence={childPresence}
+                        readOnly={readOnly || hasMissingKeys}
+                        type={type}
+                        value={item}
+                      />
+                    </Item>
+                  )
+                })}
+              </List>
+            )}
 
             <ArrayFunctions
               type={type}

diff --git a/.../@sanity/form-builder/src/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/.../@sanity/form-builder/src/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -4,7 +4,7 @@ import {startsWith} from '@sanity/util/paths'
 import {ArraySchemaType, Marker, Path, SchemaType} from '@sanity/types'
 import {Stack} from '@sanity/ui'
 import {FormFieldSet} from '@sanity/base/components'
-import {FormFieldPresence} from '@sanity/base/lib/presence'
+import {FormFieldPresence} from '@sanity/base/presence'
 import {PatchEvent, set, unset} from '../../../PatchEvent'
 import {resolveTypeName} from '../../../utils/resolveTypeName'
 import {Item, List} from '../common/list'
@@ -165,14 +165,15 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
         __unstable_changeIndicator={false}
         __unstable_markers={markers}
       >
-        <Stack space={2}>
+        <Stack space={3}>
           {value && value.length > 0 && (
             <List onSortEnd={this.handleSortEnd} isSortable={isSortable}>
               {value.map((item, index) => {
                 const filteredMarkers = markers.filter((marker) => startsWith([index], marker.path))
                 const childPresence = presence.filter((pItem) => startsWith([index], pItem.path))
 
                 return (
+                  // eslint-disable-next-line react/no-array-index-key
                   <Item key={index} index={index} isSortable={isSortable}>
                     <ItemRow
                       level={level + 1}

diff --git a/packages/@sanity/form-builder/src/inputs/arrays/common/ArrayFunctions.tsx b/packages/@sanity/form-builder/src/inputs/arrays/common/ArrayFunctions.tsx
@@ -44,13 +44,13 @@ export default function ArrayFunctions(props: ArrayFunctionsProps) {
   }
 
   return (
-    <Grid autoCols="auto" gap={2}>
+    <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
       {type.of.length === 1 ? (
-        <Button mode="ghost" text="Add item" icon={AddIcon} onClick={handleAddBtnClick} />
+        <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text="Add item" />
       ) : (
         <MenuButton
+          button={<Button icon={AddIcon} mode="ghost" text="Add item…" />}
           id={menuButtonId || ''}
-          button={<Button mode="ghost" text="Add item…" icon={AddIcon} />}
           menu={
             <Menu>
               {type.of.map((memberDef) => {