merges Group style updates

src/client/components/forms/DraggableSection/PositionPanel/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '../../../elements/Button';
-import RenderFieldGutter from '../../RenderFieldGutter';
 
 import './index.scss';
 
@@ -27,9 +26,8 @@ const PositionPanel = (props) => {
         onClick={() => moveRow(positionIndex, positionIndex - 1)}
       />
 
-      {(adjustedIndex && typeof positionIndex === 'number') &&
+      {(adjustedIndex && typeof positionIndex === 'number')
-        <div className={`${baseClass}__current-position`}>{adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}</div>
+        && <div className={`${baseClass}__current-position`}>{adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}</div>}
-      }
 
       <Button
         className={`${baseClass}__move-forward ${(positionIndex === rowCount - 1) ? 'last-row' : ''}`}

src/client/components/forms/DraggableSection/index.js

@@ -7,7 +7,7 @@ import ActionPanel from './ActionPanel';
 import SectionTitle from './SectionTitle';
 import PositionPanel from './PositionPanel';
 import Button from '../../elements/Button';
-import RenderFieldGutter from '../RenderFieldGutter';
+import FieldTypeGutter from '../FieldTypeGutter';
 import RenderFields from '../RenderFields';
 
 
@@ -62,7 +62,7 @@ const DraggableSection = (props) => {
         >
 
           <div className={`${baseClass}__content-wrapper`}>
-            <RenderFieldGutter
+            <FieldTypeGutter
               variant="left"
               dragHandleProps={providedDrag.dragHandleProps}
             >
@@ -72,7 +72,7 @@ const DraggableSection = (props) => {
                 positionIndex={rowIndex}
                 verticalAlignment={positionPanelVerticalAlignment}
               />
-            </RenderFieldGutter>
+            </FieldTypeGutter>
 
             <div className={`${baseClass}__render-fields-wrapper`}>
 
@@ -111,7 +111,8 @@ const DraggableSection = (props) => {
                 />
               </AnimateHeight>
             </div>
-            <RenderFieldGutter
+
+            <FieldTypeGutter
               variant="right"
               className="actions"
               dragHandleProps={providedDrag.dragHandleProps}
@@ -127,7 +128,7 @@ const DraggableSection = (props) => {
                   {...props}
                 />
               )}
-            </RenderFieldGutter>
+            </FieldTypeGutter>
           </div>
         </div>
       )}

src/client/components/forms/DraggableSection/index.scss

@@ -5,24 +5,24 @@
 //////////////////////
 
 @mixin relatively-position-panels {
-  .render-field-gutter {
+  .field-type-gutter {
     position: relative;
     right: 0;
   }
 
-  .render-field-gutter.actions {
+  .field-type-gutter.actions {
     position: relative;
     left: 0;
   }
 }
 
 @mixin absolutely-position-panels {
-  .render-field-gutter {
+  .field-type-gutter {
     position: absolute;
     top: 0; right: 100%; bottom: 0;
   }
 
-  .render-field-gutter.actions {
+  .field-type-gutter.actions {
     position: absolute;
     top: 0; bottom: 0; left: 100%; right: unset;
   }
@@ -80,13 +80,15 @@
   }
 
   &.is-hovered > div {
-    > .render-field-gutter {
+    > .field-type-gutter {
       &.actions {
-        .render-field-gutter__content-container {
+        z-index: $z-nav;
+
+        .field-type-gutter__content-container {
           box-shadow: none;
         }
       }
-      .render-field-gutter__content-container {
+      .field-type-gutter__content-container {
         box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
       }
 
@@ -106,14 +108,6 @@
       }
     }
 
-    > .action-panel {
-      .action-panel__controls {
-        opacity: 1;
-        visibility: visible;
-        z-index: $z-nav;
-      }
-    }
-
     .toggle-collapse {
       @include color-svg(white);
 
@@ -159,10 +153,12 @@
   }
 }
 
+.field-type.blocks .field-type.blocks
+.field-type.blocks .field-type.group
 .field-type.blocks .field-type.array,
 .field-type.array .field-type.array,
 .field-type.array .field-type.blocks,
-.field-type.blocks .field-type.blocks {
+.field-type.array .field-type.group {
   @include relatively-position-panels();
 }
 

src/client/components/forms/FieldTypeGutter/index.js

@@ -3,20 +3,23 @@ import PropTypes from 'prop-types';
 
 import './index.scss';
 
-const baseClass = 'render-field-gutter';
+const baseClass = 'field-type-gutter';
 
-const RenderFieldGutter = (props) => {
+const FieldTypeGutter = (props) => {
   const { children, variant, verticalAlignment, className, dragHandleProps } = props;
 
   const classes = [
     baseClass,
     `${baseClass}--${variant}`,
     `${baseClass}--v-align-${verticalAlignment}`,
-    className && className
+    className && className,
   ].filter(Boolean).join(' ');
 
   return (
-    <div className={classes} {...dragHandleProps}>
+    <div
+      className={classes}
+      {...dragHandleProps}
+    >
       <div className={`${baseClass}__content-container`}>
         <div className={`${baseClass}__content`}>
           {children}
@@ -24,19 +27,24 @@ const RenderFieldGutter = (props) => {
       </div>
     </div>
   );
-}
+};
 
-const { oneOf } = PropTypes;
+const { oneOf, shape, string, node } = PropTypes;
 
-RenderFieldGutter.defaultProps = {
+FieldTypeGutter.defaultProps = {
   variant: 'left',
   verticalAlignment: 'sticky',
   dragHandleProps: {},
-}
+  className: null,
+  children: null,
+};
 
-RenderFieldGutter.propTypes = {
+FieldTypeGutter.propTypes = {
   variant: oneOf(['left', 'right']),
   verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']),
-}
+  dragHandleProps: shape({}),
+  className: string,
+  children: node,
+};
 
-export default RenderFieldGutter;
+export default FieldTypeGutter;

src/client/components/forms/FieldTypeGutter/index.scss

@@ -2,7 +2,7 @@
 
 $controls-top-adjustment: base(.1);
 
-.render-field-gutter {
+.field-type-gutter {
   padding-right: base(1.25);
   margin-bottom: base(1);
 
@@ -10,24 +10,24 @@ $controls-top-adjustment: base(.1);
     padding-right: 0;
     padding-left: base(1.25);
 
-    .render-field-gutter__content {
+    .field-type-gutter__content {
       margin-bottom: base(1);
     }
 
-    .render-field-gutter__content-container {
+    .field-type-gutter__content-container {
       padding-right: 0;
       box-shadow: none;
     }
   }
 
   &--v-align-top {
-    .render-field-gutter__content {
+    .field-type-gutter__content {
       justify-content: flex-start;
     }
   }
 
   &--v-align-sticky {
-    .render-field-gutter__content {
+    .field-type-gutter__content {
       position: sticky;
       top: $top-header-offset;
       height: unset;
@@ -60,7 +60,7 @@ $controls-top-adjustment: base(.1);
 
 // External scopes
 .field-type.blocks {
-  .render-field-gutter {
+  .field-type-gutter {
     &__content-container {
       min-height: calc(100% + #{$controls-top-adjustment});
     }

src/client/components/forms/field-types/Array/index.scss

@@ -26,13 +26,21 @@
       width: 100%;
     }
   }
+
+  .render-fields {
+    .row {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 .field-type.array,
 .field-type.blocks {
   .field-type.array {
     .field-type.array__add-button-wrap {
-      margin-left: base(2.65);
+      margin-left: base(3);
     }
   }
 }

src/client/components/forms/field-types/Blocks/index.scss

@@ -30,7 +30,7 @@
 .field-type.blocks {
   .field-type.blocks {
     .field-type.blocks__add-button-wrap {
-      margin-left: base(2.65);
+      margin-left: base(3);
     }
   }
 }

src/client/components/forms/field-types/Group/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import RenderFields, { useRenderedFields } from '../../RenderFields';
 import withCondition from '../../withCondition';
-import RenderFieldGutter from '../../RenderFieldGutter';
+import FieldTypeGutter from '../../FieldTypeGutter';
 
 import './index.scss';
 
@@ -26,18 +26,22 @@ const Group = (props) => {
 
   return (
     <div className="field-type group">
-      <h3 className={`${baseClass}__title`}>{label}</h3>
+      <FieldTypeGutter />
-      <div className={`${baseClass}__fields-wrapper`}>
+
-        <RenderFieldGutter />
+      <div className={`${baseClass}__content-wrapper`}>
-        <RenderFields
+        <h3 className={`${baseClass}__title`}>{label}</h3>
-          readOnly={readOnly}
+
-          fieldTypes={fieldTypes}
+        <div className={`${baseClass}__fields-wrapper`}>
-          customComponentsPath={`${customComponentsPath}${name}.fields.`}
+          <RenderFields
-          fieldSchema={fields.map((subField) => ({
+            readOnly={readOnly}
-            ...subField,
+            fieldTypes={fieldTypes}
-            path: `${path}${subField.name ? `.${subField.name}` : ''}`,
+            customComponentsPath={`${customComponentsPath}${name}.fields.`}
-          }))}
+            fieldSchema={fields.map((subField) => ({
-        />
+              ...subField,
+              path: `${path}${subField.name ? `.${subField.name}` : ''}`,
+            }))}
+          />
+        </div>
       </div>
     </div>
   );

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

@@ -1,20 +1,36 @@
 @import '../../../../scss/styles.scss';
 
+@mixin reduce-gutter {
+  padding-right: 0;
+  padding-left: 2px;
+}
+
 .group {
   margin-bottom: base(2);
+  display: flex;
 
   &:hover {
-    .render-field-gutter__content-container {
+    .field-type-gutter__content-container {
       box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
     }
   }
 
+  &__content-wrapper {
+    width: 100%;
+  }
+
   &__fields-wrapper {
     position: relative;
   }
 
   .render-fields {
     width: 100%;
+
+    .row {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   @include mid-break {
@@ -22,9 +38,17 @@
       display: flex;
     }
 
-    .render-field-gutter__content-container {
+    .field-type-gutter__content-container {
-      padding-right: 0;
+      @include reduce-gutter;
-      padding-left: 2px;
     }
   }
 }
+
+.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;
+  }
+}

src/client/components/forms/field-types/Row/index.scss

@@ -2,6 +2,7 @@
 
 .field-type.row {
   display: flex;
+  flex-wrap: wrap;
   margin-left: - base(.5);
   margin-right: - base(.5);
   width: calc(100% + #{$baseline});

src/client/scss/vars.scss

@@ -54,12 +54,6 @@ $style-stroke-width : 1px;
 $style-stroke-width-s : 1px;
 $style-stroke-width-m : 2px;
 
-
-//////////////////////////////
-// MISC
-//////////////////////////////
-$top-header-offset: 120px;
-
 //////////////////////////////
 // MISC
 //////////////////////////////