Merge pull request #706 from orangemug/fix/input-label-a11y

Improved label accessibility

.storybook/main.js

@@ -16,7 +16,6 @@ module.exports = {
       ...config,
       module: {
         rules: [
-          ...config.module.rules,
           ...rules,
         ]
       }

package-lock.json

@@ -11766,8 +11766,8 @@
       "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg=="
     },
     "maputnik-design": {
-      "version": "github:maputnik/design#f7a2b4d63918adadc242ec05c563d3ba4eb4df68",
-      "from": "github:maputnik/design#f7a2b4d"
+      "version": "github:maputnik/design#172b06cb062a82f62bb7239474533a110915ef3e",
+      "from": "github:maputnik/design#172b06c"
     },
     "markdown-escapes": {
       "version": "1.0.4",
@@ -17124,6 +17124,11 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
+    },
     "string-width": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",

package.json

@@ -46,7 +46,7 @@
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^1.11.0",
     "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design#f7a2b4d",
+    "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.3.1",
     "ol-mapbox-style": "^6.0.1",
     "prop-types": "^15.7.2",
@@ -66,6 +66,7 @@
     "react-sortable-hoc": "^1.11.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.3.6",
+    "string-hash": "^1.1.3",
     "url": "^0.11.0"
   },
   "jshintConfig": {

src/components/App.jsx

@@ -6,6 +6,7 @@ import get from 'lodash.get'
 import {unset} from 'lodash'
 import arrayMove from 'array-move'
 import url from 'url'
+import hash from "string-hash";
 
 import MapMapboxGl from './MapMapboxGl'
 import MapOpenLayers from './MapOpenLayers'
@@ -189,7 +190,7 @@ export default class App extends React.Component {
           console.log('Falling back to local storage for storing styles')
           this.styleStore = new StyleStore()
         }
-        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle, {initialLoad: true}))
 
         if(Debug.enabled()) {
           Debug.set("maputnik", "styleStore", this.styleStore);
@@ -322,9 +323,14 @@ export default class App extends React.Component {
     opts = {
       save: true,
       addRevision: true,
+      initialLoad: false,
       ...opts,
     };
 
+    if (opts.initialLoad) {
+      this.getInitialStateFromUrl(newStyle);
+    }
+
     const errors = validate(newStyle, latest) || [];
 
     // The validate function doesn't give us errors for duplicate error with
@@ -442,6 +448,7 @@ export default class App extends React.Component {
       errors: mappedErrors,
     }, () => {
       this.fetchSources();
+      this.setStateInUrl();
     })
 
   }
@@ -542,7 +549,7 @@ export default class App extends React.Component {
   setMapState = (newState) => {
     this.setState({
       mapState: newState
-    })
+    }, this.setStateInUrl);
   }
 
   setDefaultValues = (styleObj) => {
@@ -697,8 +704,85 @@ export default class App extends React.Component {
     </div>
   }
 
+  setStateInUrl = () => {
+    const {mapState, mapStyle, isOpen} = this.state;
+    const {selectedLayerIndex} = this.state;
+    const url = new URL(location.href);
+    const hashVal = hash(JSON.stringify(mapStyle));
+    url.searchParams.set("layer", `${hashVal}~${selectedLayerIndex}`);
+
+    const openModals = Object.entries(isOpen)
+    .map(([key, val]) => (val === true ? key : null))
+    .filter(val => val !== null);
+
+    if (openModals.length > 0) {
+      url.searchParams.set("modal", openModals.join(","));
+    }
+    else {
+      url.searchParams.delete("modal");
+    }
+
+    if (mapState === "map") {
+      url.searchParams.delete("view");
+    }
+    else if (mapState === "inspect") {
+      url.searchParams.set("view", "inspect");
+    }
+
+    history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
+  }
+
+  getInitialStateFromUrl = (mapStyle) => {
+    const url = new URL(location.href);
+    const modalParam = url.searchParams.get("modal");
+    if (modalParam && modalParam !== "") {
+      const modals = modalParam.split(",");
+      const modalObj = {};
+      modals.forEach(modalName => {
+        modalObj[modalName] = true;
+      });
+
+      this.setState({
+        isOpen: {
+          ...this.state.isOpen,
+          ...modalObj,
+        }
+      });
+    }
+
+    const view = url.searchParams.get("view");
+    if (view && view !== "") {
+      this.setMapState(view);
+    }
+
+    const path = url.searchParams.get("layer");
+    if (path) {
+      try {
+        const parts = path.split("~");
+        const [hashVal, selectedLayerIndex] = [
+          parts[0],
+          parseInt(parts[1], 10),
+        ];
+
+        let invalid = false;
+        if (hashVal !== "-") {
+          const currentHashVal = hash(JSON.stringify(mapStyle));
+          if (currentHashVal !== parseInt(hashVal, 10)) {
+            invalid = true;
+          }
+        }
+        if (!invalid) {
+          this.setState({selectedLayerIndex});
+        }
+      }
+      catch (err) {
+        console.warn(err);
+      }
+    }
+  }
+
   onLayerSelect = (index) => {
-    this.setState({ selectedLayerIndex: index })
+    this.setState({ selectedLayerIndex: index }, this.setStateInUrl);
   }
 
   setModal(modalName, value) {
@@ -711,7 +795,7 @@ export default class App extends React.Component {
         ...this.state.isOpen,
         [modalName]: value
       }
-    })
+    }, this.setStateInUrl)
   }
 
   toggleModal(modalName) {

src/components/AppToolbar.jsx

@@ -145,31 +145,37 @@ export default class AppToolbar extends React.Component {
     const views = [
       {
         id: "map",
+        group: "general",
         title: "Map",
       },
       {
         id: "inspect",
+        group: "general",
         title: "Inspect",
         disabled: this.props.renderer !== 'mbgljs',
       },
       {
         id: "filter-deuteranopia",
-        title: "Deuteranopia color filter",
+        group: "color-accessibility",
+        title: "Deuteranopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
-        title: "Protanopia color filter",
+        group: "color-accessibility",
+        title: "Protanopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
-        title: "Tritanopia color filter",
+        group: "color-accessibility",
+        title: "Tritanopia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
-        title: "Achromatopsia color filter",
+        group: "color-accessibility",
+        title: "Achromatopsia filter",
         disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
@@ -178,7 +184,7 @@ export default class AppToolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <div className='maputnik-toolbar'>
+    return <nav className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
           className="maputnik-toolbar-logo-container"
@@ -205,16 +211,18 @@ export default class AppToolbar extends React.Component {
           >
             Map view
           </button>
-          <div
+          <a
             className="maputnik-toolbar-logo"
-            tabIndex="-1"
+            target="blank"
+            rel="noreferrer noopener"
+            href="https://github.com/maputnik/editor"
           >
             <span dangerouslySetInnerHTML={{__html: logoImage}} />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
             </h1>
-          </div>
+          </a>
         </div>
         <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
           <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
@@ -242,13 +250,22 @@ export default class AppToolbar extends React.Component {
                 onChange={(e) => this.handleSelection(e.target.value)}
                 value={currentView.id}
               >
-                {views.map((item) => {
+                {views.filter(v => v.group === "general").map((item) => {
                   return (
                     <option key={item.id} value={item.id} disabled={item.disabled}>
                       {item.title}
                     </option>
                   );
                 })}
+                <optgroup label="Color accessibility">
+                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                    return (
+                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                        {item.title}
+                      </option>
+                    );
+                  })}
+                </optgroup>
               </select>
             </label>
           </ToolbarSelect>
@@ -263,6 +280,6 @@ export default class AppToolbar extends React.Component {
           </ToolbarLinkHighlighted>
         </div>
       </div>
-    </div>
+    </nav>
   }
 }

src/components/Block.jsx

@@ -12,7 +12,7 @@ export default class Block extends React.Component {
     label: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.element,
-    ]).isRequired,
+    ]),
     action: PropTypes.element,
     children: PropTypes.node.isRequired,
     style: PropTypes.object,
@@ -40,16 +40,34 @@ export default class Block extends React.Component {
     });
   }
 
+  /**
+   * Some fields for example <InputColor/> bind click events inside the element
+   * to close the picker. This in turn propagates to the <label/> element
+   * causing the picker to reopen. This causes a scenario where the picker can
+   * never be closed once open.
+   */
+  onLabelClick = (event) => {
+    const el = event.nativeEvent.target;
+    const nativeEvent = event.nativeEvent;
+    const contains = this._blockEl.contains(el);
+
+    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
+      event.stopPropagation();
+    }
+		event.preventDefault();
+  }
+
   render() {
     const errors = [].concat(this.props.error || []);
 
-    return <div style={this.props.style}
+    return <label style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({
         "maputnik-input-block": true,
         "maputnik-input-block--wide": this.props.wideMode,
         "maputnik-action-block": this.props.action
       })}
+      onClick={this.onLabelClick}
     >
       {this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
@@ -61,25 +79,16 @@ export default class Block extends React.Component {
         </div>
       }
       {!this.props.fieldSpec &&
-      <label className="maputnik-input-block-label">
+        <div className="maputnik-input-block-label">
           {this.props.label}
-      </label>
+        </div>
       }
-      {this.props.action &&
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
-      }
-      <div className="maputnik-input-block-content">
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
         {this.props.children}
       </div>
-      {errors.length > 0 &&
-        <div className="maputnik-inline-error">
-          {[].concat(this.props.error).map((error, idx) => {
-            return <div key={idx}>{error.message}</div>
-          })}
-        </div>
-      }
       {this.props.fieldSpec &&
         <div
           className="maputnik-doc-inline"
@@ -88,7 +97,7 @@ export default class Block extends React.Component {
           <Doc fieldSpec={this.props.fieldSpec} />
         </div>
       }
-    </div>
+    </label>
   }
 }
 

src/components/FieldArray.jsx

@@ -1,108 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FieldString from './FieldString'
-import FieldNumber from './FieldNumber'
+import Block from './Block'
+import InputArray from './InputArray'
+import Fieldset from './Fieldset'
 
 export default class FieldArray extends React.Component {
   static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    length: PropTypes.number,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-  }
-
-  static defaultProps = {
-    value: [],
-    default: [],
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      value: this.props.value.slice(0),
-      // This is so we can compare changes in getDerivedStateFromProps
-      initialPropsValue: this.props.value.slice(0),
-    };
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const value = [];
-    const initialPropsValue = state.initialPropsValue.slice(0);
-
-    Array(props.length).fill(null).map((_, i) => {
-      if (props.value[i] === state.initialPropsValue[i]) {
-        value[i] = state.value[i];
-      }
-      else {
-        value[i] = state.value[i];
-        initialPropsValue[i] = state.value[i];
-      }
-    })
-
-    return {
-      value,
-      initialPropsValue,
-    };
-  }
-
-  isComplete (value) {
-    return Array(this.props.length).fill(null).every((_, i) => {
-      const val = value[i]
-      return !(val === undefined || val === "");
-    });
-  }
-
-  changeValue(idx, newValue) {
-    const value = this.state.value.slice(0);
-    value[idx] = newValue;
-
-    this.setState({
-      value,
-    }, () => {
-      if (this.isComplete(value)) {
-        this.props.onChange(value);
-      }
-      else {
-        // Unset until complete
-        this.props.onChange(undefined);
-      }
-    });
+    ...InputArray.propTypes,
+    name: PropTypes.string,
   }
 
   render() {
-    const {value} = this.state;
+    const {props} = this;
 
-    const containsValues = (
-      value.length > 0 &&
-      !value.every(val => {
-        return (val === "" || val === undefined)
-      })
-    );
-
-    const inputs = Array(this.props.length).fill(null).map((_, i) => {
-      if(this.props.type === 'number') {
-        return <FieldNumber
-          key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
-          required={containsValues ? true : false}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      } else {
-        return <FieldString
-          key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
-          required={containsValues ? true : false}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-    })
-
-    return <div className="maputnik-array">
-      {inputs}
-    </div>
+    return <Fieldset label={props.label}>
+      <InputArray {...props} />
+    </Fieldset>
   }
 }
 

src/components/FieldAutocomplete.jsx

@@ -1,97 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Autocomplete from 'react-autocomplete'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
 
 
-const MAX_HEIGHT = 140;
-
 export default class FieldAutocomplete extends React.Component {
   static propTypes = {
-    value: PropTypes.string,
-    options: PropTypes.array,
-    onChange: PropTypes.func,
-    keepMenuWithinWindowBounds: PropTypes.bool
-  }
-
-  state = {
-    maxHeight: MAX_HEIGHT
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    options: [],
-  }
-
-  calcMaxHeight() {
-    if(this.props.keepMenuWithinWindowBounds) {
-      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
-      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
-
-      if(limitedMaxHeight != this.state.maxHeight) {
-        this.setState({
-          maxHeight: limitedMaxHeight
-        })
-      }
-    }
-  }
-
-  componentDidMount() {
-    this.calcMaxHeight();
-  }
-
-  componentDidUpdate() {
-    this.calcMaxHeight();
-  }
-
-  onChange (v) {
-    this.props.onChange(v === "" ? undefined : v);
+    ...InputAutocomplete.propTypes,
   }
 
   render() {
-    return <div
-      ref={(el) => {
-        this.autocompleteMenuEl = el;
-      }}
-    >
-      <Autocomplete
-        menuStyle={{
-          position: "fixed",
-          overflow: "auto",
-          maxHeight: this.state.maxHeight,
-          zIndex: '998'
-        }}
-        wrapperProps={{
-          className: "maputnik-autocomplete",
-          style: null
-        }}
-        inputProps={{
-          className: "maputnik-string",
-          spellCheck: false
-        }}
-        value={this.props.value}
-        items={this.props.options}
-        getItemValue={(item) => item[0]}
-        onSelect={v => this.onChange(v)}
-        onChange={(e, v) => this.onChange(v)}
-        shouldItemRender={(item, value="") => {
-          if (typeof(value) === "string") {
-            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
-          }
-        }}
-        renderItem={(item, isHighlighted) => (
-          <div
-            key={item[0]}
-            className={classnames({
-              "maputnik-autocomplete-menu-item": true,
-              "maputnik-autocomplete-menu-item-selected": isHighlighted,
-            })}
-          >
-           {item[1]}
-          </div>
-        )}
-      />
-    </div>
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputAutocomplete {...props} />
+    </Block>
   }
 }
 

src/components/FieldCheckbox.jsx

@@ -1,34 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Block from './Block'
+import InputCheckbox from './InputCheckbox'
+
 
 export default class FieldCheckbox extends React.Component {
   static propTypes = {
-    value: PropTypes.bool,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-  }
-
-  static defaultProps = {
-    value: false,
+    ...InputCheckbox.propTypes,
   }
 
   render() {
-    return <label className="maputnik-checkbox-wrapper">
-      <input
-        className="maputnik-checkbox"
-        type="checkbox"
-        style={this.props.style}
-        onChange={e => this.props.onChange(!this.props.value)}
-        checked={this.props.value}
-      />
-      <div className="maputnik-checkbox-box">
-        <svg style={{
-            display: this.props.value ? 'inline' : 'none'
-          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
-          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
-        </svg>
-      </div>
-    </label>
+    const {props} = this;
+
+    return <Block label={this.props.label}>
+      <InputCheckbox {...props} />
+    </Block>
   }
 }
 

src/components/FieldColor.jsx

@@ -1,132 +1,20 @@
 import React from 'react'
-import Color from 'color'
-import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 import PropTypes from 'prop-types'
-import lodash from 'lodash';
+import Block from './Block'
+import InputColor from './InputColor'
 
-function formatColor(color) {
-  const rgb = color.rgb
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
-}
 
-/*** Number fields with support for min, max and units and documentation*/
 export default class FieldColor extends React.Component {
   static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    doc: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-  }
-
-  state = {
-    pickerOpened: false
-  }
-
-  constructor () {
-    super();
-    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
-  }
-
-  onChangeNoCheck (v) {
-    this.props.onChange(v);
-  }
-
-  //TODO: I much rather would do this with absolute positioning
-  //but I am too stupid to get it to work together with fixed position
-  //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset = () => {
-    const elem = this.colorInput
-    if(elem) {
-      const pos = elem.getBoundingClientRect()
-      return {
-        top: pos.top,
-        left: pos.left + 196,
-      }
-    } else {
-      return {
-        top: 160,
-        left: 555,
-      }
-    }
-  }
-
-  togglePicker = () => {
-    this.setState({ pickerOpened: !this.state.pickerOpened })
-  }
-
-  get color() {
-    // Catch invalid color.
-    try {
-      return Color(this.props.value).rgb()
-    }
-    catch(err) {
-      console.warn("Error parsing color: ", err);
-      return Color("rgb(255,255,255)");
-    }
-  }
-
-  onChange (v) {
-    this.props.onChange(v === "" ? undefined : v);
+    ...InputColor.propTypes,
   }
 
   render() {
-    const offset = this.calcPickerOffset()
-    var currentColor = this.color.object()
-    currentColor = {
-      r: currentColor.r,
-      g: currentColor.g,
-      b: currentColor.b,
-      // Rename alpha -> a for ChromePicker
-      a: currentColor.alpha
-    }
+    const {props} = this;
 
-    const picker = <div
-      className="maputnik-color-picker-offset"
-      style={{
-	      position: 'fixed',
-	      zIndex: 1,
-        left: offset.left,
-        top: offset.top,
-      }}>
-      <ChromePicker
-        color={currentColor}
-        onChange={c => this.onChangeNoCheck(formatColor(c))}
-      />
-      <div
-        className="maputnik-color-picker-offset"
-        onClick={this.togglePicker}
-        style={{
-          zIndex: -1,
-          position: 'fixed',
-          top: '0px',
-          right: '0px',
-          bottom: '0px',
-          left: '0px',
-        }}
-      />
-    </div>
-
-    var swatchStyle = {
-      backgroundColor: this.props.value
-    };
-
-    return <div className="maputnik-color-wrapper">
-      {this.state.pickerOpened && picker}
-      <div className="maputnik-color-swatch" style={swatchStyle}></div>
-      <input
-        spellCheck="false"
-        className="maputnik-color"
-        ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker}
-        style={this.props.style}
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.onChange(e.target.value)}
-      />
-    </div>
+    return <Block label={props.label}>
+      <InputColor {...props} />
+    </Block>
   }
 }
 

src/components/FieldComment.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Block from './Block'
+import InputString from './InputString'
+
+export default class FieldComment extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const fieldSpec = {
+      doc: "Comments for the current layer. This is non-standard and not in the spec."
+    };
+
+    return <Block
+      label={"Comments"}
+      fieldSpec={fieldSpec}
+      data-wd-key="layer-comment"
+    >
+      <InputString
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </Block>
+  }
+}

src/components/FieldDynamicArray.jsx

@@ -1,136 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FieldString from './FieldString'
-import FieldNumber from './FieldNumber'
-import Button from './Button'
-import {MdDelete} from 'react-icons/md'
-import FieldDocLabel from './FieldDocLabel'
-import FieldEnum from './FieldEnum'
-import capitalize from 'lodash.capitalize'
-import FieldUrl from './FieldUrl'
-
+import Block from './Block'
+import InputDynamicArray from './InputDynamicArray'
+import Fieldset from './Fieldset'
 
 export default class FieldDynamicArray extends React.Component {
   static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    style: PropTypes.object,
-    fieldSpec: PropTypes.object,
-  }
-
-  changeValue(idx, newValue) {
-    console.log(idx, newValue)
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
-  }
-
-  get values() {
-    return this.props.value || this.props.default || []
-  }
-
-  addValue = () => {
-    const values = this.values.slice(0)
-    if (this.props.type === 'number') {
-      values.push(0)
-    }
-    else if (this.props.type === 'url') {
-      values.push("");
-    }
-    else if (this.props.type === 'enum') {
-      const {fieldSpec} = this.props;
-      const defaultValue = Object.keys(fieldSpec.values)[0];
-      values.push(defaultValue);
-    } else {
-      values.push("")
-    }
-
-    this.props.onChange(values)
-  }
-
-  deleteValue(valueIdx) {
-    const values = this.values.slice(0)
-    values.splice(valueIdx, 1)
-
-    this.props.onChange(values)
+    ...InputDynamicArray.propTypes,
+    name: PropTypes.string,
   }
 
   render() {
-    const inputs = this.values.map((v, i) => {
-      const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      let input;
-      if(this.props.type === 'url') {
-        input = <FieldUrl
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-      else if (this.props.type === 'number') {
-        input = <FieldNumber
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-      else if (this.props.type === 'enum') {
-        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+    const {props} = this;
 
-        input = <FieldEnum
-          options={options}
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-      else {
-        input = <FieldString
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-
-      return <div
-        style={this.props.style}
-        key={i}
-        className="maputnik-array-block"
-        >
-        <div className="maputnik-array-block-action">
-          {deleteValueBtn}
-        </div>
-        <div className="maputnik-array-block-content">
-          {input}
-        </div>
-      </div>
-    })
-
-    return <div className="maputnik-array">
-      {inputs}
-      <Button
-        className="maputnik-array-add-value"
-        onClick={this.addValue}
-      >
-        Add value
-      </Button>
-    </div>
-  }
-}
-
-class DeleteValueButton extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-  }
-
-  render() {
-    return <Button
-      className="maputnik-delete-stop"
-      onClick={this.props.onClick}
-      title="Remove array item"
-    >
-      <FieldDocLabel
-        label={<MdDelete />}
-        doc={"Remove array item."}
-      />
-    </Button>
+    return <Fieldset label={props.label}>
+      <InputDynamicArray {...props} />
+    </Fieldset>
   }
 }
 

src/components/FieldEnum.jsx

@@ -1,45 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FieldSelect from './FieldSelect'
-import FieldMultiInput from './FieldMultiInput'
-
-
-function optionsLabelLength(options) {
-  let sum = 0;
-  options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
-}
+import InputEnum from './InputEnum'
+import Block from './Block';
+import Fieldset from './Fieldset';
 
 
 export default class FieldEnum extends React.Component {
   static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.array,
+    ...InputEnum.propTypes,
   }
 
   render() {
-    const {options, value, onChange, name} = this.props;
+    const {props} = this;
 
-    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-      return <FieldMultiInput
-        name={name}
-        options={options}
-        value={value || this.props.default}
-        onChange={onChange}
-      />
-    } else {
-      return <FieldSelect
-        options={options}
-        value={value || this.props.default}
-        onChange={onChange}
-      />
-    }
+    return <Fieldset label={props.label}>
+      <InputEnum {...props} />
+    </Fieldset>
   }
 }

src/components/FieldFunction.jsx

@@ -200,12 +200,35 @@ export default class FieldFunction  extends React.Component {
   }
 
   makeZoomFunction = () => {
-    const zoomFunc = {
+    const {value} = this.props;
+
+    let zoomFunc;
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        zoomFunc = {
+          stops: value.stops.map(stop => {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        zoomFunc = {
           stops: [
-        [6, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-        [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
           ]
         }
+      }
+    }
+    else {
+      zoomFunc = {
+        stops: [
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
@@ -258,7 +281,32 @@ export default class FieldFunction  extends React.Component {
   makeDataFunction = () => {
     const functionType = this.getFieldFunctionType(this.props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
-    const dataFunc = {
+    const {value} = this.props;
+    let dataFunc;
+
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          stops: value.stops.map(stop => {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          stops: [
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
+    }
+    else {
+      dataFunc = {
         property: "",
         type: functionType,
         stops: [
@@ -266,6 +314,8 @@ export default class FieldFunction  extends React.Component {
           [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
         ]
       }
+    }
+
     this.props.onChange(this.props.fieldName, dataFunc)
   }
 
@@ -310,11 +360,13 @@ export default class FieldFunction  extends React.Component {
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
           onExpressionClick={this.makeExpression} 
         />
       )
     }
     else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
       specField = (
         <DataProperty
           errors={this.props.errors}
@@ -325,6 +377,7 @@ export default class FieldFunction  extends React.Component {
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onChangeToZoomFunction={this.makeZoomFunction}
           onExpressionClick={this.makeExpression} 
         />
       )

src/components/FieldId.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputString from './InputString'
+
+export default class FieldId extends React.Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"ID"} fieldSpec={latest.layer.id}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      <InputString
+        value={this.props.value}
+        onChange={this.props.onChange}
+      />
+    </Block>
+  }
+}

src/components/FieldJson.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputJson from './InputJson'
+
+
+export default class FieldJson extends React.Component {
+  static propTypes = {
+    ...InputJson.propTypes,
+  }
+
+  render() {
+    const {props} = this;
+    return <InputJson {...props} />
+  }
+}
+

src/components/FieldMaxZoom.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+export default class FieldMaxZoom extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
+      data-wd-key="max-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.maxzoom.minimum}
+        max={latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
+      />
+    </Block>
+  }
+}

src/components/FieldMinZoom.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+export default class FieldMinZoom extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+  }
+
+  render() {
+    return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
+      data-wd-key="min-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.minzoom.minimum}
+        max={latest.layer.minzoom.maximum}
+        default={latest.layer.minzoom.minimum}
+      />
+    </Block>
+  }
+}

src/components/FieldMultiInput.jsx

@@ -1,41 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Button from './Button'
+import Block from './Block'
+import InputMultiInput from './InputMultiInput'
+import Fieldset from './Fieldset'
+
 
 export default class FieldMultiInput extends React.Component {
   static propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
+    ...InputMultiInput.propTypes,
   }
 
   render() {
-    let options = this.props.options
-    if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
-    }
+    const {props} = this;
 
-    const selectedValue = this.props.value || options[0][0]
-    const radios = options.map(([val, label])=> {
-      return <label
-        key={val}
-        className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
-      >
-        <input type="radio"
-          name={this.props.name}
-          onChange={e => this.props.onChange(val)}
-          value={val}
-          checked={val === selectedValue}
-        />
-        {label}
-      </label>
-    })
-
-    return <fieldset className="maputnik-multibutton">
-      {radios}
-    </fieldset>
+    return <Fieldset label={props.label}>
+      <InputMultiInput {...props} />
+    </Fieldset>
   }
 }
 

src/components/FieldNumber.jsx

@@ -1,232 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import InputNumber from './InputNumber'
+import Block from './Block'
 
-let IDX = 0;
 
 export default class FieldNumber extends React.Component {
   static propTypes = {
-    value: PropTypes.number,
-    default: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    onChange: PropTypes.func,
-    allowRange: PropTypes.bool,
-    rangeStep: PropTypes.number,
-    wdKey: PropTypes.string,
-    required: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    rangeStep: 1
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      uuid: IDX++,
-      editing: false,
-      value: props.value,
-      dirtyValue: props.value,
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (!state.editing && props.value !== state.value) {
-      return {
-        value: props.value,
-        dirtyValue: props.value,
-      };
-    }
-    return null;
-  }
-
-  changeValue(newValue) {
-    const value = (newValue === "" || newValue === undefined) ?
-      undefined :
-      parseFloat(newValue);
-
-    const hasChanged = this.props.value !== value;
-    if(this.isValid(value) && hasChanged) {
-      this.props.onChange(value)
-      this.setState({
-        value: newValue,
-      });
-    }
-    else if (!this.isValid(value) && hasChanged) {
-      this.setState({
-        value: undefined,
-      });
-    }
-
-    this.setState({
-      dirtyValue: newValue === "" ? undefined : newValue,
-    })
-  }
-
-  isValid(v) {
-    if (v === undefined) {
-      return true;
-    }
-
-    const value = parseFloat(v)
-    if(isNaN(value)) {
-      return false
-    }
-
-    if(!isNaN(this.props.min) && value < this.props.min) {
-      return false
-    }
-
-    if(!isNaN(this.props.max) && value > this.props.max) {
-      return false
-    }
-
-    return true
-  }
-
-  resetValue = () => {
-    this.setState({editing: false});
-    // Reset explicitly to default value if value has been cleared
-    if(this.state.value === "") {
-      return;
-    }
-
-    // If set value is invalid fall back to the last valid value from props or at last resort the default value
-    if (!this.isValid(this.state.value)) {
-      if(this.isValid(this.props.value)) {
-        this.changeValue(this.props.value)
-        this.setState({dirtyValue: this.props.value});
-      } else {
-        this.changeValue(undefined);
-        this.setState({dirtyValue: undefined});
-      }
-    }
-  }
-
-  onChangeRange = (e) => {
-    let value = parseFloat(e.target.value, 10);
-    const step = this.props.rangeStep;
-    let dirtyValue = value;
-
-    if(step) {
-      // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
-      const snap = value % step;
-
-      // Round up/down to step
-      if (this._keyboardEvent) {
-        // If it's keyboard event we might get a low positive/negative value,
-        // for example we might go from 13 to 13.23, however because we know
-        // that came from a keyboard event we always want to increase by a
-        // single step value.
-        if (value < this.state.dirtyValue) {
-          value = this.state.value - step;
-        }
-        else {
-          value = this.state.value + step
-        }
-        dirtyValue = value;
-      }
-      else {
-        if (snap < step/2) {
-          value = value - snap;
-        }
-        else {
-          value = value + (step - snap);
-        };
-      }
-    }
-
-    this._keyboardEvent = false;
-
-    // Clamp between min/max
-    value = Math.max(this.props.min, Math.min(this.props.max, value));
-
-    this.setState({value, dirtyValue});
-    this.props.onChange(value);
+    ...InputNumber.propTypes,
   }
 
   render() {
-    if(
-      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
-      this.props.min !== undefined && this.props.max !== undefined &&
-      this.props.allowRange
-    ) {
-      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-      const defaultValue = this.props.default === undefined ? "" : this.props.default;
-      let inputValue;
-      if (this.state.editingRange) {
-        inputValue = this.state.value;
-      }
-      else {
-        inputValue = value;
-      }
-
-      return <div className="maputnik-number-container">
-        <input
-          className="maputnik-number-range"
-          key="range"
-          type="range"
-          max={this.props.max}
-          min={this.props.min}
-          step="any"
-          spellCheck="false"
-          value={value === undefined ? defaultValue : value}
-          aria-hidden="true"
-          onChange={this.onChangeRange}
-          onKeyDown={() => {
-            this._keyboardEvent = true;
-          }}
-          onPointerDown={() => {
-            this.setState({editing: true, editingRange: true});
-          }}
-          onPointerUp={() => {
-            // Safari doesn't get onBlur event
-            this.setState({editing: false, editingRange: false});
-          }}
-          onBlur={() => {
-            this.setState({
-              editing: false,
-              editingRange: false,
-              dirtyValue: this.state.value,
-            });
-          }}
-        />
-        <input
-          key="text"
-          type="text"
-          spellCheck="false"
-          className="maputnik-number"
-          placeholder={this.props.default}
-          value={inputValue === undefined ? "" : inputValue}
-          onFocus={e => {
-            this.setState({editing: true});
-          }}
-          onChange={e => {
-            this.changeValue(e.target.value);
-          }}
-          onBlur={e => {
-            this.setState({editing: false});
-            this.resetValue()
-          }}
-        />
-      </div>
-    }
-    else {
-      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-
-      return <input
-        spellCheck="false"
-        className="maputnik-number"
-        placeholder={this.props.default}
-        value={value === undefined ? "" : value}
-        onChange={e => this.changeValue(e.target.value)}
-        onFocus={() => {
-          this.setState({editing: true});
-        }}
-        onBlur={this.resetValue}
-        required={this.props.required}
-      />
-    }
+    const {props} = this;
+    return <Block label={props.label}>
+      <InputNumber {...props} />
+    </Block>
   }
 }
 

src/components/FieldSelect.jsx

@@ -1,33 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Block from './Block'
+import InputSelect from './InputSelect'
+
 
 export default class FieldSelect extends React.Component {
   static propTypes = {
-    value: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string,
-    options: PropTypes.array.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    title: PropTypes.string,
+    ...InputSelect.propTypes,
   }
 
-
   render() {
-    let options = this.props.options
-    if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
-    }
+    const {props} = this;
 
-    return <select
-      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)}
-    >
-      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
-    </select>
+    return <Block label={props.label}>
+      <InputSelect {...props}/>
+    </Block>
   }
 }
 

src/components/FieldSource.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldSource extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceIds: PropTypes.array,
+    error: PropTypes.object,
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    sourceIds: [],
+  }
+
+  render() {
+    return <Block
+      label={"Source"}
+      fieldSpec={latest.layer.source}
+      error={this.props.error}
+      data-wd-key={this.props.wdKey}
+    >
+      <InputAutocomplete
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds.map(src => [src, src])}
+      />
+    </Block>
+  }
+}

src/components/FieldSourceLayer.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldSourceLayer extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    sourceLayerIds: PropTypes.array,
+    isFixed: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    sourceLayerIds: [],
+    isFixed: false
+  }
+
+  render() {
+    return <Block label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
+      data-wd-key="layer-source-layer"
+    >
+      <InputAutocomplete
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds.map(l => [l, l])}
+      />
+    </Block>
+  }
+}

src/components/FieldString.jsx

@@ -1,92 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Block from './Block'
+import InputString from './InputString'
 
 export default class FieldString extends React.Component {
   static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    spellCheck: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onInput: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      editing: false,
-      value: props.value || ''
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (!state.editing) {
-      return {
-        value: props.value
-      };
-    }
-    return {};
+    ...InputString.propTypes,
+    name: PropTypes.string,
   }
 
   render() {
-    let tag;
-    let classes;
+    const {props} = this;
 
-    if(!!this.props.multi) {
-      tag = "textarea"
-      classes = [
-        "maputnik-string",
-        "maputnik-string--multi"
-      ]
-    }
-    else {
-      tag = "input"
-      classes = [
-        "maputnik-string"
-      ]
-    }
-
-    if(!!this.props.disabled) {
-      classes.push("maputnik-string--disabled");
-    }
-
-    return React.createElement(tag, {
-      "data-wd-key": this.props["data-wd-key"],
-      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
-      disabled: this.props.disabled,
-      className: classes.join(" "),
-      style: this.props.style,
-      value: this.state.value === undefined ? "" : this.state.value,
-      placeholder: this.props.default,
-      onChange: e => {
-        this.setState({
-          editing: true,
-          value: e.target.value
-        }, () => {
-          this.props.onInput(this.state.value);
-        });
-      },
-      onBlur: () => {
-        if(this.state.value!==this.props.value) {
-          this.setState({editing: false});
-          this.props.onChange(this.state.value);
-        }
-      },
-      onKeyDown: (e) => {
-        if (e.keyCode === 13) {
-          this.props.onChange(this.state.value);
-        }
-      },
-      required: this.props.required,
-    });
+    return <Block label={props.label}>
+      <InputString {...props} />
+    </Block>
   }
 }
 

src/components/FieldType.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import InputSelect from './InputSelect'
+import InputString from './InputString'
+
+export default class FieldType extends React.Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    wdKey: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
+  }
+
+  render() {
+    return <Block label={"Type"} fieldSpec={latest.layer.type}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      {this.props.disabled &&
+        <InputString
+          value={this.props.value}
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <InputSelect
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
+    </Block>
+  }
+}

src/components/FieldUrl.jsx

@@ -1,100 +1,21 @@
 import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
-import FieldString from './FieldString'
-import SmallError from './SmallError'
+import InputUrl from './InputUrl'
+import Block from './Block'
 
 
-function validate (url) {
-  if (url === "") {
-    return;
-  }
-
-  let error;
-  const getProtocol = (url) => {
-    try {
-      const urlObj = new URL(url);
-      return urlObj.protocol;
-    }
-    catch (err) {
-      return undefined;
-    }
-  };
-  const protocol = getProtocol(url);
-  const isSsl = window.location.protocol === "https:";
-
-  if (!protocol) {
-    error = (
-      <SmallError>
-        Must provide protocol {
-          isSsl
-          ? <code>https://</code>
-          : <><code>http://</code> or <code>https://</code></>
-        }
-      </SmallError>
-    );
-  }
-  else if (
-    protocol &&
-    protocol === "http:" &&
-    window.location.protocol === "https:"
-  ) {
-    error = (
-      <SmallError>
-        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
-      </SmallError>
-    );
-  }
-
-  return error;
-}
-
 export default class FieldUrl extends React.Component {
   static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onInput: () => {},
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      error: validate(props.value)
-    };
-  }
-
-  onInput = (url) => {
-    this.setState({
-      error: validate(url)
-    });
-    this.props.onInput(url);
-  }
-
-  onChange = (url) => {
-    this.setState({
-      error: validate(url)
-    });
-    this.props.onChange(url);
+    ...InputUrl.propTypes,
   }
 
   render () {
+    const {props} = this;
+
     return (
-      <div>
-        <FieldString
-          {...this.props}
-          onInput={this.onInput}
-          onChange={this.onChange}
-        />
-        {this.state.error}
-      </div>
+      <Block label={this.props.label}>
+        <InputUrl {...props} />
+      </Block>
     );
   }
 }

src/components/Fieldset.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+
+
+let IDX = 0;
+
+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}>
+      {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/FilterEditor.jsx

@@ -4,11 +4,11 @@ import { combiningFilterOps } from '../libs/filterops.js'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 
 import {latest, validate, migrate} from '@mapbox/mapbox-gl-style-spec'
-import FieldSelect from './FieldSelect'
+import InputSelect from './InputSelect'
 import Block from './Block'
 import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
-import Button from './Button'
+import InputButton from './InputButton'
 import Doc from './Doc'
 import ExpressionProperty from './_ExpressionProperty';
 import {mdiFunctionVariant} from '@mdi/js';
@@ -191,7 +191,7 @@ export default class FilterEditor extends React.Component {
         <p>
           Nested filters are not supported.
         </p>
-        <Button
+        <InputButton
           onClick={this.makeExpression}
           title="Convert to expression"
         >
@@ -199,7 +199,7 @@ export default class FilterEditor extends React.Component {
             <path fill="currentColor" d={mdiFunctionVariant} />
           </svg>
           Upgrade to expression
-        </Button>
+        </InputButton>
       </div>
     }
     else if (displaySimpleFilter) {
@@ -209,7 +209,7 @@ export default class FilterEditor extends React.Component {
 
       const actions = (
         <div>
-          <Button
+          <InputButton
             onClick={this.makeExpression}
             title="Convert to expression"
             className="maputnik-make-zoom-function"
@@ -217,7 +217,7 @@ export default class FilterEditor extends React.Component {
             <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
               <path fill="currentColor" d={mdiFunctionVariant} />
             </svg>
-          </Button>
+          </InputButton>
         </div>
       );
 
@@ -249,7 +249,7 @@ export default class FilterEditor extends React.Component {
             label={"Filter"}
             action={actions}
           >
-            <FieldSelect
+            <InputSelect
               value={combiningOp}
               onChange={this.onFilterPartChanged.bind(this, 0)}
               options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
@@ -260,7 +260,7 @@ export default class FilterEditor extends React.Component {
             key="buttons"
             className="maputnik-filter-editor-add-wrapper"
           >
-            <Button
+            <InputButton
               data-wd-key="layer-filter-button"
               className="maputnik-add-filter"
               onClick={this.addFilterItem}
@@ -268,7 +268,7 @@ export default class FilterEditor extends React.Component {
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiTableRowPlusAfter} />
               </svg> Add filter
-            </Button>
+            </InputButton>
           </div>
           <div
             key="doc"

src/components/FilterEditorBlock.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Button from './Button'
+import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
 export default class FilterEditorBlock extends React.Component {
@@ -12,13 +12,13 @@ export default class FilterEditorBlock extends React.Component {
   render() {
     return <div className="maputnik-filter-editor-block">
       <div className="maputnik-filter-editor-block-action">
-        <Button
+        <InputButton
           className="maputnik-delete-filter"
           onClick={this.props.onDelete}
           title="Delete filter block"
         >
           <MdDelete />
-        </Button>
+        </InputButton>
       </div>
       <div className="maputnik-filter-editor-block-content">
         {this.props.children}

src/components/InputArray.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+
+export default class FieldArray extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    type: PropTypes.string,
+    length: PropTypes.number,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    value: [],
+    default: [],
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      value: this.props.value.slice(0),
+      // This is so we can compare changes in getDerivedStateFromProps
+      initialPropsValue: this.props.value.slice(0),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const value = [];
+    const initialPropsValue = state.initialPropsValue.slice(0);
+
+    Array(props.length).fill(null).map((_, i) => {
+      if (props.value[i] === state.initialPropsValue[i]) {
+        value[i] = state.value[i];
+      }
+      else {
+        value[i] = state.value[i];
+        initialPropsValue[i] = state.value[i];
+      }
+    })
+
+    return {
+      value,
+      initialPropsValue,
+    };
+  }
+
+  isComplete (value) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx, newValue) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value)) {
+        this.props.onChange(value);
+      }
+      else {
+        // Unset until complete
+        this.props.onChange(undefined);
+      }
+    });
+  }
+
+  render() {
+    const {value} = this.state;
+
+    const containsValues = (
+      value.length > 0 &&
+      !value.every(val => {
+        return (val === "" || val === undefined)
+      })
+    );
+
+    const inputs = Array(this.props.length).fill(null).map((_, i) => {
+      if(this.props.type === 'number') {
+        return <InputNumber
+          key={i}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      } else {
+        return <InputString
+          key={i}
+          default={containsValues ? undefined : this.props.default[i]}
+          value={value[i]}
+          required={containsValues ? true : false}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+    })
+
+    return (
+      <div className="maputnik-array">
+        {inputs}
+      </div>
+    )
+  }
+}
+

src/components/InputAutocomplete.jsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Autocomplete from 'react-autocomplete'
+
+
+const MAX_HEIGHT = 140;
+
+export default class InputAutocomplete extends React.Component {
+  static propTypes = {
+    value: PropTypes.string,
+    options: PropTypes.array,
+    onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool,
+    'aria-label': PropTypes.string,
+  }
+
+  state = {
+    maxHeight: MAX_HEIGHT
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    options: [],
+  }
+
+  calcMaxHeight() {
+    if(this.props.keepMenuWithinWindowBounds) {
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
+
+      if(limitedMaxHeight != this.state.maxHeight) {
+        this.setState({
+          maxHeight: limitedMaxHeight
+        })
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.calcMaxHeight();
+  }
+
+  componentDidUpdate() {
+    this.calcMaxHeight();
+  }
+
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
+  render() {
+    return <div
+      ref={(el) => {
+        this.autocompleteMenuEl = el;
+      }}
+    >
+      <Autocomplete
+        menuStyle={{
+          position: "fixed",
+          overflow: "auto",
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
+        }}
+        wrapperProps={{
+          className: "maputnik-autocomplete",
+          style: null
+        }}
+        inputProps={{
+          'aria-label': this.props['aria-label'],
+          className: "maputnik-string",
+          spellCheck: false
+        }}
+        value={this.props.value}
+        items={this.props.options}
+        getItemValue={(item) => item[0]}
+        onSelect={v => this.onChange(v)}
+        onChange={(e, v) => this.onChange(v)}
+        shouldItemRender={(item, value="") => {
+          if (typeof(value) === "string") {
+            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+          }
+        }}
+        renderItem={(item, isHighlighted) => (
+          <div
+            key={item[0]}
+            className={classnames({
+              "maputnik-autocomplete-menu-item": true,
+              "maputnik-autocomplete-menu-item-selected": isHighlighted,
+            })}
+          >
+           {item[1]}
+          </div>
+        )}
+      />
+    </div>
+  }
+}
+
+

src/components/InputButton.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-class Button extends React.Component {
+export default class InputButton extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
     "aria-label": PropTypes.string,
@@ -33,4 +33,3 @@ class Button extends React.Component {
   }
 }
 
-export default Button

src/components/InputCheckbox.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class InputCheckbox extends React.Component {
+  static propTypes = {
+    value: PropTypes.bool,
+    style: PropTypes.object,
+    onChange: PropTypes.func,
+  }
+
+  static defaultProps = {
+    value: false,
+  }
+
+  onChange = () => {
+    this.props.onChange(!this.props.value);
+  }
+
+  render() {
+    return <div className="maputnik-checkbox-wrapper">
+      <input
+        className="maputnik-checkbox"
+        type="checkbox"
+        style={this.props.style}
+        onChange={this.onChange}
+        onClick={this.onChange}
+        checked={this.props.value}
+      />
+      <div className="maputnik-checkbox-box">
+        <svg style={{
+            display: this.props.value ? 'inline' : 'none'
+          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
+          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
+        </svg>
+      </div>
+    </div>
+  }
+}
+

src/components/InputColor.jsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import Color from 'color'
+import ChromePicker from 'react-color/lib/components/chrome/Chrome'
+import PropTypes from 'prop-types'
+import lodash from 'lodash';
+
+function formatColor(color) {
+  const rgb = color.rgb
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
+}
+
+/*** Number fields with support for min, max and units and documentation*/
+export default class InputColor extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    name: PropTypes.string,
+    value: PropTypes.string,
+    doc: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    'aria-label': PropTypes.string,
+  }
+
+  state = {
+    pickerOpened: false
+  }
+
+  constructor () {
+    super();
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
+  }
+
+  onChangeNoCheck (v) {
+    this.props.onChange(v);
+  }
+
+  //TODO: I much rather would do this with absolute positioning
+  //but I am too stupid to get it to work together with fixed position
+  //and scrollbars so I have to fallback to JavaScript
+  calcPickerOffset = () => {
+    const elem = this.colorInput
+    if(elem) {
+      const pos = elem.getBoundingClientRect()
+      return {
+        top: pos.top,
+        left: pos.left + 196,
+      }
+    } else {
+      return {
+        top: 160,
+        left: 555,
+      }
+    }
+  }
+
+  togglePicker = () => {
+    this.setState({ pickerOpened: !this.state.pickerOpened })
+  }
+
+  get color() {
+    // Catch invalid color.
+    try {
+      return Color(this.props.value).rgb()
+    }
+    catch(err) {
+      console.warn("Error parsing color: ", err);
+      return Color("rgb(255,255,255)");
+    }
+  }
+
+  onChange (v) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
+  render() {
+    const offset = this.calcPickerOffset()
+    var currentColor = this.color.object()
+    currentColor = {
+      r: currentColor.r,
+      g: currentColor.g,
+      b: currentColor.b,
+      // Rename alpha -> a for ChromePicker
+      a: currentColor.alpha
+    }
+
+    const picker = <div
+      className="maputnik-color-picker-offset"
+      style={{
+	      position: 'fixed',
+	      zIndex: 1,
+        left: offset.left,
+        top: offset.top,
+      }}>
+      <ChromePicker
+        color={currentColor}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
+      />
+      <div
+        className="maputnik-color-picker-offset"
+        onClick={this.togglePicker}
+        style={{
+          zIndex: -1,
+          position: 'fixed',
+          top: '0px',
+          right: '0px',
+          bottom: '0px',
+          left: '0px',
+        }}
+      />
+    </div>
+
+    var swatchStyle = {
+      backgroundColor: this.props.value
+    };
+
+    return <div className="maputnik-color-wrapper">
+      {this.state.pickerOpened && picker}
+      <div className="maputnik-color-swatch" style={swatchStyle}></div>
+      <input
+        aria-label={this.props['aria-label']}
+        spellCheck="false"
+        autoComplete="off"
+        className="maputnik-color"
+        ref={(input) => this.colorInput = input}
+        onClick={this.togglePicker}
+        style={this.props.style}
+        name={this.props.name}
+        placeholder={this.props.default}
+        value={this.props.value ? this.props.value : ""}
+        onChange={(e) => this.onChange(e.target.value)}
+      />
+    </div>
+  }
+}
+

src/components/InputDynamicArray.jsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+import InputButton from './InputButton'
+import {MdDelete} from 'react-icons/md'
+import FieldDocLabel from './FieldDocLabel'
+import InputEnum from './InputEnum'
+import capitalize from 'lodash.capitalize'
+import InputUrl from './InputUrl'
+
+
+export default class FieldDynamicArray extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    type: PropTypes.string,
+    default: PropTypes.array,
+    onChange: PropTypes.func,
+    style: PropTypes.object,
+    fieldSpec: PropTypes.object,
+    'aria-label': PropTypes.string,
+  }
+
+  changeValue(idx, newValue) {
+    const values = this.values.slice(0)
+    values[idx] = newValue
+    this.props.onChange(values)
+  }
+
+  get values() {
+    return this.props.value || this.props.default || []
+  }
+
+  addValue = () => {
+    const values = this.values.slice(0)
+    if (this.props.type === 'number') {
+      values.push(0)
+    }
+    else if (this.props.type === 'url') {
+      values.push("");
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec.values)[0];
+      values.push(defaultValue);
+    } else {
+      values.push("")
+    }
+
+    this.props.onChange(values)
+  }
+
+  deleteValue(valueIdx) {
+    const values = this.values.slice(0)
+    values.splice(valueIdx, 1)
+
+    this.props.onChange(values)
+  }
+
+  render() {
+    const inputs = this.values.map((v, i) => {
+      const deleteValueBtn= <DeleteValueInputButton onClick={this.deleteValue.bind(this, i)} />
+      let input;
+      if(this.props.type === 'url') {
+        input = <InputUrl
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'number') {
+        input = <InputNumber
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
+        input = <InputEnum
+          options={options}
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else {
+        input = <InputString
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+
+      return <div
+        style={this.props.style}
+        key={i}
+        className="maputnik-array-block"
+        >
+        <div className="maputnik-array-block-action">
+          {deleteValueBtn}
+        </div>
+        <div className="maputnik-array-block-content">
+          {input}
+        </div>
+      </div>
+    })
+
+    return (
+      <div className="maputnik-array">
+        {inputs}
+        <InputButton
+          className="maputnik-array-add-value"
+          onClick={this.addValue}
+        >
+          Add value
+        </InputButton>
+      </div>
+    );
+  }
+}
+
+class DeleteValueInputButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <InputButton
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+      title="Remove array item"
+    >
+      <FieldDocLabel
+        label={<MdDelete />}
+        doc={"Remove array item."}
+      />
+    </InputButton>
+  }
+}
+

src/components/InputEnum.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputSelect from './InputSelect'
+import InputMultiInput from './InputMultiInput'
+
+
+function optionsLabelLength(options) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
+
+export default class InputEnum extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+    'aria-label': PropTypes.string,
+  }
+
+  render() {
+    const {options, value, onChange, name, label} = this.props;
+
+    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+      return <InputMultiInput
+        name={name}
+        options={options}
+        value={value || this.props.default}
+        onChange={onChange}
+        aria-label={this.props['aria-label'] || label}
+      />
+    } else {
+      return <InputSelect
+        options={options}
+        value={value || this.props.default}
+        onChange={onChange}
+        aria-label={this.props['aria-label'] || label}
+      />
+    }
+  }
+}
+

src/components/InputFont.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import InputAutocomplete from './InputAutocomplete'
+
+export default class FieldFont extends React.Component {
+  static propTypes = {
+    value: PropTypes.array,
+    default: PropTypes.array,
+    fonts: PropTypes.array,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    fonts: []
+  }
+
+  get values() {
+    const out = this.props.value || this.props.default || [];
+
+    // Always put a "" in the last field to you can keep adding entries
+    if (out[out.length-1] !== ""){
+      return out.concat("");
+    }
+    else {
+      return out;
+    }
+  }
+
+  changeFont(idx, newValue) {
+    const changedValues = this.values.slice(0)
+    changedValues[idx] = newValue
+    const filteredValues = changedValues
+      .filter(v => v !== undefined)
+      .filter(v => v !== "")
+
+    this.props.onChange(filteredValues);
+  }
+
+  render() {
+    const inputs = this.values.map((value, i) => {
+      return <li
+        key={i}
+      >
+        <InputAutocomplete
+          aria-label={this.props['aria-label'] || this.props.name}
+          value={value}
+          options={this.props.fonts.map(f => [f, f])}
+          onChange={this.changeFont.bind(this, i)}
+        />
+      </li>
+    })
+
+    return (
+      <ul className="maputnik-font">
+        {inputs}
+      </ul>
+    );
+  }
+}

src/components/InputJson.jsx

@@ -16,7 +16,7 @@ import stringifyPretty from 'json-stringify-pretty-compact'
 import '../util/codemirror-mgl';
 
 
-export default class FieldJsonEditor extends React.Component {
+export default class InputJson extends React.Component {
   static propTypes = {
     layer: PropTypes.any.isRequired,
     maxHeight: PropTypes.number,
@@ -172,4 +172,3 @@ export default class FieldJsonEditor extends React.Component {
     </div>
   }
 }
-

src/components/InputMultiInput.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import InputButton from './InputButton'
+
+export default class InputMultiInput extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    options: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
+
+    const selectedValue = this.props.value || options[0][0]
+    const radios = options.map(([val, label])=> {
+      return <label
+        key={val}
+        className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
+      >
+        <input type="radio"
+          name={this.props.name}
+          onChange={e => this.props.onChange(val)}
+          value={val}
+          checked={val === selectedValue}
+        />
+        {label}
+      </label>
+    })
+
+    return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
+      {radios}
+    </fieldset>
+  }
+}
+
+

src/components/InputNumber.jsx

@@ -0,0 +1,234 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+let IDX = 0;
+
+export default class InputNumber extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    default: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    onChange: PropTypes.func,
+    allowRange: PropTypes.bool,
+    rangeStep: PropTypes.number,
+    wdKey: PropTypes.string,
+    required: PropTypes.bool,
+    "aria-label": PropTypes.string,
+  }
+
+  static defaultProps = {
+    rangeStep: 1
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      uuid: IDX++,
+      editing: false,
+      value: props.value,
+      dirtyValue: props.value,
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing && props.value !== state.value) {
+      return {
+        value: props.value,
+        dirtyValue: props.value,
+      };
+    }
+    return null;
+  }
+
+  changeValue(newValue) {
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined :
+      parseFloat(newValue);
+
+    const hasChanged = this.props.value !== value;
+    if(this.isValid(value) && hasChanged) {
+      this.props.onChange(value)
+      this.setState({
+        value: newValue,
+      });
+    }
+    else if (!this.isValid(value) && hasChanged) {
+      this.setState({
+        value: undefined,
+      });
+    }
+
+    this.setState({
+      dirtyValue: newValue === "" ? undefined : newValue,
+    })
+  }
+
+  isValid(v) {
+    if (v === undefined) {
+      return true;
+    }
+
+    const value = parseFloat(v)
+    if(isNaN(value)) {
+      return false
+    }
+
+    if(!isNaN(this.props.min) && value < this.props.min) {
+      return false
+    }
+
+    if(!isNaN(this.props.max) && value > this.props.max) {
+      return false
+    }
+
+    return true
+  }
+
+  resetValue = () => {
+    this.setState({editing: false});
+    // Reset explicitly to default value if value has been cleared
+    if(this.state.value === "") {
+      return;
+    }
+
+    // If set value is invalid fall back to the last valid value from props or at last resort the default value
+    if (!this.isValid(this.state.value)) {
+      if(this.isValid(this.props.value)) {
+        this.changeValue(this.props.value)
+        this.setState({dirtyValue: this.props.value});
+      } else {
+        this.changeValue(undefined);
+        this.setState({dirtyValue: undefined});
+      }
+    }
+  }
+
+  onChangeRange = (e) => {
+    let value = parseFloat(e.target.value, 10);
+    const step = this.props.rangeStep;
+    let dirtyValue = value;
+
+    if(step) {
+      // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
+      const snap = value % step;
+
+      // Round up/down to step
+      if (this._keyboardEvent) {
+        // If it's keyboard event we might get a low positive/negative value,
+        // for example we might go from 13 to 13.23, however because we know
+        // that came from a keyboard event we always want to increase by a
+        // single step value.
+        if (value < this.state.dirtyValue) {
+          value = this.state.value - step;
+        }
+        else {
+          value = this.state.value + step
+        }
+        dirtyValue = value;
+      }
+      else {
+        if (snap < step/2) {
+          value = value - snap;
+        }
+        else {
+          value = value + (step - snap);
+        };
+      }
+    }
+
+    this._keyboardEvent = false;
+
+    // Clamp between min/max
+    value = Math.max(this.props.min, Math.min(this.props.max, value));
+
+    this.setState({value, dirtyValue});
+    this.props.onChange(value);
+  }
+
+  render() {
+    if(
+      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
+      this.props.min !== undefined && this.props.max !== undefined &&
+      this.props.allowRange
+    ) {
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
+      const defaultValue = this.props.default === undefined ? "" : this.props.default;
+      let inputValue;
+      if (this.state.editingRange) {
+        inputValue = this.state.value;
+      }
+      else {
+        inputValue = value;
+      }
+
+      return <div className="maputnik-number-container">
+        <input
+          className="maputnik-number-range"
+          key="range"
+          type="range"
+          max={this.props.max}
+          min={this.props.min}
+          step="any"
+          spellCheck="false"
+          value={value === undefined ? defaultValue : value}
+          onChange={this.onChangeRange}
+          onKeyDown={() => {
+            this._keyboardEvent = true;
+          }}
+          onPointerDown={() => {
+            this.setState({editing: true, editingRange: true});
+          }}
+          onPointerUp={() => {
+            // Safari doesn't get onBlur event
+            this.setState({editing: false, editingRange: false});
+          }}
+          onBlur={() => {
+            this.setState({
+              editing: false,
+              editingRange: false,
+              dirtyValue: this.state.value,
+            });
+          }}
+        />
+        <input
+          key="text"
+          type="text"
+          spellCheck="false"
+          className="maputnik-number"
+          placeholder={this.props.default}
+          value={inputValue === undefined ? "" : inputValue}
+          onFocus={e => {
+            this.setState({editing: true});
+          }}
+          onChange={e => {
+            this.changeValue(e.target.value);
+          }}
+          onBlur={e => {
+            this.setState({editing: false});
+            this.resetValue()
+          }}
+        />
+      </div>
+    }
+    else {
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
+
+      return <input
+        aria-label={this.props['aria-label']}
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default}
+        value={value === undefined ? "" : value}
+        onChange={e => this.changeValue(e.target.value)}
+        onFocus={() => {
+          this.setState({editing: true});
+        }}
+        onBlur={this.resetValue}
+        required={this.props.required}
+      />
+    }
+  }
+}
+
+

src/components/InputSelect.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class InputSelect extends React.Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    "data-wd-key": PropTypes.string,
+    options: PropTypes.array.isRequired,
+    style: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
+    'aria-label': PropTypes.string,
+  }
+
+
+  render() {
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
+
+    return <select
+      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)}
+      aria-label={this.props['aria-label']}
+    >
+      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
+    </select>
+  }
+}
+
+

src/components/InputSpec.jsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import InputColor from './InputColor'
+import InputNumber from './InputNumber'
+import InputCheckbox from './InputCheckbox'
+import InputString from './InputString'
+import InputSelect from './InputSelect'
+import InputMultiInput from './InputMultiInput'
+import InputArray from './InputArray'
+import InputDynamicArray from './InputDynamicArray'
+import InputFont from './InputFont'
+import InputAutocomplete from './InputAutocomplete'
+import InputEnum from './InputEnum'
+import capitalize from 'lodash.capitalize'
+
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+
+function labelFromFieldName(fieldName) {
+  let label = fieldName.split('-').slice(1).join(' ')
+  if(label.length > 0) {
+    label = label.charAt(0).toUpperCase() + label.slice(1);
+  }
+  return label
+}
+
+function optionsLabelLength(options) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
+/** Display any field from the Mapbox GL style spec and
+ * choose the correct field component based on the @{fieldSpec}
+ * to display @{value}. */
+export default class SpecField extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    fieldName: PropTypes.string.isRequired,
+    fieldSpec: PropTypes.object.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.array,
+      PropTypes.bool
+    ]),
+    /** Override the style of the field */
+    style: PropTypes.object,
+    'aria-label': PropTypes.string,
+  }
+
+  render() {
+    const commonProps = {
+      error: this.props.error,
+      fieldSpec: this.props.fieldSpec,
+      label: this.props.label,
+      action: this.props.action,
+      style: this.props.style,
+      value: this.props.value,
+      default: this.props.fieldSpec.default,
+      name: this.props.fieldName,
+      onChange: newValue => this.props.onChange(this.props.fieldName, newValue),
+      'aria-label': this.props['aria-label'],
+    }
+
+    function childNodes() {
+      switch(this.props.fieldSpec.type) {
+        case 'number': return (
+          <InputNumber
+            {...commonProps}
+            min={this.props.fieldSpec.minimum}
+            max={this.props.fieldSpec.maximum}
+          />
+        )
+        case 'enum':
+          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
+
+          return <InputEnum
+            {...commonProps}
+            options={options}
+          />
+        case 'resolvedImage':
+        case 'formatted':
+        case 'string':
+          if (iconProperties.indexOf(this.props.fieldName) >= 0) {
+            const options = this.props.fieldSpec.values || [];
+            return <InputAutocomplete
+              {...commonProps}
+              options={options.map(f => [f, f])}
+            />
+          } else {
+            return <InputString
+              {...commonProps}
+            />
+          }
+        case 'color': return (
+          <InputColor
+            {...commonProps}
+          />
+        )
+        case 'boolean': return (
+          <InputCheckbox
+            {...commonProps}
+          />
+        )
+        case 'array':
+          if(this.props.fieldName === 'text-font') {
+            return <InputFont
+              {...commonProps}
+              fonts={this.props.fieldSpec.values}
+            />
+          } else {
+            if (this.props.fieldSpec.length) {
+              return <InputArray
+                {...commonProps}
+                type={this.props.fieldSpec.value}
+                length={this.props.fieldSpec.length}
+              />
+            } else {
+              return <InputDynamicArray
+                {...commonProps}
+                fieldSpec={this.props.fieldSpec}
+                type={this.props.fieldSpec.value}
+              />
+            }
+          }
+        default: return null
+      }
+    }
+
+    return (
+      <div data-wd-key={"spec-field:"+this.props.fieldName}>
+        {childNodes.call(this)}
+      </div>
+    );
+  }
+}

src/components/InputString.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class InputString extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      editing: false,
+      value: props.value || ''
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
+    }
+    return {};
+  }
+
+  render() {
+    let tag;
+    let classes;
+
+    if(!!this.props.multi) {
+      tag = "textarea"
+      classes = [
+        "maputnik-string",
+        "maputnik-string--multi"
+      ]
+    }
+    else {
+      tag = "input"
+      classes = [
+        "maputnik-string"
+      ]
+    }
+
+    if(!!this.props.disabled) {
+      classes.push("maputnik-string--disabled");
+    }
+
+    return React.createElement(tag, {
+      "aria-label": this.props["aria-label"],
+      "data-wd-key": this.props["data-wd-key"],
+      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
+      disabled: this.props.disabled,
+      className: classes.join(" "),
+      style: this.props.style,
+      value: this.state.value === undefined ? "" : this.state.value,
+      placeholder: this.props.default,
+      onChange: e => {
+        this.setState({
+          editing: true,
+          value: e.target.value
+        }, () => {
+          this.props.onInput(this.state.value);
+        });
+      },
+      onBlur: () => {
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          this.props.onChange(this.state.value);
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.keyCode === 13) {
+          this.props.onChange(this.state.value);
+        }
+      },
+      required: this.props.required,
+    });
+  }
+}
+
+

src/components/InputUrl.jsx

@@ -0,0 +1,103 @@
+import React, {Fragment} from 'react'
+import PropTypes from 'prop-types'
+import InputString from './InputString'
+import SmallError from './SmallError'
+
+
+function validate (url) {
+  if (url === "") {
+    return;
+  }
+
+  let error;
+  const getProtocol = (url) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.protocol;
+    }
+    catch (err) {
+      return undefined;
+    }
+  };
+  const protocol = getProtocol(url);
+  const isSsl = window.location.protocol === "https:";
+
+  if (!protocol) {
+    error = (
+      <SmallError>
+        Must provide protocol {
+          isSsl
+          ? <code>https://</code>
+          : <><code>http://</code> or <code>https://</code></>
+        }
+      </SmallError>
+    );
+  }
+  else if (
+    protocol &&
+    protocol === "http:" &&
+    window.location.protocol === "https:"
+  ) {
+    error = (
+      <SmallError>
+        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+      </SmallError>
+    );
+  }
+
+  return error;
+}
+
+export default class FieldUrl extends React.Component {
+  static propTypes = {
+    "data-wd-key": PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+    default: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+    multi: PropTypes.bool,
+    required: PropTypes.bool,
+    'aria-label': PropTypes.string,
+  }
+
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
+  }
+
+  onInput = (url) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onInput(url);
+  }
+
+  onChange = (url) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onChange(url);
+  }
+
+  render () {
+    return (
+      <div>
+        <InputString
+          {...this.props}
+          onInput={this.onInput}
+          onChange={this.onChange}
+          aria-label={this.props['aria-label']}
+        />
+        {this.state.error}
+      </div>
+    );
+  }
+}
+

src/components/LayerEditor.jsx

@@ -2,17 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 
-import FieldJsonEditor from './FieldJsonEditor'
+import FieldJson from './FieldJson'
 import FilterEditor from './FilterEditor'
 import PropertyGroup from './PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
-import BlockType from './BlockType'
-import BlockId from './BlockId'
-import BlockMinZoom from './BlockMinZoom'
-import BlockMaxZoom from './BlockMaxZoom'
-import BlockComment from './BlockComment'
-import BlockSource from './BlockSource'
-import BlockSourceLayer from './BlockSourceLayer'
+import FieldType from './FieldType'
+import FieldId from './FieldId'
+import FieldMinZoom from './FieldMinZoom'
+import FieldMaxZoom from './FieldMaxZoom'
+import FieldComment from './FieldComment'
+import FieldSource from './FieldSource'
+import FieldSourceLayer from './FieldSourceLayer'
 import {Accordion} from 'react-accessible-accordion';
 
 import {MdMoreVert} from 'react-icons/md'
@@ -152,13 +152,13 @@ export default class LayerEditor extends React.Component {
 
     switch(type) {
       case 'layer': return <div>
-        <BlockId
+        <FieldId
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
           error={errorData.id}
           onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
-        <BlockType
+        <FieldType
           disabled={true}
           error={errorData.type}
           value={this.props.layer.type}
@@ -167,7 +167,7 @@ export default class LayerEditor extends React.Component {
             changeType(this.props.layer, newType)
           )}
         />
-        {this.props.layer.type !== 'background' && <BlockSource
+        {this.props.layer.type !== 'background' && <FieldSource
           error={errorData.source}
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
@@ -175,24 +175,24 @@ export default class LayerEditor extends React.Component {
         />
         }
         {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
-        <BlockSourceLayer
+        <FieldSourceLayer
           error={errorData['source-layer']}
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
-        <BlockMinZoom
+        <FieldMinZoom
           error={errorData.minzoom}
           value={this.props.layer.minzoom}
           onChange={v => this.changeProperty(null, 'minzoom', v)}
         />
-        <BlockMaxZoom
+        <FieldMaxZoom
           error={errorData.maxzoom}
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
-        <BlockComment
+        <FieldComment
           error={errorData.comment}
           value={comment}
           onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
@@ -208,14 +208,16 @@ export default class LayerEditor extends React.Component {
           />
         </div>
       </div>
-      case 'properties': return <PropertyGroup
+      case 'properties':
+        return <PropertyGroup
           errors={errorData}
           layer={this.props.layer}
           groupFields={fields}
           spec={this.props.spec}
           onChange={this.changeProperty.bind(this)}
         />
-      case 'jsoneditor': return <FieldJsonEditor
+      case 'jsoneditor':
+        return <FieldJson
           layer={this.props.layer}
           onChange={(layer) => {
             this.props.onLayerChanged(
@@ -288,7 +290,7 @@ export default class LayerEditor extends React.Component {
       items[id].handler();
     }
 
-    return <div className="maputnik-layer-editor"
+    return <section className="maputnik-layer-editor"
       role="main"
       aria-label="Layer editor"
     >
@@ -330,6 +332,6 @@ export default class LayerEditor extends React.Component {
       >
         {groups}
       </Accordion>
-    </div>
+    </section>
   }
 }

src/components/LayerList.jsx

@@ -248,6 +248,7 @@ class LayerListContainer extends React.Component {
           })}
           index={idx}
           key={layer.key}
+          id={layer.key}
           layerId={layer.id}
           layerIndex={idx}
           layerType={layer.type}
@@ -264,7 +265,7 @@ class LayerListContainer extends React.Component {
       })
     })
 
-    return <div
+    return <section
       className="maputnik-layer-list"
       role="complementary"
       aria-label="Layers list"
@@ -302,13 +303,15 @@ class LayerListContainer extends React.Component {
           </div>
         </div>
       </header>
-      <ul className="maputnik-layer-list-container"
+      <div
         role="navigation"
         aria-label="Layers list"
       >
+        <ul className="maputnik-layer-list-container">
           {listItems}
         </ul>
       </div>
+    </section>
   }
 }
 

src/components/LayerListItem.jsx

@@ -100,6 +100,7 @@ class LayerListItem extends React.Component {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
     return <li
+      id={this.props.id}
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}

src/components/MapMapboxGl.jsx

@@ -247,3 +247,4 @@ export default class MapMapboxGl extends React.Component {
     }
   }
 }
+

src/components/Modal.jsx

@@ -32,17 +32,12 @@ export default class Modal extends React.Component {
     });
   }
 
-  getApplicationNode() {
-    return document.getElementById('app');
-  }
-
   render() {
     if(this.props.isOpen) {
       return <AriaModal
         titleText={this.props.title}
         underlayClickExits={this.props.underlayClickExits}
         underlayProps={this.props.underlayProps}
-        getApplicationNode={this.getApplicationNode}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
         onExit={this.onClose}

src/components/ModalAdd.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from './Button'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
-import BlockType from './BlockType'
-import BlockId from './BlockId'
-import BlockSource from './BlockSource'
-import BlockSourceLayer from './BlockSourceLayer'
+import FieldType from './FieldType'
+import FieldId from './FieldId'
+import FieldSource from './FieldSource'
+import FieldSourceLayer from './FieldSourceLayer'
 
 export default class ModalAdd extends React.Component {
   static propTypes = {
@@ -129,20 +130,22 @@ export default class ModalAdd extends React.Component {
       className="maputnik-add-modal"
     >
       <div className="maputnik-add-layer">
-      <BlockId
+      <FieldId
+        label="ID"
+        fieldSpec={latest.layer.id}
         value={this.state.id}
         wdKey="add-layer.layer-id"
         onChange={v => {
           this.setState({ id: v })
         }}
       />
-      <BlockType
+      <FieldType
         value={this.state.type}
         wdKey="add-layer.layer-type"
         onChange={v => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
-      <BlockSource
+      <FieldSource
         sourceIds={sources}
         wdKey="add-layer.layer-source-block"
         value={this.state.source}
@@ -150,20 +153,20 @@ export default class ModalAdd extends React.Component {
       />
       }
       {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
-      <BlockSourceLayer
+      <FieldSourceLayer
         isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button
+      <InputButton
         className="maputnik-add-layer-button"
         onClick={this.addLayer}
         data-wd-key="add-layer"
       >
         Add Layer
-      </Button>
+      </InputButton>
       </div>
     </Modal>
   }

src/components/ModalDebug.jsx

@@ -29,8 +29,8 @@ export default class ModalDebug extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Debug'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
-        <h4>Options</h4>
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <h1>Options</h1>
         {this.props.renderer === 'mbgljs' &&
           <ul>
             {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
@@ -53,9 +53,9 @@ export default class ModalDebug extends React.Component {
             })}
           </ul>
         }
-      </div>
-      <div className="maputnik-modal-section">
-        <h4>Links</h4>
+      </section>
+      <section className="maputnik-modal-section">
+        <h1>Links</h1>
         <p>
           <a
             target="_blank"
@@ -65,7 +65,7 @@ export default class ModalDebug extends React.Component {
             Open in OSM
           </a> &mdash; Opens the current view on openstreetmap.org
         </p>
-      </div>
+      </section>
     </Modal>
   }
 }

src/components/ModalExport.jsx

@@ -4,10 +4,9 @@ import Slugify from 'slugify'
 import { saveAs } from 'file-saver'
 
 import {format} from '@mapbox/mapbox-gl-style-spec'
-import Block from './Block'
 import FieldString from './FieldString'
 import FieldCheckbox from './FieldCheckbox'
-import Button from './Button'
+import InputButton from './InputButton'
 import Modal from './Modal'
 import {MdFileDownload} from 'react-icons/md'
 import style from '../libs/style'
@@ -68,50 +67,41 @@ export default class ModalExport extends React.Component {
       className="maputnik-export-modal"
     >
 
-      <div className="maputnik-modal-section">
-        <h4>Download Style</h4>
+      <section className="maputnik-modal-section">
+        <h1>Download Style</h1>
         <p>
           Download a JSON style to your computer.
         </p>
 
         <div>
-          <Block
+          <FieldString
             label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-          >
-            <FieldString
             value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
           />
-          </Block>
-          <Block
+          <FieldString
             label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
-          >
-            <FieldString
             value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
           />
-          </Block>
-          <Block
+          <FieldString
             label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
-          >
-            <FieldString
             value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
           />
-          </Block>
         </div>
 
-        <Button
+        <InputButton
           onClick={this.downloadStyle.bind(this)}
           title="Download style"
         >
           <MdFileDownload />
           Download
-        </Button>
-      </div>
+        </InputButton>
+      </section>
 
     </Modal>
   }

src/components/ModalLoading.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from './Button'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
 
@@ -34,9 +34,9 @@ export default class ModalLoading extends React.Component {
         {this.props.message}
       </p>
       <p className="maputnik-dialog__buttons">
-        <Button onClick={(e) => this.props.onCancel(e)}>
+        <InputButton onClick={(e) => this.props.onCancel(e)}>
           Cancel
-        </Button>
+        </InputButton>
       </p>
     </Modal>
   }

src/components/ModalOpen.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ModalLoading from './ModalLoading'
 import Modal from './Modal'
-import Button from './Button'
+import InputButton from './InputButton'
 import FileReaderInput from 'react-file-reader-input'
-import FieldUrl from './FieldUrl'
+import InputUrl from './InputUrl'
 
 import {MdFileUpload} from 'react-icons/md'
 import {MdAddCircleOutline} from 'react-icons/md'
@@ -22,23 +22,23 @@ class PublicStyle extends React.Component {
 
   render() {
     return <div className="maputnik-public-style">
-      <Button
+      <InputButton
         className="maputnik-public-style-button"
         aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
-        <header className="maputnik-public-style-header">
-          <h4>{this.props.title}</h4>
+        <div className="maputnik-public-style-header">
+          <div>{this.props.title}</div>
           <span className="maputnik-space" />
           <MdAddCircleOutline />
-        </header>
+        </div>
         <div
           className="maputnik-public-style-thumbnail"
           style={{
             backgroundImage: `url(${this.props.thumbnailUrl})`
           }}
         ></div>
-      </Button>
+      </InputButton>
     </div>
   }
 }
@@ -198,20 +198,21 @@ export default class ModalOpen extends React.Component {
         >
           {errorElement}
           <section className="maputnik-modal-section">
-            <h2>Upload Style</h2>
+            <h1>Upload Style</h1>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1" aria-label="Style file">
+              <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
 
           <section className="maputnik-modal-section">
-            <h2>Load from URL</h2>
+            <form onSubmit={this.onSubmitUrl}>
+              <h1>Load from URL</h1>
               <p>
                 Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
               </p>
-            <form onSubmit={this.onSubmitUrl}>
-              <FieldUrl
+              <InputUrl
+                aria-label="Style URL"
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
@@ -221,18 +222,18 @@ export default class ModalOpen extends React.Component {
                 onChange={this.onChangeUrl}
               />
               <div>
-                <Button
+                <InputButton
                   data-wd-key="modal:open.url.button"
                   type="submit"
                   className="maputnik-big-button"
                   disabled={this.state.styleUrl.length < 1}
-                >Load from URL</Button>
+                >Load from URL</InputButton>
               </div>
             </form>
           </section>
 
           <section className="maputnik-modal-section maputnik-modal-section--shrink">
-            <h2>Gallery Styles</h2>
+            <h1>Gallery Styles</h1>
             <p>
               Open one of the publicly available styles to start from.
             </p>

src/components/ModalSettings.jsx

@@ -87,169 +87,158 @@ export default class ModalSettings extends React.Component {
       title={'Style Settings'}
     >
       <div className="modal:settings">
-      <Block label={"Name"} fieldSpec={latest.$root.name}>
         <FieldString {...inputProps}
+          label={"Name"}
+          fieldSpec={latest.$root.name}
           data-wd-key="modal:settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
-      </Block>
-      <Block label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}>
         <FieldString {...inputProps}
+          label={"Owner"}
+          fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
           data-wd-key="modal:settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
-      </Block>
-      <Block label={"Sprite URL"} fieldSpec={latest.$root.sprite}>
         <FieldUrl {...inputProps}
+          fieldSpec={latest.$root.sprite}
+          label="Sprite URL"
           data-wd-key="modal:settings.sprite" 
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
-      </Block>
 
-      <Block label={"Glyphs URL"} fieldSpec={latest.$root.glyphs}>
         <FieldUrl {...inputProps}
+          label="Glyphs URL"
+          fieldSpec={latest.$root.glyphs}
           data-wd-key="modal:settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
-      </Block>
 
-      <Block
+        <FieldString {...inputProps}
           label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
           fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-      >
-        <FieldString {...inputProps}
           data-wd-key="modal:settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
-      </Block>
 
-      <Block
+        <FieldString {...inputProps}
           label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
           fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
-      >
-        <FieldString {...inputProps}
           data-wd-key="modal:settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
-      </Block>
 
-      <Block
+        <FieldString {...inputProps}
           label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
           fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
-      >
-        <FieldString {...inputProps}
           data-wd-key="modal:settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
-      </Block>
 
-      <Block label={"Center"} fieldSpec={latest.$root.center}>
         <FieldArray
+          label={"Center"}
+          fieldSpec={latest.$root.center}
           length={2}
           type="number"
           value={mapStyle.center}
           default={latest.$root.center.default || [0, 0]}
           onChange={this.changeStyleProperty.bind(this, "center")}
         />
-      </Block>
 
-      <Block label={"Zoom"} fieldSpec={latest.$root.zoom}>
         <FieldNumber
           {...inputProps}
+          label={"Zoom"}
+          fieldSpec={latest.$root.zoom}
           value={mapStyle.zoom}
           default={latest.$root.zoom.default || 0}
           onChange={this.changeStyleProperty.bind(this, "zoom")}
         />
-      </Block>
 
-      <Block label={"Bearing"} fieldSpec={latest.$root.bearing}>
         <FieldNumber
           {...inputProps}
+          label={"Bearing"}
+          fieldSpec={latest.$root.bearing}
           value={mapStyle.bearing}
           default={latest.$root.bearing.default}
           onChange={this.changeStyleProperty.bind(this, "bearing")}
         />
-      </Block>
 
-      <Block label={"Pitch"} fieldSpec={latest.$root.pitch}>
         <FieldNumber
           {...inputProps}
+          label={"Pitch"}
+          fieldSpec={latest.$root.pitch}
           value={mapStyle.pitch}
           default={latest.$root.pitch.default}
           onChange={this.changeStyleProperty.bind(this, "pitch")}
         />
-      </Block>
 
-      <Block label={"Light anchor"} fieldSpec={latest.light.anchor}>
         <FieldEnum
           {...inputProps}
+          label={"Light anchor"}
+          fieldSpec={latest.light.anchor}
           name="light-anchor"
           value={light.anchor}
           options={Object.keys(latest.light.anchor.values)}
           default={latest.light.anchor.default}
           onChange={this.changeLightProperty.bind(this, "anchor")}
         />
-      </Block>
 
-      <Block label={"Light color"} fieldSpec={latest.light.color}>
         <FieldColor
           {...inputProps}
+          label={"Light color"}
+          fieldSpec={latest.light.color}
           value={light.color}
           default={latest.light.color.default}
           onChange={this.changeLightProperty.bind(this, "color")}
         />
-      </Block>
 
-      <Block label={"Light intensity"} fieldSpec={latest.light.intensity}>
         <FieldNumber
           {...inputProps}
+          label={"Light intensity"}
+          fieldSpec={latest.light.intensity}
           value={light.intensity}
           default={latest.light.intensity.default}
           onChange={this.changeLightProperty.bind(this, "intensity")}
         />
-      </Block>
 
-      <Block label={"Light position"} fieldSpec={latest.light.position}>
         <FieldArray
           {...inputProps}
+          label={"Light position"}
+          fieldSpec={latest.light.position}
           type="number"
           length={latest.light.position.length}
           value={light.position}
           default={latest.light.position.default}
           onChange={this.changeLightProperty.bind(this, "position")}
         />
-      </Block>
 
-      <Block label={"Transition delay"} fieldSpec={latest.transition.delay}>
         <FieldNumber
           {...inputProps}
+          label={"Transition delay"}
+          fieldSpec={latest.transition.delay}
           value={transition.delay}
           default={latest.transition.delay.default}
           onChange={this.changeTransitionProperty.bind(this, "delay")}
         />
-      </Block>
 
-      <Block label={"Transition duration"} fieldSpec={latest.transition.duration}>
         <FieldNumber
           {...inputProps}
+          label={"Transition duration"}
+          fieldSpec={latest.transition.duration}
           value={transition.duration}
           default={latest.transition.duration.default}
           onChange={this.changeTransitionProperty.bind(this, "duration")}
         />
-      </Block>
 
-      <Block
+        <FieldSelect {...inputProps}
           label={fieldSpecAdditional.maputnik.style_renderer.label}
           fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
-      >
-        <FieldSelect {...inputProps}
           data-wd-key="modal:settings.maputnik:renderer" 
           options={[
             ['mbgljs', 'MapboxGL JS'],
@@ -258,10 +247,6 @@ export default class ModalSettings extends React.Component {
           value={metadata['maputnik:renderer'] || 'mbgljs'}
           onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
-      </Block>
-
-
-
       </div>
     </Modal>
   }

src/components/ModalShortcuts.jsx

@@ -105,7 +105,7 @@ export default class ModalShortcuts extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Shortcuts'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
           Press <code>ESC</code> to lose focus of any active elements, then press one of:
         </p>
@@ -125,7 +125,7 @@ export default class ModalShortcuts extends React.Component {
             </li>
           })}
         </ul>
-      </div>
+      </section>
     </Modal>
   }
 }

src/components/ModalSources.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Modal from './Modal'
-import Button from './Button'
+import InputButton from './InputButton'
 import Block from './Block'
 import FieldString from './FieldString'
 import FieldSelect from './FieldSelect'
@@ -24,7 +24,7 @@ class PublicSource extends React.Component {
 
   render() {
     return <div className="maputnik-public-source">
-			<Button
+			<InputButton
         className="maputnik-public-source-select"
 				onClick={() => this.props.onSelect(this.props.id)}
 			>
@@ -34,7 +34,7 @@ class PublicSource extends React.Component {
 				</div>
 				<span className="maputnik-space" />
 				<MdAddCircleOutline />
-			</Button>
+			</InputButton>
     </div>
   }
 }
@@ -83,13 +83,14 @@ class ActiveModalSourcesTypeEditor extends React.Component {
       <div className="maputnik-active-source-type-editor-header">
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
         <span className="maputnik-space" />
-        <Button
+        <InputButton
+          aria-label={`Remove '${this.props.sourceId}' source`}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
         >
           <MdDelete />
-        </Button>
+        </InputButton>
       </div>
       <div className="maputnik-active-source-type-editor-content">
         <ModalSourcesTypeEditor
@@ -207,14 +208,15 @@ class AddSource extends React.Component {
     };
 
     return <div className="maputnik-add-source">
-      <Block label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
       <FieldString
+        label={"Source ID"}
+        fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
         value={this.state.sourceId}
         onChange={v => this.setState({ sourceId: v})}
       />
-      </Block>
-      <Block label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
       <FieldSelect
+        label={"Source Type"}
+        fieldSpec={sourceTypeFieldSpec}
         options={[
           ['geojson_json', 'GeoJSON (JSON)'],
           ['geojson_url', 'GeoJSON (URL)'],
@@ -230,18 +232,17 @@ class AddSource extends React.Component {
         onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
         value={this.state.mode}
       />
-      </Block>
       <ModalSourcesTypeEditor
         onChange={this.onChangeSource}
         mode={this.state.mode}
         source={this.state.source}
       />
-      <Button
+      <InputButton
         className="maputnik-add-source-button"
 				onClick={this.onAdd}
       >
         Add Source
-      </Button>
+      </InputButton>
     </div>
   }
 }
@@ -291,28 +292,28 @@ export default class ModalSources extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
-      <div className="maputnik-modal-section">
-        <h4>Active Sources</h4>
+      <section className="maputnik-modal-section">
+        <h1>Active Sources</h1>
         {activeSources}
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
-        <h4>Choose Public Source</h4>
+      <section className="maputnik-modal-section">
+        <h1>Choose Public Source</h1>
         <p>
           Add one of the publicly available sources to your style.
         </p>
         <div className="maputnik-public-sources" style={{maxwidth: 500}}>
         {tilesetOptions}
         </div>
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
-				<h4>Add New Source</h4>
+      <section className="maputnik-modal-section">
+				<h1>Add New Source</h1>
 				<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
 				<AddSource
 					onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
 				/>
-      </div>
+      </section>
     </Modal>
   }
 }

src/components/ModalSourcesTypeEditor.jsx

@@ -2,13 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldString from './FieldString'
 import FieldUrl from './FieldUrl'
 import FieldNumber from './FieldNumber'
 import FieldSelect from './FieldSelect'
 import FieldDynamicArray from './FieldDynamicArray'
 import FieldArray from './FieldArray'
-import FieldJsonEditor from './FieldJsonEditor'
+import FieldJson from './FieldJson'
 
 
 class TileJSONSourceEditor extends React.Component {
@@ -20,15 +19,15 @@ class TileJSONSourceEditor extends React.Component {
 
   render() {
     return <div>
-      <Block label={"TileJSON URL"} fieldSpec={latest.source_vector.url}>
       <FieldUrl
+        label={"TileJSON URL"}
+        fieldSpec={latest.source_vector.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
           ...this.props.source,
           url: url
         })}
       />
-      </Block>
       {this.props.children}
     </div>
   }
@@ -50,36 +49,36 @@ class TileURLSourceEditor extends React.Component {
 
   renderTileUrls() {
     const tiles = this.props.source.tiles || [];
-    return <Block label={"Tile URL"} fieldSpec={latest.source_vector.tiles}>
-      <FieldDynamicArray
+    return <FieldDynamicArray
+      label={"Tile URL"}
+      fieldSpec={latest.source_vector.tiles}
       type="url"
       value={tiles}
       onChange={this.changeTileUrls.bind(this)}
     />
-    </Block>
   }
 
   render() {
     return <div>
       {this.renderTileUrls()}
-      <Block label={"Min Zoom"} fieldSpec={latest.source_vector.minzoom}>
       <FieldNumber
+        label={"Min Zoom"}
+        fieldSpec={latest.source_vector.minzoom}
         value={this.props.source.minzoom || 0}
         onChange={minzoom => this.props.onChange({
           ...this.props.source,
           minzoom: minzoom
         })}
       />
-      </Block>
-      <Block label={"Max Zoom"} fieldSpec={latest.source_vector.maxzoom}>
       <FieldNumber
+        label={"Max Zoom"}
+        fieldSpec={latest.source_vector.maxzoom}
         value={this.props.source.maxzoom || 22}
         onChange={maxzoom => this.props.onChange({
           ...this.props.source,
           maxzoom: maxzoom
         })}
       />
-      </Block>
       {this.props.children}
   </div>
 
@@ -104,26 +103,26 @@ class ImageSourceEditor extends React.Component {
     }
 
     return <div>
-      <Block label={"Image URL"} fieldSpec={latest.source_image.url}>
       <FieldUrl
+        label={"Image URL"}
+        fieldSpec={latest.source_image.url}
         value={this.props.source.url}
         onChange={url => this.props.onChange({
           ...this.props.source,
           url,
         })}
       />
-      </Block>
       {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
-          <Block label={`Coord ${label}`} key={label}>
           <FieldArray
+            label={`Coord ${label}`}
+            key={label}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
             default={[0, 0]}
             onChange={(val) => changeCoord(idx, val)}
           />
-          </Block>
         );
       })}
     </div>
@@ -155,25 +154,25 @@ class VideoSourceEditor extends React.Component {
     }
 
     return <div>
-      <Block label={"Video URL"} fieldSpec={latest.source_video.urls}>
       <FieldDynamicArray
+        label={"Video URL"}
+        fieldSpec={latest.source_video.urls}
         type="string"
         value={this.props.source.urls}
         default={""}
         onChange={changeUrls}
       />
-      </Block>
       {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
-          <Block label={`Coord ${label}`} key={label}>
           <FieldArray
+            label={`Coord ${label}`}
+            key={label}
             length={2}
             type="number"
             value={this.props.source.coordinates[idx]}
             default={[0, 0]}
             onChange={val => changeCoord(idx, val)}
           />
-          </Block>
         );
       })}
     </div>
@@ -187,15 +186,15 @@ class GeoJSONSourceUrlEditor extends React.Component {
   }
 
   render() {
-    return <Block label={"GeoJSON URL"} fieldSpec={latest.source_geojson.data}>
-      <FieldUrl
+    return <FieldUrl
+      label={"GeoJSON URL"}
+      fieldSpec={latest.source_geojson.data}
       value={this.props.source.data}
       onChange={data => this.props.onChange({
         ...this.props.source,
         data: data
       })}
     />
-    </Block>
   }
 }
 
@@ -207,7 +206,7 @@ class GeoJSONSourceFieldJsonEditor extends React.Component {
 
   render() {
     return <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
-      <FieldJsonEditor
+      <FieldJson
         layer={this.props.source.data}
         maxHeight={200}
         mode={{
@@ -247,8 +246,9 @@ export default class ModalSourcesTypeEditor extends React.Component {
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-        <Block label={"Encoding"} fieldSpec={latest.source_raster_dem.encoding}>
         <FieldSelect
+          label={"Encoding"}
+          fieldSpec={latest.source_raster_dem.encoding}
           options={Object.keys(latest.source_raster_dem.encoding.values)}
           onChange={encoding => this.props.onChange({
             ...this.props.source,
@@ -256,7 +256,6 @@ export default class ModalSourcesTypeEditor extends React.Component {
           })}
           value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
         />
-        </Block>
       </TileURLSourceEditor>
       case 'image': return <ImageSourceEditor {...commonProps} />
       case 'video': return <VideoSourceEditor {...commonProps} />

src/components/ModalSurvey.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from './Button'
+import InputButton from './InputButton'
 import Modal from './Modal'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
@@ -26,10 +26,10 @@ export default class ModalSurvey extends React.Component {
       title="Maputnik Survey"
     >
       <div className="maputnik-modal-survey">
-        <div className="maputnik-modal-survey__logo" dangerouslySetInnerHTML={{__html: logoImage}} />
+        <img src={logoImage} className="maputnik-modal-survey__logo" />
         <h1>You + Maputnik = Maputnik better for you</h1>
         <p className="maputnik-modal-survey__description">We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.</p>
-        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</Button>
+        <InputButton onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</InputButton>
         <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
       </div>
     </Modal>

src/components/SingleFilterEditor.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { otherFilterOps } from '../libs/filterops.js'
-import FieldString from './FieldString'
-import FieldAutocomplete from './FieldAutocomplete'
-import FieldSelect from './FieldSelect'
+import InputString from './InputString'
+import InputAutocomplete from './InputAutocomplete'
+import InputSelect from './InputSelect'
 
 function tryParseInt(v) {
   if (v === '') return v
@@ -64,14 +64,16 @@ export default class SingleFilterEditor extends React.Component {
 
     return <div className="maputnik-filter-editor-single">
       <div className="maputnik-filter-editor-property">
-        <FieldAutocomplete
+        <InputAutocomplete
+          aria-label="key"
           value={propertyName}
           options={Object.keys(this.props.properties).map(propName => [propName, propName])}
           onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
         />
       </div>
       <div className="maputnik-filter-editor-operator">
-        <FieldSelect
+        <InputSelect
+          aria-label="function"
           value={filterOp}
           onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
           options={otherFilterOps}
@@ -79,7 +81,8 @@ export default class SingleFilterEditor extends React.Component {
       </div>
       {filterArgs.length > 0 &&
       <div className="maputnik-filter-editor-args">
-        <FieldString
+        <InputString
+          aria-label="value"
           value={filterArgs.join(',')}
           onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
         />

src/components/SpecField.jsx

@@ -1,132 +1,51 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Block from './Block'
+import InputSpec from './InputSpec'
+import Fieldset from './Fieldset'
 
-import FieldColor from './FieldColor'
-import FieldNumber from './FieldNumber'
-import FieldCheckbox from './FieldCheckbox'
-import FieldString from './FieldString'
-import FieldSelect from './FieldSelect'
-import FieldMultiInput from './FieldMultiInput'
-import FieldArray from './FieldArray'
-import FieldDynamicArray from './FieldDynamicArray'
-import FieldFont from './FieldFont'
-import FieldSymbol from './FieldSymbol'
-import FieldEnum from './FieldEnum'
-import capitalize from 'lodash.capitalize'
 
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+const typeMap = {
+  color: () => Block,
+  enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
+  number: () => Block,
+  boolean: () => Block,
+  array: () => Fieldset,
+  resolvedImage: () => Block,
+  number: () => Block,
+  string: () => Block,
+  formatted: () => Block,
+};
 
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
-}
-
-function optionsLabelLength(options) {
-  let sum = 0;
-  options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
-}
-
-/** Display any field from the Mapbox GL style spec and
- * choose the correct field component based on the @{fieldSpec}
- * to display @{value}. */
 export default class SpecField extends React.Component {
   static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    fieldName: PropTypes.string.isRequired,
-    fieldSpec: PropTypes.object.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.array,
-      PropTypes.bool
-    ]),
-    /** Override the style of the field */
-    style: PropTypes.object,
+    ...InputSpec.propTypes,
+    name: PropTypes.string,
   }
 
   render() {
-    const commonProps = {
-      style: this.props.style,
-      value: this.props.value,
-      default: this.props.fieldSpec.default,
-      name: this.props.fieldName,
-      onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
+    const {props} = this;
+
+    const fieldType = props.fieldSpec.type;
+
+    const typeBlockFn = typeMap[fieldType];
+
+    let TypeBlock;
+    if (typeBlockFn) {
+      TypeBlock = typeBlockFn(props);
+    }
+    else {
+      console.warn("No such type for '%s'", fieldType);
+      TypeBlock = Block;
     }
 
-    function childNodes() {
-      switch(this.props.fieldSpec.type) {
-        case 'number': return (
-          <FieldNumber
-            {...commonProps}
-            min={this.props.fieldSpec.minimum}
-            max={this.props.fieldSpec.maximum}
-          />
-        )
-        case 'enum':
-          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
-
-          return <FieldEnum
-            {...commonProps}
-            options={options}
-          />
-        case 'resolvedImage':
-        case 'formatted':
-        case 'string':
-          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
-            return <FieldSymbol
-              {...commonProps}
-              icons={this.props.fieldSpec.values}
-            />
-          } else {
-            return <FieldString
-              {...commonProps}
-            />
-          }
-        case 'color': return (
-          <FieldColor
-            {...commonProps}
-          />
-        )
-        case 'boolean': return (
-          <FieldCheckbox
-            {...commonProps}
-          />
-        )
-        case 'array':
-          if(this.props.fieldName === 'text-font') {
-            return <FieldFont
-              {...commonProps}
-              fonts={this.props.fieldSpec.values}
-            />
-          } else {
-            if (this.props.fieldSpec.length) {
-              return <FieldArray
-                {...commonProps}
-                type={this.props.fieldSpec.value}
-                length={this.props.fieldSpec.length}
-              />
-            } else {
-              return <FieldDynamicArray
-                {...commonProps}
+    return <TypeBlock
+      label={props.label}
+      action={props.action}
       fieldSpec={this.props.fieldSpec}
-                type={this.props.fieldSpec.value}
-              />
-            }
-          }
-        default: return null
-      }
-    }
-
-    return (
-      <div data-wd-key={"spec-field:"+this.props.fieldName}>
-      {childNodes.call(this)}
-      </div>
-    );
+    >
+      <InputSpec {...props} />
+    </TypeBlock>
   }
 }
+

src/components/_DataProperty.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
-import Button from './Button'
-import SpecField from './SpecField'
-import FieldNumber from './FieldNumber'
-import FieldString from './FieldString'
-import FieldSelect from './FieldSelect'
-import Doc from './Doc'
+import InputButton from './InputButton'
+import InputSpec from './InputSpec'
+import InputNumber from './InputNumber'
+import InputString from './InputString'
+import InputSelect from './InputSelect'
+import FieldDocLabel from './FieldDocLabel'
 import Block from './Block'
 import docUid from '../libs/document-uid'
 import sortNumerically from '../libs/sort-numerically'
@@ -91,7 +91,7 @@ export default class DataProperty extends React.Component {
 
   getDataFunctionTypes(fieldSpec) {
     if (fieldSpec.expression.interpolated) {
-      return ["categorical", "interval", "exponential", "identity"]
+      return ["interpolate", "categorical", "interval", "exponential", "identity"]
     }
     else {
       return ["categorical", "interval", "identity"]
@@ -149,8 +149,14 @@ export default class DataProperty extends React.Component {
 
   changeStop(changeIdx, stopData, value) {
     const stops = this.props.value.stops.slice(0)
-    const changedStop = stopData.zoom === undefined ? stopData.value : stopData
-    stops[changeIdx] = [changedStop, value]
+    // const changedStop = stopData.zoom === undefined ? stopData.value : stopData
+    stops[changeIdx] = [
+      {
+        ...stopData,
+        zoom: (stopData.zoom === undefined) ? 0 : stopData.zoom,
+      },
+      value
+    ];
 
     const orderedStops = this.orderStopsByZoom(stops);
 
@@ -161,6 +167,18 @@ export default class DataProperty extends React.Component {
     this.onChange(this.props.fieldName, changedValue)
   }
 
+  changeDataType(propVal) {
+    if (propVal === "interpolate") {
+      this.props.onChangeToZoomFunction();
+    }
+    else {
+      this.onChange(this.props.fieldName, {
+        ...this.props.value,
+        type: propVal,
+      });
+    }
+  }
+
   changeDataProperty(propName, propVal) {
     if (propVal) {
       this.props.value[propName] = propVal
@@ -188,6 +206,7 @@ export default class DataProperty extends React.Component {
         const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
         const dataProps = {
+          'aria-label': "Input value",
           label: "Data value",
           value: dataLevel,
           onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
@@ -195,16 +214,17 @@ export default class DataProperty extends React.Component {
 
         let dataInput;
         if(this.props.value.type === "categorical") {
-          dataInput = <FieldString {...dataProps} />
+          dataInput = <InputString {...dataProps} />
         }
         else {
-          dataInput = <FieldNumber {...dataProps} />
+          dataInput = <InputNumber {...dataProps} />
         }
 
         let zoomInput = null;
         if(zoomLevel !== undefined) {
-          zoomInput = <div className="maputnik-data-spec-property-stop-edit">
-            <FieldNumber
+          zoomInput = <div>
+            <InputNumber
+              aria-label="Zoom"
               value={zoomLevel}
               onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
               min={0}
@@ -223,6 +243,27 @@ export default class DataProperty extends React.Component {
         }).join("");
         const error = message ? {message} : undefined;
 
+        return <tr key={key}>
+          <td>
+            {zoomInput}
+          </td>
+          <td>
+            {dataInput}
+          </td>
+          <td>
+            <InputSpec
+              aria-label="Output value"
+              fieldName={this.props.fieldName}
+              fieldSpec={this.props.fieldSpec}
+              value={value}
+              onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
+            />
+          </td>
+          <td>
+            {deleteStopBtn}
+          </td>
+        </tr>
+
         return <Block
           error={error}
           key={key}
@@ -234,7 +275,7 @@ export default class DataProperty extends React.Component {
             {dataInput}
           </div>
           <div className="maputnik-data-spec-property-stop-value">
-            <SpecField
+            <InputSpec
               fieldName={this.props.fieldName}
               fieldSpec={this.props.fieldSpec}
               value={value}
@@ -246,74 +287,83 @@ export default class DataProperty extends React.Component {
     }
 
     return <div className="maputnik-data-spec-block">
-      <div className="maputnik-data-spec-property">
+      <fieldset className="maputnik-data-spec-property">
+        <legend>{labelFromFieldName(this.props.fieldName)}</legend>
+        <div className="maputnik-data-fieldset-inner">
           <Block
-          fieldSpec={this.props.fieldSpec}
-          label={labelFromFieldName(this.props.fieldName)}
+            label={"Function"}
           >
-          <div className="maputnik-data-spec-property-group">
-            <Doc
-              label="Type"
-            />
             <div className="maputnik-data-spec-property-input">
-              <FieldSelect
+              <InputSelect
                 value={this.props.value.type}
-                onChange={propVal => this.changeDataProperty("type", propVal)}
+                onChange={propVal => this.changeDataType(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">
-            <Doc
-              label="Property"
-            />
+          </Block>
+          <Block
+            label={"Property"}
+          >
             <div className="maputnik-data-spec-property-input">
-              <FieldString
+              <InputString
                 value={this.props.value.property}
                 title={"Input a data property to base styles off of."}
                 onChange={propVal => this.changeDataProperty("property", propVal)}
               />
             </div>
-          </div>
+          </Block>
           {dataFields &&
-            <div className="maputnik-data-spec-property-group">
-              <Doc
-                label="Default"
-              />
-              <div className="maputnik-data-spec-property-input">
-                <SpecField
+            <Block
+              label={"Default"}
+            >
+              <InputSpec
                 fieldName={this.props.fieldName}
                 fieldSpec={this.props.fieldSpec}
                 value={this.props.value.default}
                 onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
               />
-              </div>
+            </Block>
+          }
+          {dataFields &&
+            <div className="maputnik-function-stop">
+              <table className="maputnik-function-stop-table">
+                <caption>Stops</caption>
+                <thead>
+                  <tr>
+                    <th>Zoom</th>
+                    <th>Input value</th>
+                    <th rowSpan="2">Output value</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {dataFields}
+                </tbody>
+              </table>
             </div>
           }
-        </Block>
-      </div>
+          <div className="maputnik-toolbox">
             {dataFields &&
-        <>
-          {dataFields}
-          <Button
+              <InputButton
                 className="maputnik-add-stop"
                 onClick={this.props.onAddStop.bind(this)}
               >
                 <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                   <path fill="currentColor" d={mdiTableRowPlusAfter} />
                 </svg> Add stop
-          </Button>
-        </>
+              </InputButton>
             }
-      <Button
+            <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick.bind(this)}
             >
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiFunctionVariant} />
               </svg> Convert to expression
-      </Button>
+            </InputButton>
+          </div>
+        </div>
+      </fieldset>
     </div>
   }
 }

src/components/_DeleteStopButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from './Button'
+import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
 
@@ -11,12 +11,12 @@ export default class DeleteStopButton extends React.Component {
   }
 
   render() {
-    return <Button
+    return <InputButton
       className="maputnik-delete-stop"
       onClick={this.props.onClick}
       title={"Remove zoom level from stop"}
     >
       <MdDelete />
-    </Button>
+    </InputButton>
   }
 }

src/components/_ExpressionProperty.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Block from './Block'
-import Button from './Button'
+import InputButton from './InputButton'
 import {MdDelete, MdUndo} from 'react-icons/md'
 import FieldString from './FieldString'
 
 import labelFromFieldName from './_labelFromFieldName'
 import stringifyPretty from 'json-stringify-pretty-compact'
-import FieldJsonEditor from './FieldJsonEditor'
+import FieldJson from './FieldJson'
 
 
 export default class ExpressionProperty extends React.Component {
@@ -59,7 +59,7 @@ export default class ExpressionProperty extends React.Component {
     const deleteStopBtn = (
       <>
         {this.props.onUndo &&
-          <Button
+          <InputButton
             key="undo_action"
             onClick={this.props.onUndo}
             disabled={undoDisabled}
@@ -67,16 +67,16 @@ export default class ExpressionProperty extends React.Component {
             title="Revert from expression"
           >
             <MdUndo />
-          </Button>
+          </InputButton>
         }
-        <Button
+        <InputButton
           key="delete_action"
           onClick={this.props.onDelete}
           className="maputnik-delete-stop"
           title="Delete expression"
         >
           <MdDelete />
-        </Button>
+        </InputButton>
       </>
     );
 
@@ -114,7 +114,7 @@ export default class ExpressionProperty extends React.Component {
       action={deleteStopBtn}
       wideMode={true}
     >
-      <FieldJsonEditor
+      <FieldJson
         mode={{name: "mgl"}}
         lint={{
           context: "expression",

src/components/_FieldFont.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Block from './Block'
 import PropTypes from 'prop-types'
 import FieldAutocomplete from './FieldAutocomplete'
 
@@ -39,17 +40,22 @@ export default class FieldFont extends React.Component {
 
   render() {
     const inputs = this.values.map((value, i) => {
-      return <FieldAutocomplete
+      return <li
         key={i}
+      >
+        <FieldAutocomplete
           value={value}
           options={this.props.fonts.map(f => [f, f])}
           onChange={this.changeFont.bind(this, i)}
         />
+      </li>
     })
 
-    return <div className="maputnik-font">
+    return <Block label={this.props.label}>
+      <ul className="maputnik-font">
         {inputs}
-    </div>
+      </ul>
+    </Block>
   }
 }
 

src/components/_FunctionButtons.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Button from './Button'
+import InputButton from './InputButton'
 import {MdFunctions, MdInsertChart} from 'react-icons/md'
 import {mdiFunctionVariant} from '@mdi/js';
 
@@ -24,7 +24,7 @@ function isExpression(value, fieldSpec={}) {
   }
 }
 
-export default class FunctionButtons extends React.Component {
+export default class FunctionInputButtons extends React.Component {
   static propTypes = {
     fieldSpec: PropTypes.object,
     onZoomClick: PropTypes.func,
@@ -33,11 +33,11 @@ export default class FunctionButtons extends React.Component {
   }
 
   render() {
-    let makeZoomButton, makeDataButton, expressionButton;
+    let makeZoomInputButton, makeDataInputButton, expressionInputButton;
 
     if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
-      expressionButton = (
-        <Button
+      expressionInputButton = (
+        <InputButton
           className="maputnik-make-zoom-function"
           onClick={this.props.onExpressionClick}
           title="Convert to expression"
@@ -45,34 +45,34 @@ export default class FunctionButtons extends React.Component {
           <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiFunctionVariant} />
           </svg>
-        </Button>
+        </InputButton>
       );
 
-      makeZoomButton = <Button
+      makeZoomInputButton = <InputButton
         className="maputnik-make-zoom-function"
         onClick={this.props.onZoomClick}
         title="Convert property into a zoom function"
       >
         <MdFunctions />
-      </Button>
+      </InputButton>
 
       if (this.props.fieldSpec['property-type'] === 'data-driven') {
-        makeDataButton = <Button
+        makeDataInputButton = <InputButton
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}
           title="Convert property to data function"
         >
           <MdInsertChart />
-        </Button>
+        </InputButton>
       }
       return <div>
-        {expressionButton}
-        {makeDataButton}
-        {makeZoomButton}
+        {expressionInputButton}
+        {makeDataInputButton}
+        {makeZoomInputButton}
       </div>
     }
     else {
-      return <div>{expressionButton}</div>
+      return <div>{expressionInputButton}</div>
     }
   }
 }

src/components/_SpecProperty.jsx

@@ -37,13 +37,12 @@ export default class SpecProperty extends React.Component {
 
     const error = errors[fieldType+"."+fieldName];
 
-    return <Block
+    return <SpecField
+      {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={functionBtn}
-    >
-      <SpecField {...this.props} />
-    </Block>
+    />
   }
 }

src/components/_ZoomProperty.jsx

@@ -2,9 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
-import Button from './Button'
-import SpecField from './SpecField'
-import FieldNumber from './FieldNumber'
+import InputButton from './InputButton'
+import InputSpec from './InputSpec'
+import InputNumber from './InputNumber'
+import InputSelect from './InputSelect'
+import FieldDocLabel from './FieldDocLabel'
 import Block from './Block'
 
 import DeleteStopButton from './_DeleteStopButton'
@@ -124,6 +126,12 @@ export default class ZoomProperty extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
+  changeDataType = (type) => {
+    if (type !== "interpolate") {
+      this.props.onChangeToDataFunction(type);
+    }
+  }
+
   render() {
     const {fieldName, fieldType, errors} = this.props;
 
@@ -143,52 +151,94 @@ export default class ZoomProperty extends React.Component {
       }).join("");
       const error = message ? {message} : undefined;
 
-      return <Block
-        error={error}
+      return <tr
         key={key}
-        fieldSpec={this.props.fieldSpec}
-        label={labelFromFieldName(this.props.fieldName)}
-        action={deleteStopBtn}
       >
-        <div>
-          <div className="maputnik-zoom-spec-property-stop-edit">
-            <FieldNumber
+        <td>
+          <InputNumber
+            aria-label="Zoom"
             value={zoomLevel}
             onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
             min={0}
             max={22}
           />
-          </div>
-          <div className="maputnik-zoom-spec-property-stop-value">
-            <SpecField
+        </td>
+        <td>
+          <InputSpec
+            aria-label="Output value"
             fieldName={this.props.fieldName}
             fieldSpec={this.props.fieldSpec}
             value={value}
             onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
           />
-          </div>
-        </div>
-      </Block>
+        </td>
+        <td>
+          {deleteStopBtn}
+        </td>
+      </tr>
     });
 
-    return <div className="maputnik-zoom-spec-property">
+    // return <div className="maputnik-zoom-spec-property">
+    return <div className="maputnik-data-spec-block">
+      <fieldset className="maputnik-data-spec-property">
+        <legend>{labelFromFieldName(this.props.fieldName)}</legend>
+        <div className="maputnik-data-fieldset-inner">
+          <Block
+            label={"Function"}
+          >
+            <div className="maputnik-data-spec-property-input">
+              <InputSelect
+                value={"interpolate"}
+                onChange={propVal => this.changeDataType(propVal)}
+                title={"Select a type of data scale (default is 'categorical')."}
+                options={this.getDataFunctionTypes(this.props.fieldSpec)}
+              />
+            </div>
+          </Block>
+          <div className="maputnik-function-stop">
+            <table className="maputnik-function-stop-table maputnik-function-stop-table--zoom">
+              <caption>Stops</caption>
+              <thead>
+                <tr>
+                  <th>Zoom</th>
+                  <th rowSpan="2">Output value</th>
+                </tr>
+              </thead>
+              <tbody>
                 {zoomFields}
-      <Button
+              </tbody>
+            </table>
+          </div>
+          <div className="maputnik-toolbox">
+            <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onAddStop.bind(this)}
             >
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiTableRowPlusAfter} />
               </svg> Add stop
-      </Button>
-      <Button
+            </InputButton>
+            <InputButton
               className="maputnik-add-stop"
               onClick={this.props.onExpressionClick.bind(this)}
             >
               <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
                 <path fill="currentColor" d={mdiFunctionVariant} />
               </svg> Convert to expression
-      </Button>
+            </InputButton>
+          </div>
+        </div>
+      </fieldset>
     </div>
   }
+
+  getDataFunctionTypes(fieldSpec) {
+    if (fieldSpec['property-type'] === 'data-driven') {
+      return ["interpolate", "categorical", "interval", "exponential", "identity"];
+    }
+    else {
+      return ["interpolate"];
+    }
+  }
+
 }

src/styles/_base.scss

@@ -63,9 +63,13 @@ h4 {
 }
 
 input:focus,
+textarea:focus,
+*[role="button"]:focus,
+button:focus,
+.maputnik-toolbar-link:focus,
 select:focus {
-  color: $color-white !important;
-  outline: #8e8e8e auto 1px !important;
+  color: $color-white;
+  outline: #8e8e8e auto 1px;
 }
 
 label:hover {

src/styles/_components.scss

@@ -30,14 +30,12 @@
   .maputnik-doc-button {
     opacity: 1;
     pointer-events: all;
+    cursor: pointer;
   }
 }
 
 // DOC LABEL
 .maputnik-doc {
-  &-target {
-    cursor: help;
-  }
 
   &-wrapper {
     display: inline-block;
@@ -69,7 +67,7 @@
     background: $color-black;
     color: white;
     border: none;
-    padding: 0;
+    padding: 4px;
 
     svg {
       pointer-events: none;
@@ -89,6 +87,7 @@
   font-size: 12px;
   margin-top: $margin-3;
   line-height: 1.5;
+  flex: 1 0;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {
@@ -163,18 +162,27 @@
 // INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
+  display: flex;
+  flex-wrap: wrap;
 
   &-label {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
-    width: 50%;
+    width: 32%;
     vertical-align: top;
     font-size: 12px;
   }
 
+  &-action {
+    color: $color-lowgray;
+    user-select: none;
+    width: 18%;
+    vertical-align: top;
+    font-size: 12px;
+    text-align: right;
+  }
+
   &-content {
-    display: inline-block;
     width: 50%;
   }
 }
@@ -183,6 +191,7 @@
   .maputnik-input-block-label {
     display: inline-block;
     width: 32%;
+    margin-bottom: $margin-3;
   }
 
   .maputnik-input-block-action {
@@ -270,6 +279,7 @@
   .maputnik-input-block-content {
     display: block;
     width: auto;
+    flex: 1;
   }
 
   .maputnik-input-block-label {

src/styles/_input.scss

@@ -77,13 +77,13 @@
     .maputnik-array-block-action {
       vertical-align: top;
       display: inline-block;
-      width: 14%;
+      width: 2em;
     }
 
     .maputnik-array-block-content {
       vertical-align: top;
       display: inline-block;
-      width: 86%;
+      width: calc(100% - 2em);
     }
   }
 
@@ -124,9 +124,13 @@
 // CHECKBOX
 .maputnik-checkbox {
   position: absolute;
-  z-index: -1;
-  opacity: 0;
-  width: 50%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  left: 0;
+  top: 0;
+  outline: none;
 
   &-wrapper {
     @extend .maputnik-input;
@@ -141,6 +145,7 @@
   }
 
   &-box {
+    z-index: 2;
     display: inline-block;
     text-align: center;
     height: 24px;
@@ -152,12 +157,26 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // So they fall through to the <input/> beneath
+    pointer-events: none;
 
     @media screen and (prefers-reduced-motion: reduce) {
       transition-duration: 0ms;
     }
   }
 
+  &:focus {
+    z-index: 8;
+  }
+
+  &:focus + &-box {
+    z-index: 9;
+  }
+
+
   &-icon {
     width: 50%;
     height: 50%;
@@ -203,7 +222,6 @@
 
 .maputnik-input-block-content {
   position: relative;
-  overflow: hidden;
 }
 
 .SpecDoc__sdk-support {

src/styles/_layer.scss

@@ -143,6 +143,8 @@
     color: inherit;
     text-decoration: none;
     cursor: pointer;
+    // HACK: Remove important
+    outline: none !important;
   }
 
   &-group-header {

src/styles/_modal.scss

@@ -8,12 +8,23 @@
   z-index: 3;
   position: relative;
   font-family: $font-family;
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
 }
 
 .maputnik-modal-section {
   padding-top: $margin-3;
   padding-bottom: $margin-3;
 
+  h1 {
+    font-size: $font-size-4;
+  }
+
+  h2 {
+    font-size: $font-size-5;
+  }
+
   /* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */
   min-height: 0;
 
@@ -50,7 +61,7 @@
 }
 
 .maputnik-modal-scroller {
-  max-height: calc(100vh - 35px);
+  flex: 1;
   overflow-y: auto;
 }
 
@@ -116,6 +127,15 @@
 .maputnik-export-modal {
   width: 400px;
   max-width: 100%;
+
+  .maputnik-input-block-label {
+    width: 50%;
+    align-self: center;
+  }
+
+  .maputnik-input-block-action {
+    width: 0;
+  }
 }
 
 .maputnik-add-layer {
@@ -195,8 +215,8 @@
     width: 30%;
   }
 
-  .maputnik-input-block-content {
-    width: 70%;
+  .maputnik-input-block-action {
+    width: 20%;
   }
 }
 
@@ -207,8 +227,8 @@
     width: 30%;
   }
 
-  .maputnik-input-block-content {
-    width: 70%;
+  .maputnik-input-block-action {
+    width: 20%;
   }
 }
 

src/styles/_zoomproperty.scss

@@ -73,8 +73,8 @@
     width: 30%;
   }
 
-  .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
-    visibility: hidden;
+  .maputnik-input-block-action {
+    display: none;
   }
 
   .maputnik-input-block-content {

src/styles/index.scss

@@ -35,3 +35,135 @@
   height: 14px;
 }
 
+.maputnik-data-spec-property {
+}
+
+.maputnik-data-fieldset-inner {
+  background: $color-black;
+  border: solid 1px $color-midgray;
+  border-radius: 2px;
+  position: relative;
+
+  // HACK: Overide
+  .maputnik-input-block {
+    margin: $margin-2;
+  }
+
+  .maputnik-add-stop {
+    display: inline-block;
+    float: none;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .maputnik-toolbox {
+    margin: $margin-3;
+    margin-top: $margin-3;
+    text-align: right;
+  }
+
+}
+
+.maputnik-data-spec-property {
+  legend {
+    font-size: $font-size-6;
+    color: $color-lowgray;
+    margin-bottom: $margin-3;
+  }
+
+  .maputnik-data-spec-property-group {
+    margin-bottom: $margin-2;
+  }
+}
+
+.maputnik-data-spec-block {
+  margin: $margin-3;
+}
+
+.maputnik-function-stop {
+  padding-left: $margin-2;
+  padding-right: $margin-2;
+}
+
+.maputnik-function-stop-table {
+  text-align: left;
+  margin-bottom: $margin-2;
+  box-sizing: border-box;
+  width: 100%;
+
+  thead th {
+    padding: $margin-1 $margin-2;
+    padding-left: 0;
+    color: $color-lowgray;
+  }
+
+  td, th {
+    font-size: $font-size-6;
+    color: $color-white;
+
+    // HACK
+    > * {
+      display: inline-block;
+      width: 100%;
+      vertical-align: text-top;
+    }
+
+    &:not(:first-child)
+    {
+      padding-top: $margin-1;
+      padding-left: $margin-2;
+    }
+
+    &:nth-child(1) {
+      width: 2em;
+    }
+
+    &:nth-child(2) {
+      width: 6em;
+    }
+
+    &:nth-child(3) {
+      width: auto;
+    }
+
+    &:nth-child(4) {
+      // HACK
+      width: 1.8em;
+
+      .maputnik-delete-stop {
+        padding: 0;
+        width: 1em;
+      }
+    }
+  }
+
+  &--zoom {
+    td, th {
+      &:nth-child(2) {
+        width: auto;
+      }
+
+      &:nth-child(3) {
+        // HACK
+        width: 1.8em;
+
+        .maputnik-delete-stop {
+          padding: 0;
+          width: 1em;
+        }
+      }
+    }
+  }
+
+  caption {
+    color: $color-lowgray;
+    text-align: left;
+    border-top: solid 1px $color-black;
+    font-size: $font-size-6;
+    height: 0px;
+    overflow: hidden;
+  }
+}
+

src/template.html

@@ -41,6 +41,7 @@
   <!-- TODO: Import dynamically -->
   <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
   <svg
+    aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1">
     <defs>

stories/FieldArray.stories.js

@@ -17,6 +17,7 @@ export const NumberType = () => {
   return (
     <Wrapper>
       <FieldArray
+        label="Foobar"
         type="number"
         value={value}
         length={3}
@@ -32,6 +33,7 @@ export const StringType = () => {
   return (
     <Wrapper>
       <FieldArray
+        label="Foobar"
         type="string"
         value={value}
         length={3}

stories/FieldAutocomplete.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldAutocomplete
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldCheckbox.stories.js

@@ -17,6 +17,7 @@ export const BasicUnchecked = () => {
   return (
     <Wrapper>
       <FieldCheckbox
+        label="Foobar"
         value={value}
         onChange={setValue}
       />
@@ -30,6 +31,7 @@ export const BasicChecked = () => {
   return (
     <Wrapper>
       <FieldCheckbox
+        label="Foobar"
         value={value}
         onChange={setValue}
       />

stories/FieldColor.stories.js

@@ -17,7 +17,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldColor
-        name="color"
+        label="Foobar"
         value={color}
         onChange={setColor}
       />

stories/FieldDynamicArray.stories.js

@@ -17,6 +17,7 @@ export const NumberType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
         type="number"
         value={value}
         onChange={setValue}
@@ -31,6 +32,7 @@ export const UrlType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
         type="url"
         value={value}
         onChange={setValue}
@@ -45,6 +47,7 @@ export const EnumType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
 	fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
         type="enum"
         value={value}

stories/FieldEnum.stories.js

@@ -18,6 +18,7 @@ export const BasicFew = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
@@ -33,6 +34,7 @@ export const BasicFewWithDefault = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         default={"Baz"}
         value={value}
@@ -49,6 +51,7 @@ export const BasicMany = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
@@ -64,7 +67,8 @@ export const BasicManyWithDefault = () => {
   return (
     <Wrapper>
       <FieldEnum
-        options={options}A
+        label="Foobar"
+        options={options}
         default={"h"}
         value={value}
         onChange={setValue}

stories/FieldFont.stories.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldFont from '../src/components/FieldFont';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldFont',
-  component: FieldFont,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const fonts = ["Comic Sans", "Helvectica", "Gotham"];
-  const [value, setValue] = useActionState("onChange", ["Comic Sans"]);
-
-  return (
-    <Wrapper>
-      <FieldFont
-        fonts={fonts}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldFunction.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import FieldFunction from '../src/components/FieldFunction';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+
+
+export default {
+  title: 'FieldFunction',
+  component: FieldFunction,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const value = {
+    "property": "rank",
+    "type": "categorical",
+    "default": "#222",
+    "stops": [
+      [
+        {"zoom": 6, "value": ""},
+        ["#777"]
+      ],
+      [
+        {"zoom": 10, "value": ""},
+        ["#444"]
+      ]
+    ]
+  };
+
+  return <div style={{width: "360px"}}>
+    <FieldFunction
+      onChange={() => {}}
+      value={value}
+      errors={[]}
+      fieldName={"Color"}
+      fieldType={"color"}
+      fieldSpec={latest['paint_fill']['fill-color']}
+    />
+  </div>
+};
+

stories/FieldMultiInput.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldMultiInput
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldNumber.stories.js

@@ -16,7 +16,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldNumber
-        name="number"
+        label="number"
         value={value}
         onChange={setValue}
       />
@@ -30,7 +30,7 @@ export const Range = () => {
   return (
     <Wrapper>
       <FieldNumber
-        name="number"
+        label="number"
         value={value}
         onChange={setValue}
         min={1}

stories/FieldSelect.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldSelect
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldString.stories.js

@@ -17,49 +17,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldString
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const WithDefault = () => {
-  const [value, setValue] = useActionState("onChange", null);
-
-  return (
-    <Wrapper>
-      <FieldString
-        value={value}
-        default={"Edit me..."}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const Multiline = () => {
-  const [value, setValue] = useActionState("onChange", "Hello\nworld");
-
-  return (
-    <Wrapper>
-      <FieldString
-        multi={true}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const MultilineWithDefault = () => {
-  const [value, setValue] = useActionState("onChange", null);
-
-  return (
-    <Wrapper>
-      <FieldString
-        multi={true}
-        default={"Edit\nme.."}
+        label="Foobar"
         value={value}
         onChange={setValue}
       />

stories/FieldSymbol.stories.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSymbol from '../src/components/FieldSymbol';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSymbol',
-  component: FieldSymbol,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const icons = ["Bicycle", "Ski", "Ramp"];
-  const [value, setValue] = useActionState("onChange", "Ski");
-
-  return (
-    <Wrapper>
-      <FieldSymbol
-        icons={icons}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-

stories/FieldUrl.stories.js

@@ -17,6 +17,7 @@ export const Valid = () => {
   return (
     <Wrapper>
       <FieldUrl
+        label="Foobar"
         value={value}
         onChange={setValue}
         onInput={setValue}
@@ -31,6 +32,7 @@ export const Invalid = () => {
   return (
     <Wrapper>
       <FieldUrl
+        label="Foobar"
         value={value}
         onChange={setValue}
         onInput={setValue}

stories/IconLayer.stories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import IconLayer from '../src/components/IconLayer';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'IconLayer',
+  component: IconLayer,
+  decorators: [withA11y],
+};
+
+export const IconList = () => {
+  const types = [
+    'fill-extrusion',
+    'raster',
+    'hillshade',
+    'heatmap',
+    'fill',
+    'background',
+    'line',
+    'symbol',
+    'circle',
+    'INVALID',
+  ]
+
+  return <Wrapper>
+    <table style={{textAlign: "left"}}>
+      <thead style={{borderBottom: "solid 1px white"}}>
+        <tr>
+          <td>ID</td>
+          <td>Preview</td>
+        </tr>
+      </thead>
+      <tbody>
+        {types.map(type => (
+          <tr>
+            <td style={{paddingRight: "1em"}}>
+              <code>{type}</code>
+            </td>
+            <td>
+              <IconLayer type={type} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </Wrapper>
+};
+
+
+
+
+
+

stories/InputArray.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputArray from '../src/components/InputArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputArray',
+  component: InputArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <InputArray
+        type="number"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const StringType = () => {
+  const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
+
+  return (
+    <Wrapper>
+      <InputArray
+        type="string"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+