Use DocLabel in input block

src/components/inputs/InputBlock.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import input from '../../config/input'
+import DocLabel from '../fields/DocLabel'
 import { margins } from '../../config/scales'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
     label: React.PropTypes.string.isRequired,
+    doc: React.PropTypes.string,
     children: React.PropTypes.element.isRequired,
     style: React.PropTypes.object,
   }
@@ -31,6 +33,16 @@ class InputBlock extends React.Component {
       ...input.property,
       ...this.props.style,
     }}>
+      {this.props.doc &&
+      <DocLabel
+        label={this.props.label}
+        doc={this.props.doc}
+        style={{
+          width: '50%',
+        }}
+      />
+      }
+      {!this.props.doc &&
       <label
         style={{
           ...input.label,
@@ -38,6 +50,7 @@ class InputBlock extends React.Component {
       }}>
         {this.props.label}
       </label>
+      }
       {this.renderChildren()}
     </div>
   }

src/components/layers/LayerIdBlock.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -10,7 +11,7 @@ class LayerIdBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer ID"}>
+    return <InputBlock label={"Layer ID"} doc={GlSpec.layer.id.doc}>
       <StringInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerSourceBlock.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -18,7 +19,7 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"}>
+    return <InputBlock label={"Source"} doc={GlSpec.layer.source.doc}>
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -18,7 +19,7 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"}>
+    return <InputBlock label={"Source Layer"} doc={GlSpec.layer['source-layer'].doc}>
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}

src/components/layers/LayerTypeBlock.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 
@@ -10,7 +11,7 @@ class LayerTypeBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer Type"}>
+    return <InputBlock label={"Layer Type"} doc={GlSpec.layer.type.doc}>
       <SelectInput
         options={[
           ['background', 'Background'],