Tidy inline docs and added sdk support table.

src/components/Button.jsx

@@ -20,7 +20,8 @@ class Button extends React.Component {
       aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}
-      style={this.props.style}>
+      style={this.props.style}
+    >
       {this.props.children}
     </button>
   }

src/components/fields/DocLabel.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
+
 export default class DocLabel extends React.Component {
   static propTypes = {
     label: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string
     ]).isRequired,
-    doc: PropTypes.string.isRequired,
+    fieldSpec: PropTypes.object.isRequired,
   }
 
   constructor (props) {
@@ -28,19 +30,26 @@ export default class DocLabel extends React.Component {
   }
 
   render() {
-    return <label className="maputnik-doc-wrapper">
+    const {label, fieldSpec} = this.props;
-      <div className="maputnik-doc-target">
+    const {doc} = fieldSpec || {};
-        <span>
+
-          {this.props.label}
+    if (doc) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
           {'\xa0'}
           <button
+            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
             className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
             onClick={() => this.onToggleDoc(!this.state.open)}
           >
-            {this.state.open ? 'x' : '?'}
+            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>
-        </span>
+        </div>
-      </div>
+      </label>
-    </label>
+    }
+    else {
+      return <div />
+    }
   }
 }

src/components/fields/_DataProperty.jsx

@@ -200,17 +200,17 @@ export default class DataProperty extends React.Component {
     return <div className="maputnik-data-spec-block">
     <div className="maputnik-data-spec-property">
       <InputBlock
-        doc={this.props.fieldSpec.doc}
+        fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}
       >
         <div className="maputnik-data-spec-property-group">
           <DocLabel
             label="Property"
-            doc={"Input a data property to base styles off of."}
           />
           <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>
@@ -218,12 +218,12 @@ export default class DataProperty extends React.Component {
         <div className="maputnik-data-spec-property-group">
           <DocLabel
             label="Type"
-            doc={"Select a type of data scale (default is 'categorical')."}
           />
           <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>
@@ -231,7 +231,6 @@ export default class DataProperty extends React.Component {
         <div className="maputnik-data-spec-property-group">
           <DocLabel
             label="Default"
-            doc={"Input a default value for data if not covered by the scales."}
           />
           <div className="maputnik-data-spec-property-input">
             <SpecField
@@ -242,15 +241,15 @@ export default class DataProperty extends React.Component {
             />
           </div>
         </div>
+        {dataFields}
+        <Button
+          className="maputnik-add-stop"
+          onClick={this.props.onAddStop.bind(this)}
+        >
+          Add stop
+        </Button>
       </InputBlock>
     </div>
-      {dataFields}
-      <Button
-        className="maputnik-add-stop"
-        onClick={this.props.onAddStop.bind(this)}
-      >
-        Add stop
-      </Button>
     </div>
   }
 }

src/components/fields/_DeleteStopButton.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import DocLabel from './DocLabel'
 import Button from '../Button'
 import {MdDelete} from 'react-icons/md'
 
@@ -15,11 +14,9 @@ export default class DeleteStopButton extends React.Component {
     return <Button
       className="maputnik-delete-stop"
       onClick={this.props.onClick}
+      title={"Remove zoom level stop."}
     >
-      <DocLabel
+      <MdDelete />
-        label={<MdDelete />}
-        doc={"Remove zoom level stop."}
-      />
     </Button>
   }
 }

src/components/fields/_FunctionButtons.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import DocLabel from './DocLabel'
 import Button from '../Button'
 import {MdFunctions, MdInsertChart} from 'react-icons/md'
 
@@ -19,24 +18,18 @@ export default class FunctionButtons extends React.Component {
       makeZoomButton = <Button
         className="maputnik-make-zoom-function"
         onClick={this.props.onZoomClick}
+        title={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
       >
-        <DocLabel
+        <MdFunctions />
-          label={<MdFunctions />}
-          cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-        />
       </Button>
 
       if (this.props.fieldSpec['property-type'] === 'data-driven') {
         makeDataButton = <Button
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}
+          title={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
         >
-          <DocLabel
+          <MdInsertChart />
-            label={<MdInsertChart />}
-            cursorTargetStyle={{ cursor: 'pointer' }}
-            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
-          />
         </Button>
       }
       return <div>{makeDataButton}{makeZoomButton}</div>

src/components/fields/_SpecProperty.jsx

@@ -25,6 +25,7 @@ export default class SpecProperty extends React.Component {
 
     return <InputBlock
       doc={this.props.fieldSpec.doc}
+      fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={functionBtn}
     >

src/components/fields/_ZoomProperty.jsx

@@ -125,7 +125,7 @@ export default class ZoomProperty extends React.Component {
 
       return <InputBlock
         key={key}
-        doc={this.props.fieldSpec.doc}
+        fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}
         action={deleteStopBtn}
       >

src/components/filter/FilterEditor.jsx

@@ -8,6 +8,7 @@ import SelectInput from '../inputs/SelectInput'
 import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'
+import SpecDoc from '../inputs/SpecDoc'
 
 function hasCombiningFilter(filter) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
@@ -29,6 +30,13 @@ export default class CombiningFilterEditor extends React.Component {
     onChange: PropTypes.func.isRequired,
   }
 
+  constructor () {
+    super();
+    this.state = {
+      showDoc: false,
+    };
+  }
+
   // Convert filter to combining filter
   combiningFilter() {
     let filter = this.props.filter || ['all']
@@ -63,11 +71,21 @@ export default class CombiningFilterEditor extends React.Component {
     this.props.onChange(newFilterItem)
   }
 
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
   render() {
     const filter = this.combiningFilter()
     let combiningOp = filter[0]
     let filters = filter.slice(1)
 
+    const fieldSpec={
+      doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
+    };
+
     const editorBlocks = filters.map((f, idx) => {
       return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
         <SingleFilterEditor
@@ -89,7 +107,8 @@ export default class CombiningFilterEditor extends React.Component {
       <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
         <DocLabel
           label={"Compound Filter"}
-          doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
+          onToggleDoc={this.onToggleDoc}
+          fieldSpec={fieldSpec}
         />
         <SelectInput
           value={combiningOp}
@@ -106,6 +125,12 @@ export default class CombiningFilterEditor extends React.Component {
           Add filter
         </Button>
       </div>
+      <div
+        className="maputnik-doc-inline"
+        style={{display: this.state.showDoc ? '' : 'none'}}
+      >
+        <SpecDoc fieldSpec={fieldSpec} />
+      </div>
     </div>
   }
 }

src/components/inputs/InputBlock.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import DocLabel from '../fields/DocLabel'
+import SpecDoc from './SpecDoc'
+
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
@@ -11,7 +13,6 @@ class InputBlock extends React.Component {
       PropTypes.string,
       PropTypes.element,
     ]).isRequired,
-    doc: PropTypes.string,
     action: PropTypes.element,
     children: PropTypes.node.isRequired,
     style: PropTypes.object,
@@ -44,16 +45,16 @@ class InputBlock extends React.Component {
         "maputnik-action-block": this.props.action
       })}
       >
-      {this.props.doc &&
+      {this.props.fieldSpec &&
       <div className="maputnik-input-block-label">
         <DocLabel
           label={this.props.label}
-          doc={this.props.doc}
           onToggleDoc={this.onToggleDoc}
+          fieldSpec={this.props.fieldSpec}
         />
       </div>
       }
-      {!this.props.doc &&
+      {!this.props.fieldSpec &&
       <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
@@ -66,12 +67,12 @@ class InputBlock extends React.Component {
       <div className="maputnik-input-block-content">
         {this.props.children}
       </div>
-      {this.props.doc &&
+      {this.props.fieldSpec &&
       <div
         className="maputnik-doc-inline"
         style={{display: this.state.showDoc ? '' : 'none'}}
       >
-        {this.props.doc}
+        <SpecDoc fieldSpec={this.props.fieldSpec} />
       </div>
       }
     </div>

src/components/inputs/SelectInput.jsx

@@ -8,6 +8,7 @@ class SelectInput extends React.Component {
     options: PropTypes.array.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
   }
 
 
@@ -21,6 +22,7 @@ class SelectInput extends React.Component {
       className="maputnik-select"
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}
+      title={this.props.title}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >

src/components/inputs/SpecDoc.js

@@ -0,0 +1,55 @@
+import React from 'react'
+
+export default function SpecDoc (props={}) {
+  const {fieldSpec} = props;
+
+  const {doc} = fieldSpec;
+  const sdkSupport = fieldSpec['sdk-support'];
+
+  const headers = {
+    js: "JS",
+    android: "Android",
+    ios: "iOS",
+    macos: "macOS",
+  };
+
+  return (
+    <>
+      {doc && 
+        <div>{doc}</div>
+      }
+      {sdkSupport &&
+        <div className="sdk-support">
+          <table className="sdk-support__table">
+            <thead>
+              <tr>
+                <th></th>
+                {Object.values(headers).map(header => {
+                  return <th key={header}>{header}</th>;
+                })}
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(sdkSupport).map(([key, supportObj]) => {
+                return (
+                  <tr key={key}>
+                    <td>{key}</td>
+                    {Object.keys(headers).map(k => {
+                      const value = supportObj[k];
+                      if (supportObj.hasOwnProperty(k)) {
+                        return <td key={k}>{supportObj[k]}</td>;
+                      }
+                      else {
+                        return <td key={k}>no</td>;
+                      }
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      }
+    </>
+  );
+}

src/components/layers/CommentBlock.jsx

@@ -11,9 +11,13 @@ class MetadataBlock extends React.Component {
   }
 
   render() {
+    const fieldSpec = {
+      doc: "Comments for the current layer. This is non-standard and not in the spec."
+    };
+
     return <InputBlock
       label={"Comments"}
-      doc={"Comments for the current layer. This is non-standard and not in the spec."}
+      fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
     >
       <StringInput

src/components/layers/LayerIdBlock.jsx

@@ -13,7 +13,7 @@ class LayerIdBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"ID"} doc={latest.layer.id.doc}
+    return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}
     >
       <StringInput

src/components/layers/LayerSourceBlock.jsx

@@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"} doc={latest.layer.source.doc}
+    return <InputBlock label={"Source"} fieldSpec={latest.layer.source}
       data-wd-key={this.props.wdKey}
     >
       <AutocompleteInput

src/components/layers/LayerSourceLayerBlock.jsx

@@ -20,7 +20,7 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"} doc={latest.layer['source-layer'].doc}
+    return <InputBlock label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
     >
       <AutocompleteInput

src/components/layers/LayerTypeBlock.jsx

@@ -13,7 +13,7 @@ class LayerTypeBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Type"} doc={latest.layer.type.doc}
+    return <InputBlock label={"Type"} fieldSpec={latest.layer.type}
       data-wd-key={this.props.wdKey}
     >
       <SelectInput

src/components/layers/MaxZoomBlock.jsx

@@ -12,7 +12,7 @@ class MaxZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
+    return <InputBlock label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
       data-wd-key="max-zoom"
     >
       <NumberInput

src/components/layers/MinZoomBlock.jsx

@@ -12,7 +12,7 @@ class MinZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
+    return <InputBlock label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
       data-wd-key="min-zoom"
     >
       <NumberInput

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)'],

src/components/sources/SourceTypeEditor.jsx

@@ -18,7 +18,7 @@ class TileJSONSourceEditor extends React.Component {
 
   render() {
     return <div>
-      <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
+      <InputBlock label={"TileJSON URL"} fieldSpec={latest.source_vector.url}>
         <UrlInput
           value={this.props.source.url}
           onChange={url => this.props.onChange({
@@ -52,7 +52,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} fieldSpec={latest.source_vector.tiles}>
         <UrlInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} fieldSpec={latest.source_vector.minzoom}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -73,7 +73,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} fieldSpec={latest.source_vector.maxzoom}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({
@@ -95,7 +95,7 @@ class GeoJSONSourceUrlEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"GeoJSON URL"} doc={latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON URL"} fieldSpec={latest.source_geojson.data}>
       <UrlInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
@@ -114,7 +114,7 @@ class GeoJSONSourceJSONEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
       <JSONEditor
         layer={this.props.source.data}
         maxHeight={200}
@@ -150,7 +150,7 @@ class SourceTypeEditor extends React.Component {
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-        <InputBlock label={"Encoding"} doc={latest.source_raster_dem.encoding.doc}>
+        <InputBlock label={"Encoding"} fieldSpec={latest.source_raster_dem.encoding}>
           <SelectInput
             options={Object.keys(latest.source_raster_dem.encoding.values)}
             onChange={encoding => this.props.onChange({

src/styles/_components.scss

@@ -28,7 +28,8 @@
   height: 100%;
 }
 
-.maputnik-input-block:hover {
+.maputnik-input-block:hover,
+.maputnik-filter-editor-compound-select:hover {
   .maputnik-doc-button {
     opacity: 1;
     pointer-events: all;
@@ -68,14 +69,16 @@
   &-button {
     opacity: 0;
     pointer-events: none;
-    background: #000;
+    background: $color-black;
     color: white;
-    border: solid 1px #555;
+    border: none;
-    border-radius: 100px;
+    padding: 0;
+
+    svg {
+      pointer-events: none;
+    }
 
     &--open {
-      background: white;
-      color: black;
       opacity: 1;
       pointer-events: all;
     }
@@ -87,7 +90,8 @@
   background-color: $color-gray;
   padding: $margin-2;
   font-size: 12px;
-  margin-top: $margin-2;
+  margin-top: $margin-3;
+  line-height: 1.5;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {

src/styles/_input.scss

@@ -193,3 +193,20 @@
   position: relative;
   overflow: hidden;
 }
+
+.sdk-support {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.sdk-support__table {
+  width: 100%;
+  margin-top: $margin-3;
+
+  td, th {
+    border: solid 1px $color-midgray;
+    padding: 4px 6px;
+    white-space: nowrap;
+  }
+}

src/styles/_layout.scss

@@ -32,7 +32,7 @@
     top: $toolbar-height + $toolbar-offset;
     left: 200px;
     z-index: 1;
-    width: 350px;
+    width: 370px;
     background-color: $color-black;
   }
 

src/styles/_modal.scss

@@ -108,6 +108,11 @@
   background-color: $color-midgray;
 }
 
+.maputnik-add-modal {
+  width: 400px;
+  max-width: 100%;
+}
+
 .maputnik-add-layer {
   @extend .clearfix;
 }