Re-added info button and SDK docs to fields after refactor.

src/components/Block.jsx

@@ -69,15 +69,34 @@ export default class Block extends React.Component {
       })}
       onClick={this.onLabelClick}
     >
-      <div className="maputnik-input-block-label">
-        {this.props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
         {this.props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </label>
   }
 }

src/components/Fieldset.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
 
 
 let IDX = 0;
@@ -8,21 +10,49 @@ export default class Fieldset extends React.Component {
   constructor (props) {
     super(props);
     this._labelId = `fieldset_label_${(IDX++)}`;
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
   }
 
   render () {
     const {props} = this;
 
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
-      <div className="maputnik-input-block-label" id={this._labelId}>
-        {props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content">
         {props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </div>
   }
 }

src/components/SpecField.jsx

@@ -39,7 +39,11 @@ export default class SpecField extends React.Component {
       TypeBlock = Block;
     }
 
-    return <TypeBlock label={props.label} action={props.action}>
+    return <TypeBlock
+      label={props.label}
+      action={props.action}
+      fieldSpec={this.props.fieldSpec}
+    >
       <InputSpec {...props} />
     </TypeBlock>
   }

src/styles/_components.scss

@@ -89,6 +89,7 @@
   font-size: 12px;
   margin-top: $margin-3;
   line-height: 1.5;
+  flex: 1 0;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {