From b7d08dfaa62025d0495b851e9bc23ab13c23801a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 16 Feb 2020 21:56:03 +0000
Subject: [PATCH] Fixed data function display issues.

---
 src/components/fields/DocLabel.jsx      |   9 ++-
 src/components/fields/_DataProperty.jsx | 102 ++++++++++++------------
 src/styles/_zoomproperty.scss           |   4 -
 3 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index 83fd624..5375fbb 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -49,8 +49,15 @@ export default class DocLabel extends React.Component {
         </div>
       </label>
     }
+    else if (label) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+        </div>
+      </label>
+    }
     else {
-      return <div />
+      <div />
     }
   }
 }
diff --git a/src/components/fields/_DataProperty.jsx b/src/components/fields/_DataProperty.jsx
index 73f0c4d..f3cef01 100644
--- a/src/components/fields/_DataProperty.jsx
+++ b/src/components/fields/_DataProperty.jsx
@@ -217,58 +217,58 @@ export default class DataProperty extends React.Component {
     })
 
     return <div className="maputnik-data-spec-block">
-    <div className="maputnik-data-spec-property">
-      <InputBlock
-        fieldSpec={this.props.fieldSpec}
-        label={labelFromFieldName(this.props.fieldName)}
-      >
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Property"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <StringInput
-              value={this.props.value.property}
-              title={"Input a data property to base styles off of."}
-              onChange={propVal => this.changeDataProperty("property", propVal)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Type"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SelectInput
-              value={this.props.value.type}
-              onChange={propVal => this.changeDataProperty("type", propVal)}
-              title={"Select a type of data scale (default is 'categorical')."}
-              options={this.getDataFunctionTypes(this.props.fieldSpec)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Default"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SpecField
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={this.props.value.default}
-              onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
-            />
-          </div>
-        </div>
-        {dataFields}
-        <Button
-          className="maputnik-add-stop"
-          onClick={this.props.onAddStop.bind(this)}
+      <div className="maputnik-data-spec-property">
+        <InputBlock
+          fieldSpec={this.props.fieldSpec}
+          label={labelFromFieldName(this.props.fieldName)}
         >
-          Add stop
-        </Button>
-      </InputBlock>
-    </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Property"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <StringInput
+                value={this.props.value.property}
+                title={"Input a data property to base styles off of."}
+                onChange={propVal => this.changeDataProperty("property", propVal)}
+              />
+            </div>
+          </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Type"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <SelectInput
+                value={this.props.value.type}
+                onChange={propVal => this.changeDataProperty("type", propVal)}
+                title={"Select a type of data scale (default is 'categorical')."}
+                options={this.getDataFunctionTypes(this.props.fieldSpec)}
+              />
+            </div>
+          </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Default"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <SpecField
+                fieldName={this.props.fieldName}
+                fieldSpec={this.props.fieldSpec}
+                value={this.props.value.default}
+                onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
+              />
+            </div>
+          </div>
+        </InputBlock>
+      </div>
+      {dataFields}
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onAddStop.bind(this)}
+      >
+        Add stop
+      </Button>
     </div>
   }
 }
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 1d59c9f..38e26c5 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -96,10 +96,6 @@
     .maputnik-data-spec-property-input {
       width: 75%;
       display: inline-block;
-
-      .maputnik-string {
-        margin-bottom: 3%;
-      }
     }
   }
 }