Tidy inline docs and added sdk support table.

src/components/modals/AddModal.jsx

@@ -126,6 +126,7 @@ class AddModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Add Layer'}
       data-wd-key="modal:add-layer"
+      className="maputnik-add-modal"
     >
       <div className="maputnik-add-layer">
       <LayerIdBlock

src/components/modals/Modal.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
+import classnames from 'classnames';
 
 
 class Modal extends React.Component {
@@ -13,6 +14,7 @@ class Modal extends React.Component {
     children: PropTypes.node,
     underlayClickExits: PropTypes.bool,
     underlayProps: PropTypes.object,
+    className: PropTypes.string,
   }
 
   static defaultProps = {
@@ -45,7 +47,7 @@ class Modal extends React.Component {
         verticallyCenter={true}
         onExit={this.onClose}
       >
-        <div className="maputnik-modal"
+        <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">

src/components/modals/SettingsModal.jsx

@@ -86,21 +86,21 @@ class SettingsModal extends React.Component {
       title={'Style Settings'}
     >
       <div className="modal-settings">
-      <InputBlock label={"Name"} doc={latest.$root.name.doc}>
+      <InputBlock label={"Name"} fieldSpec={latest.$root.name}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
       </InputBlock>
-      <InputBlock label={"Owner"} doc={"Owner ID of the style. Used by Mapbox or future style APIs."}>
+      <InputBlock label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
-      <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
+      <InputBlock label={"Sprite URL"} fieldSpec={latest.$root.sprite}>
         <UrlInput {...inputProps}
           data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
@@ -108,7 +108,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
+      <InputBlock label={"Glyphs URL"} fieldSpec={latest.$root.glyphs}>
         <UrlInput {...inputProps}
           data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}
@@ -116,7 +116,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
+      <InputBlock label={"Mapbox Access Token"} fieldSpec={{doc: "Public access token for Mapbox services."}}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
@@ -124,7 +124,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"MapTiler Access Token"} doc={"Public access token for MapTiler Cloud."}>
+      <InputBlock label={"MapTiler Access Token"} fieldSpec={{doc: "Public access token for MapTiler Cloud."}}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
@@ -132,7 +132,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Thunderforest Access Token"} doc={"Public access token for Thunderforest services."}>
+      <InputBlock label={"Thunderforest Access Token"} fieldSpec={{doc: "Public access token for Thunderforest services."}}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
@@ -140,7 +140,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Center"} doc={latest.$root.center.doc}>
+      <InputBlock label={"Center"} fieldSpec={latest.$root.center}>
         <ArrayInput
           length={2}
           type="number"
@@ -150,7 +150,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Zoom"} doc={latest.$root.zoom.doc}>
+      <InputBlock label={"Zoom"} fieldSpec={latest.$root.zoom}>
         <NumberInput
           {...inputProps}
           value={mapStyle.zoom}
@@ -159,7 +159,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Bearing"} doc={latest.$root.bearing.doc}>
+      <InputBlock label={"Bearing"} fieldSpec={latest.$root.bearing}>
         <NumberInput
           {...inputProps}
           value={mapStyle.bearing}
@@ -168,7 +168,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Pitch"} doc={latest.$root.pitch.doc}>
+      <InputBlock label={"Pitch"} fieldSpec={latest.$root.pitch}>
         <NumberInput
           {...inputProps}
           value={mapStyle.pitch}
@@ -177,7 +177,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light anchor"} doc={latest.light.anchor.doc}>
+      <InputBlock label={"Light anchor"} fieldSpec={latest.light.anchor}>
         <EnumInput
           {...inputProps}
           value={light.anchor}
@@ -187,7 +187,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light color"} doc={latest.light.color.doc}>
+      <InputBlock label={"Light color"} fieldSpec={latest.light.color}>
         <ColorField
           {...inputProps}
           value={light.color}
@@ -196,7 +196,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light intensity"} doc={latest.light.intensity.doc}>
+      <InputBlock label={"Light intensity"} fieldSpec={latest.light.intensity}>
         <NumberInput
           {...inputProps}
           value={light.intensity}
@@ -205,7 +205,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Light position"} doc={latest.light.position.doc}>
+      <InputBlock label={"Light position"} fieldSpec={latest.light.position}>
         <ArrayInput
           {...inputProps}
           type="number"
@@ -216,7 +216,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Transition delay"} doc={latest.transition.delay.doc}>
+      <InputBlock label={"Transition delay"} fieldSpec={latest.transition.delay}>
         <NumberInput
           {...inputProps}
           value={transition.delay}
@@ -225,7 +225,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Transition duration"} doc={latest.transition.duration.doc}>
+      <InputBlock label={"Transition duration"} fieldSpec={latest.transition.duration}>
         <NumberInput
           {...inputProps}
           value={transition.duration}
@@ -234,7 +234,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
+      <InputBlock label={"Style Renderer"} fieldSpec={{doc: "Choose the default Maputnik renderer for this style."}}>
         <SelectInput {...inputProps}
           data-wd-key="modal-settings.maputnik:renderer" 
           options={[

src/components/modals/SourcesModal.jsx

@@ -168,13 +168,13 @@ class AddSource extends React.Component {
 
   render() {
     return <div className="maputnik-add-source">
-      <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
+      <InputBlock label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
         <StringInput
           value={this.state.sourceId}
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
+      <InputBlock label={"Source Type"} fieldSpec={latest.source_vector.type}>
         <SelectInput
           options={[
             ['geojson_json', 'GeoJSON (JSON)'],