From c5ea2dcd2abc6f439a0125753e8fb56acb127cf9 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Sat, 3 Oct 2020 15:55:07 -0400
Subject: [PATCH] revises the way that negative field type gutter works

---
 .../SectionTitle/EditableBlockTitle/index.js  |  2 +-
 .../forms/DraggableSection/index.js           | 24 ++++---
 .../forms/DraggableSection/index.scss         | 70 -------------------
 .../forms/FieldTypeGutter/context.js          | 27 +++++++
 .../components/forms/FieldTypeGutter/index.js |  3 +
 .../forms/FieldTypeGutter/index.scss          |  7 ++
 .../forms/field-types/Group/index.js          | 19 ++---
 .../forms/field-types/Group/index.scss        |  6 +-
 .../forms/field-types/Upload/Add/index.js     | 13 ++--
 src/client/components/views/Account/index.js  | 30 ++++----
 .../components/views/CreateFirstUser/index.js | 17 +++--
 src/client/components/views/Global/index.js   | 29 ++++----
 .../views/collections/Edit/index.js           | 35 +++++-----
 .../views/collections/Edit/index.scss         |  1 +
 14 files changed, 133 insertions(+), 150 deletions(-)
 create mode 100644 src/client/components/forms/FieldTypeGutter/context.js

diff --git a/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
index fb588e09ce..9da91f0714 100644
--- a/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
+++ b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
@@ -21,7 +21,7 @@ const EditableBlockTitle = (props) => {
   });
 
   useEffect(() => {
-    setInputWidth(inputCloneRef.current.offsetWidth);
+    setInputWidth(inputCloneRef.current.offsetWidth + 5);
   }, [value]);
 
   const onKeyDown = (e) => {
diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js
index 7d4d9b237e..f4a0177176 100644
--- a/src/client/components/forms/DraggableSection/index.js
+++ b/src/client/components/forms/DraggableSection/index.js
@@ -7,10 +7,10 @@ import ActionPanel from './ActionPanel';
 import SectionTitle from './SectionTitle';
 import PositionPanel from './PositionPanel';
 import Button from '../../elements/Button';
+import { NegativeFieldGutterProvider } from '../FieldTypeGutter/context';
 import FieldTypeGutter from '../FieldTypeGutter';
 import RenderFields from '../RenderFields';
 
-
 import './index.scss';
 
 const baseClass = 'draggable-section';
@@ -97,16 +97,18 @@ const DraggableSection = (props) => {
                 height={isOpen ? 'auto' : 0}
                 duration={0}
               >
-                <RenderFields
-                  readOnly={readOnly}
-                  fieldTypes={fieldTypes}
-                  key={rowIndex}
-                  permissions={permissions}
-                  fieldSchema={fieldSchema.map((field) => ({
-                    ...field,
-                    path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
-                  }))}
-                />
+                <NegativeFieldGutterProvider allow={false}>
+                  <RenderFields
+                    readOnly={readOnly}
+                    fieldTypes={fieldTypes}
+                    key={rowIndex}
+                    permissions={permissions}
+                    fieldSchema={fieldSchema.map((field) => ({
+                      ...field,
+                      path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
+                    }))}
+                  />
+                </NegativeFieldGutterProvider>
               </AnimateHeight>
             </div>
 
diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss
index 633664a27a..580ba5fcd3 100644
--- a/src/client/components/forms/DraggableSection/index.scss
+++ b/src/client/components/forms/DraggableSection/index.scss
@@ -1,33 +1,5 @@
 @import '../../../scss/styles.scss';
 
-//////////////////////
-// HELPER MIXINS
-//////////////////////
-
-@mixin relatively-position-panels {
-  .field-type-gutter {
-    position: relative;
-    right: 0;
-  }
-
-  .field-type-gutter.actions {
-    position: relative;
-    left: 0;
-  }
-}
-
-@mixin absolutely-position-panels {
-  .field-type-gutter {
-    position: absolute;
-    top: 0; right: 100%; bottom: 0;
-  }
-
-  .field-type-gutter.actions {
-    position: absolute;
-    top: 0; bottom: 0; left: 100%; right: unset;
-  }
-}
-
 //////////////////////
 // COMPONENT STYLES
 //////////////////////
@@ -127,8 +99,6 @@
   }
 
   @include mid-break {
-    @include relatively-position-panels();
-
     .position-panel__move-forward,
     .position-panel__move-backward {
       opacity: 1;
@@ -139,43 +109,3 @@
     }
   }
 }
-
-//////////////////////
-// EXTERNAL SCOPES
-//////////////////////
-
-.global-edit,
-.collection-edit {
-  @include absolutely-position-panels();
-
-  @include mid-break {
-    @include relatively-position-panels();
-  }
-}
-
-.field-type.group .field-type.array,
-.field-type.group .field-type.blocks,
-.field-type.blocks .field-type.blocks,
-.field-type.blocks .field-type.array,
-.field-type.array .field-type.array,
-.field-type.array .field-type.blocks {
-  @include relatively-position-panels();
-}
-
-.field-type.group {
-  @include absolutely-position-panels();
-
-  @include mid-break {
-    @include relatively-position-panels();
-  }
-}
-
-// remove padding above array rows to level
-// the line with the top of the input label
-.field-type.array {
-  .draggable-section {
-    &__content-wrapper {
-      padding-top: 0;
-    }
-  }
-}
diff --git a/src/client/components/forms/FieldTypeGutter/context.js b/src/client/components/forms/FieldTypeGutter/context.js
new file mode 100644
index 0000000000..d10fd3311c
--- /dev/null
+++ b/src/client/components/forms/FieldTypeGutter/context.js
@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useWindowInfo } from '@faceless-ui/window-info';
+
+const context = createContext(false);
+const { Provider } = context;
+
+export const NegativeFieldGutterProvider = ({ children, allow }) => {
+  const { breakpoints: { m: midBreak } } = useWindowInfo();
+
+  return (
+    <Provider value={allow && !midBreak}>
+      {children}
+    </Provider>
+  );
+};
+
+export const useNegativeFieldGutter = () => useContext(context);
+
+NegativeFieldGutterProvider.defaultProps = {
+  allow: false,
+};
+
+NegativeFieldGutterProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  allow: PropTypes.bool,
+};
diff --git a/src/client/components/forms/FieldTypeGutter/index.js b/src/client/components/forms/FieldTypeGutter/index.js
index 8b8bfa0220..d23d014dbb 100644
--- a/src/client/components/forms/FieldTypeGutter/index.js
+++ b/src/client/components/forms/FieldTypeGutter/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useNegativeFieldGutter } from './context';
 
 import './index.scss';
 
@@ -7,11 +8,13 @@ const baseClass = 'field-type-gutter';
 
 const FieldTypeGutter = (props) => {
   const { children, variant, verticalAlignment, className, dragHandleProps } = props;
+  const allowNegativeGutter = useNegativeFieldGutter();
 
   const classes = [
     baseClass,
     `${baseClass}--${variant}`,
     `${baseClass}--v-align-${verticalAlignment}`,
+    allowNegativeGutter && `${baseClass}--negative-gutter`,
     className && className,
   ].filter(Boolean).join(' ');
 
diff --git a/src/client/components/forms/FieldTypeGutter/index.scss b/src/client/components/forms/FieldTypeGutter/index.scss
index 7e9019d066..bd6eb5ec3f 100644
--- a/src/client/components/forms/FieldTypeGutter/index.scss
+++ b/src/client/components/forms/FieldTypeGutter/index.scss
@@ -61,6 +61,13 @@ $controls-top-adjustment: base(.1);
     height: 100%;
   }
 
+  &--negative-gutter {
+    &.field-type-gutter--left {
+      position: absolute;
+      top: 0; right: 100%; bottom: 0;
+    }
+  }
+
   @include mid-break {
     padding-right: base(1);
 
diff --git a/src/client/components/forms/field-types/Group/index.js b/src/client/components/forms/field-types/Group/index.js
index 78da3df2ee..56185e96d0 100644
--- a/src/client/components/forms/field-types/Group/index.js
+++ b/src/client/components/forms/field-types/Group/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import FieldTypeGutter from '../../FieldTypeGutter';
+import { NegativeFieldGutterProvider } from '../../FieldTypeGutter/context';
 
 import './index.scss';
 
@@ -31,14 +32,16 @@ const Group = (props) => {
           <h2 className={`${baseClass}__title`}>{label}</h2>
         )}
         <div className={`${baseClass}__fields-wrapper`}>
-          <RenderFields
-            readOnly={readOnly}
-            fieldTypes={fieldTypes}
-            fieldSchema={fields.map((subField) => ({
-              ...subField,
-              path: `${path}${subField.name ? `.${subField.name}` : ''}`,
-            }))}
-          />
+          <NegativeFieldGutterProvider allow={false}>
+            <RenderFields
+              readOnly={readOnly}
+              fieldTypes={fieldTypes}
+              fieldSchema={fields.map((subField) => ({
+                ...subField,
+                path: `${path}${subField.name ? `.${subField.name}` : ''}`,
+              }))}
+            />
+          </NegativeFieldGutterProvider>
         </div>
       </div>
     </div>
diff --git a/src/client/components/forms/field-types/Group/index.scss b/src/client/components/forms/field-types/Group/index.scss
index d30a3fe0d4..6ee688ac50 100644
--- a/src/client/components/forms/field-types/Group/index.scss
+++ b/src/client/components/forms/field-types/Group/index.scss
@@ -6,13 +6,10 @@
 }
 
 .group {
+  margin-top: base(2);
   margin-bottom: base(2);
   display: flex;
 
-  &__title {
-    margin-top: base(2);
-  }
-
   &:hover {
     .field-type-gutter__content-container {
       box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
@@ -51,7 +48,6 @@
 .field-type.group .field-type.group,
 .field-type.blocks .field-type.group,
 .field-type.array .field-type.group {
-
   .field-type-gutter__content-container {
     @include reduce-gutter;
   }
diff --git a/src/client/components/forms/field-types/Upload/Add/index.js b/src/client/components/forms/field-types/Upload/Add/index.js
index a716b2f3e7..6e1580e700 100644
--- a/src/client/components/forms/field-types/Upload/Add/index.js
+++ b/src/client/components/forms/field-types/Upload/Add/index.js
@@ -8,6 +8,7 @@ import Button from '../../../../elements/Button';
 import RenderFields from '../../../RenderFields';
 import FormSubmit from '../../../Submit';
 import Upload from '../../../../views/collections/Edit/Upload';
+import { NegativeFieldGutterProvider } from '../../../FieldTypeGutter/context';
 
 import './index.scss';
 
@@ -65,11 +66,13 @@ const AddUploadModal = (props) => {
             {...collection.upload}
             fieldTypes={fieldTypes}
           />
-          <RenderFields
-            filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
-            fieldTypes={fieldTypes}
-            fieldSchema={collection.fields}
-          />
+          <NegativeFieldGutterProvider allow>
+            <RenderFields
+              filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
+              fieldTypes={fieldTypes}
+              fieldSchema={collection.fields}
+            />
+          </NegativeFieldGutterProvider>
         </Form>
       </MinimalTemplate>
     </Modal>
diff --git a/src/client/components/views/Account/index.js b/src/client/components/views/Account/index.js
index c77fb9821f..238ee7b3a9 100644
--- a/src/client/components/views/Account/index.js
+++ b/src/client/components/views/Account/index.js
@@ -6,8 +6,8 @@ import { useAuthentication } from '../../providers/Authentication';
 import usePayloadAPI from '../../../hooks/usePayloadAPI';
 import DefaultAccount from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
-
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 
 const AccountView = () => {
   const { state: locationState } = useLocation();
@@ -58,19 +58,21 @@ const AccountView = () => {
   }, [dataToRender, fields]);
 
   return (
-    <RenderCustomComponent
-      DefaultComponent={DefaultAccount}
-      CustomComponent={CustomAccount}
-      componentProps={{
-        data,
-        collection,
-        permissions: collectionPermissions,
-        hasSavePermission,
-        initialState,
-        apiURL,
-        isLoading,
-      }}
-    />
+    <NegativeFieldGutterProvider allow>
+      <RenderCustomComponent
+        DefaultComponent={DefaultAccount}
+        CustomComponent={CustomAccount}
+        componentProps={{
+          data,
+          collection,
+          permissions: collectionPermissions,
+          hasSavePermission,
+          initialState,
+          apiURL,
+          isLoading,
+        }}
+      />
+    </NegativeFieldGutterProvider>
   );
 };
 
diff --git a/src/client/components/views/CreateFirstUser/index.js b/src/client/components/views/CreateFirstUser/index.js
index 70a4e4850b..f410ef3a63 100644
--- a/src/client/components/views/CreateFirstUser/index.js
+++ b/src/client/components/views/CreateFirstUser/index.js
@@ -8,6 +8,7 @@ import RenderFields from '../../forms/RenderFields';
 import fieldTypes from '../../forms/field-types';
 import FormSubmit from '../../forms/Submit';
 import { useAuthentication } from '../../providers/Authentication';
+import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 
 import './index.scss';
 
@@ -59,13 +60,15 @@ const CreateFirstUser = (props) => {
         redirect={admin}
         action={`${serverURL}${api}/${userSlug}/first-register`}
       >
-        <RenderFields
-          fieldSchema={[
-            ...fields,
-            ...userConfig.fields,
-          ]}
-          fieldTypes={fieldTypes}
-        />
+        <NegativeFieldGutterProvider allow>
+          <RenderFields
+            fieldSchema={[
+              ...fields,
+              ...userConfig.fields,
+            ]}
+            fieldTypes={fieldTypes}
+          />
+        </NegativeFieldGutterProvider>
         <FormSubmit>Create</FormSubmit>
       </Form>
     </MinimalTemplate>
diff --git a/src/client/components/views/Global/index.js b/src/client/components/views/Global/index.js
index b104ba48e3..08ba0f0de4 100644
--- a/src/client/components/views/Global/index.js
+++ b/src/client/components/views/Global/index.js
@@ -10,6 +10,7 @@ import { useLocale } from '../../utilities/Locale';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import DefaultGlobal from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
+import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 
 const GlobalView = (props) => {
   const { state: locationState } = useLocation();
@@ -79,19 +80,21 @@ const GlobalView = (props) => {
   const globalPermissions = permissions?.[slug];
 
   return (
-    <RenderCustomComponent
-      DefaultComponent={DefaultGlobal}
-      CustomComponent={CustomEdit}
-      componentProps={{
-        data: dataToRender,
-        permissions: globalPermissions,
-        initialState,
-        global,
-        onSave,
-        apiURL: `${serverURL}${api}/globals/${slug}?depth=0`,
-        action: `${serverURL}${api}/globals/${slug}?locale=${locale}`,
-      }}
-    />
+    <NegativeFieldGutterProvider allow>
+      <RenderCustomComponent
+        DefaultComponent={DefaultGlobal}
+        CustomComponent={CustomEdit}
+        componentProps={{
+          data: dataToRender,
+          permissions: globalPermissions,
+          initialState,
+          global,
+          onSave,
+          apiURL: `${serverURL}${api}/globals/${slug}?depth=0`,
+          action: `${serverURL}${api}/globals/${slug}?locale=${locale}`,
+        }}
+      />
+    </NegativeFieldGutterProvider>
   );
 };
 
diff --git a/src/client/components/views/collections/Edit/index.js b/src/client/components/views/collections/Edit/index.js
index 6aa369c113..be8ee5d131 100644
--- a/src/client/components/views/collections/Edit/index.js
+++ b/src/client/components/views/collections/Edit/index.js
@@ -9,6 +9,7 @@ import { useAuthentication } from '../../../providers/Authentication';
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 import DefaultEdit from './Default';
 import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
+import { NegativeFieldGutterProvider } from '../../../forms/FieldTypeGutter/context';
 
 const EditView = (props) => {
   const { collection, isEditing } = props;
@@ -97,22 +98,24 @@ const EditView = (props) => {
   action += '?depth=0';
 
   return (
-    <RenderCustomComponent
-      DefaultComponent={DefaultEdit}
-      CustomComponent={CustomEdit}
-      componentProps={{
-        isLoading,
-        data: dataToRender,
-        collection,
-        permissions: collectionPermissions,
-        isEditing,
-        onSave,
-        initialState,
-        hasSavePermission,
-        apiURL,
-        action,
-      }}
-    />
+    <NegativeFieldGutterProvider allow>
+      <RenderCustomComponent
+        DefaultComponent={DefaultEdit}
+        CustomComponent={CustomEdit}
+        componentProps={{
+          isLoading,
+          data: dataToRender,
+          collection,
+          permissions: collectionPermissions,
+          isEditing,
+          onSave,
+          initialState,
+          hasSavePermission,
+          apiURL,
+          action,
+        }}
+      />
+    </NegativeFieldGutterProvider>
   );
 };
 
diff --git a/src/client/components/views/collections/Edit/index.scss b/src/client/components/views/collections/Edit/index.scss
index b278598196..8448a1f99f 100644
--- a/src/client/components/views/collections/Edit/index.scss
+++ b/src/client/components/views/collections/Edit/index.scss
@@ -17,6 +17,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      line-height: 1.25;
     }
   }