From d6f31ec82e6e27946b81ebbd85b78b741c0fa3d6 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 3 Jun 2020 17:11:47 +0100
Subject: [PATCH 01/25] Block* -> Field*

---
 .../{BlockComment.jsx => FieldComment.jsx}    |  0
 src/components/{BlockId.jsx => FieldId.jsx}   |  0
 .../{BlockMaxZoom.jsx => FieldMaxZoom.jsx}    |  0
 .../{BlockMinZoom.jsx => FieldMinZoom.jsx}    |  0
 .../{BlockSource.jsx => FieldSource.jsx}      |  0
 ...ckSourceLayer.jsx => FieldSourceLayer.jsx} |  0
 .../{BlockType.jsx => FieldType.jsx}          |  0
 stories/FieldComment.stories.js               | 26 +++++++++++++++++++
 stories/FieldId.stories.js                    | 26 +++++++++++++++++++
 stories/FieldMaxZoom.stories.js               | 26 +++++++++++++++++++
 stories/FieldMinZoom.stories.js               | 26 +++++++++++++++++++
 stories/FieldSource.stories.js                | 26 +++++++++++++++++++
 stories/FieldSourceLayer.stories.js           | 26 +++++++++++++++++++
 stories/FieldType.stories.js                  | 26 +++++++++++++++++++
 stories/ui.js                                 |  2 +-
 15 files changed, 183 insertions(+), 1 deletion(-)
 rename src/components/{BlockComment.jsx => FieldComment.jsx} (100%)
 rename src/components/{BlockId.jsx => FieldId.jsx} (100%)
 rename src/components/{BlockMaxZoom.jsx => FieldMaxZoom.jsx} (100%)
 rename src/components/{BlockMinZoom.jsx => FieldMinZoom.jsx} (100%)
 rename src/components/{BlockSource.jsx => FieldSource.jsx} (100%)
 rename src/components/{BlockSourceLayer.jsx => FieldSourceLayer.jsx} (100%)
 rename src/components/{BlockType.jsx => FieldType.jsx} (100%)
 create mode 100644 stories/FieldComment.stories.js
 create mode 100644 stories/FieldId.stories.js
 create mode 100644 stories/FieldMaxZoom.stories.js
 create mode 100644 stories/FieldMinZoom.stories.js
 create mode 100644 stories/FieldSource.stories.js
 create mode 100644 stories/FieldSourceLayer.stories.js
 create mode 100644 stories/FieldType.stories.js

diff --git a/src/components/BlockComment.jsx b/src/components/FieldComment.jsx
similarity index 100%
rename from src/components/BlockComment.jsx
rename to src/components/FieldComment.jsx
diff --git a/src/components/BlockId.jsx b/src/components/FieldId.jsx
similarity index 100%
rename from src/components/BlockId.jsx
rename to src/components/FieldId.jsx
diff --git a/src/components/BlockMaxZoom.jsx b/src/components/FieldMaxZoom.jsx
similarity index 100%
rename from src/components/BlockMaxZoom.jsx
rename to src/components/FieldMaxZoom.jsx
diff --git a/src/components/BlockMinZoom.jsx b/src/components/FieldMinZoom.jsx
similarity index 100%
rename from src/components/BlockMinZoom.jsx
rename to src/components/FieldMinZoom.jsx
diff --git a/src/components/BlockSource.jsx b/src/components/FieldSource.jsx
similarity index 100%
rename from src/components/BlockSource.jsx
rename to src/components/FieldSource.jsx
diff --git a/src/components/BlockSourceLayer.jsx b/src/components/FieldSourceLayer.jsx
similarity index 100%
rename from src/components/BlockSourceLayer.jsx
rename to src/components/FieldSourceLayer.jsx
diff --git a/src/components/BlockType.jsx b/src/components/FieldType.jsx
similarity index 100%
rename from src/components/BlockType.jsx
rename to src/components/FieldType.jsx
diff --git a/stories/FieldComment.stories.js b/stories/FieldComment.stories.js
new file mode 100644
index 0000000..6c815d9
--- /dev/null
+++ b/stories/FieldComment.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldComment from '../src/components/FieldComment';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldComment',
+  component: FieldComment,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "Hello\nworld");
+
+  return (
+    <Wrapper>
+      <FieldComment
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldId.stories.js b/stories/FieldId.stories.js
new file mode 100644
index 0000000..b2b97ae
--- /dev/null
+++ b/stories/FieldId.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldId from '../src/components/FieldId';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldId',
+  component: FieldId,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "water");
+
+  return (
+    <Wrapper>
+      <FieldId
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldMaxZoom.stories.js b/stories/FieldMaxZoom.stories.js
new file mode 100644
index 0000000..729f889
--- /dev/null
+++ b/stories/FieldMaxZoom.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldMaxZoom from '../src/components/FieldMaxZoom';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldMaxZoom',
+  component: FieldMaxZoom,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 12);
+
+  return (
+    <Wrapper>
+      <FieldMaxZoom
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldMinZoom.stories.js b/stories/FieldMinZoom.stories.js
new file mode 100644
index 0000000..f88eaee
--- /dev/null
+++ b/stories/FieldMinZoom.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldMinZoom from '../src/components/FieldMinZoom';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldMinZoom',
+  component: FieldMinZoom,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 2);
+
+  return (
+    <Wrapper>
+      <FieldMinZoom
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldSource.stories.js b/stories/FieldSource.stories.js
new file mode 100644
index 0000000..25d9fde
--- /dev/null
+++ b/stories/FieldSource.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSource from '../src/components/FieldSource';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSource',
+  component: FieldSource,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "openmaptiles");
+
+  return (
+    <Wrapper>
+      <FieldSource
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldSourceLayer.stories.js b/stories/FieldSourceLayer.stories.js
new file mode 100644
index 0000000..5d8b0ec
--- /dev/null
+++ b/stories/FieldSourceLayer.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSourceLayer from '../src/components/FieldSourceLayer';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSourceLayer',
+  component: FieldSourceLayer,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "water");
+
+  return (
+    <Wrapper>
+      <FieldSourceLayer
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldType.stories.js b/stories/FieldType.stories.js
new file mode 100644
index 0000000..2312bca
--- /dev/null
+++ b/stories/FieldType.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldType from '../src/components/FieldType';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldType',
+  component: FieldType,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "background");
+
+  return (
+    <Wrapper>
+      <FieldType
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/ui.js b/stories/ui.js
index 41cfb7f..eb6333c 100644
--- a/stories/ui.js
+++ b/stories/ui.js
@@ -11,7 +11,7 @@ export function Describe ({children}) {
 
 export function Wrapper ({children}) {
   return (
-    <div style={{maxWidth: "180px", margin: "0.4em"}}>
+    <div style={{maxWidth: "260px", margin: "0.4em"}}>
       {children}
     </div>
   );

From 2cc179acc14b628d197471c7b79936ce1591adfe Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 9 Jun 2020 19:11:07 +0100
Subject: [PATCH 02/25] Fixed more input accessibility issues, also

 - Added searchParams based router for easier testing
 - Added more stories to the storybook
---
 .storybook/main.js                            |   1 -
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 src/components/App.jsx                        |  92 ++++++-
 src/components/AppToolbar.jsx                 |  25 +-
 src/components/Block.jsx                      |  45 +---
 src/components/FieldArray.jsx                 | 105 +-------
 src/components/FieldAutocomplete.jsx          |  93 +------
 src/components/FieldCheckbox.jsx              |  32 +--
 src/components/FieldColor.jsx                 | 126 +---------
 src/components/FieldComment.jsx               |   7 +-
 src/components/FieldDynamicArray.jsx          | 133 +---------
 src/components/FieldEnum.jsx                  |  41 +--
 src/components/FieldFunction.jsx              |   1 +
 src/components/FieldId.jsx                    |   7 +-
 src/components/FieldJson.jsx                  |  16 ++
 src/components/FieldMaxZoom.jsx               |   7 +-
 src/components/FieldMinZoom.jsx               |   7 +-
 src/components/FieldMultiInput.jsx            |  38 +--
 src/components/FieldNumber.jsx                | 227 +----------------
 src/components/FieldSelect.jsx                |  29 +--
 src/components/FieldSource.jsx                |   7 +-
 src/components/FieldSourceLayer.jsx           |   7 +-
 src/components/FieldString.jsx                |  88 +------
 src/components/FieldType.jsx                  |  11 +-
 src/components/FieldUrl.jsx                   |  95 +------
 src/components/Fieldset.jsx                   |  23 ++
 src/components/FilterEditor.jsx               |  18 +-
 src/components/FilterEditorBlock.jsx          |   6 +-
 src/components/InputArray.jsx                 | 113 +++++++++
 src/components/InputAutocomplete.jsx          | 100 ++++++++
 .../{Button.jsx => InputButton.jsx}           |   3 +-
 src/components/InputCheckbox.jsx              |  34 +++
 src/components/InputColor.jsx                 | 135 ++++++++++
 src/components/InputDynamicArray.jsx          | 138 ++++++++++
 src/components/InputEnum.jsx                  |  49 ++++
 src/components/InputFont.jsx                  |  61 +++++
 .../{FieldJsonEditor.jsx => InputJson.jsx}    |   3 +-
 src/components/InputMultiInput.jsx            |  42 ++++
 src/components/InputNumber.jsx                | 235 ++++++++++++++++++
 src/components/InputSelect.jsx                |  36 +++
 src/components/InputSpec.jsx                  | 139 +++++++++++
 src/components/InputString.jsx                |  95 +++++++
 src/components/InputUrl.jsx                   | 103 ++++++++
 src/components/LayerEditor.jsx                |  64 ++---
 src/components/MapMapboxGl.jsx                |   1 +
 src/components/ModalAdd.jsx                   |  25 +-
 src/components/ModalExport.jsx                |  40 ++-
 src/components/ModalLoading.jsx               |   6 +-
 src/components/ModalOpen.jsx                  |  16 +-
 src/components/ModalSettings.jsx              |  87 +++----
 src/components/ModalSources.jsx               |  62 ++---
 src/components/ModalSourcesTypeEditor.jsx     | 181 +++++++-------
 src/components/ModalSurvey.jsx                |   6 +-
 src/components/SingleFilterEditor.jsx         |  12 +-
 src/components/SpecField.jsx                  | 145 ++---------
 src/components/_DataProperty.jsx              | 166 ++++++++-----
 src/components/_DeleteStopButton.jsx          |   6 +-
 src/components/_ExpressionProperty.jsx        |  14 +-
 src/components/_FieldComment.jsx              |  32 +++
 .../{FieldFont.jsx => _FieldFont.jsx}         |  22 +-
 src/components/_FieldId.jsx                   |  28 +++
 src/components/_FieldMaxZoom.jsx              |  31 +++
 src/components/_FieldMinZoom.jsx              |  31 +++
 src/components/_FieldSource.jsx               |  37 +++
 src/components/_FieldSourceLayer.jsx          |  35 +++
 .../{FieldSymbol.jsx => _FieldSymbol.jsx}     |   0
 src/components/_FieldType.jsx                 |  53 ++++
 src/components/_FunctionButtons.jsx           |  28 +--
 src/components/_SpecProperty.jsx              |   7 +-
 src/components/_ZoomProperty.jsx              | 132 ++++++----
 src/styles/_components.scss                   |   1 +
 src/styles/_input.scss                        |   4 +-
 src/styles/_modal.scss                        |   5 +-
 src/styles/_zoomproperty.scss                 |   4 -
 src/styles/index.scss                         | 132 ++++++++++
 stories/FieldArray.stories.js                 |   2 +
 stories/FieldAutocomplete.stories.js          |   1 +
 stories/FieldCheckbox.stories.js              |   2 +
 stories/FieldColor.stories.js                 |   2 +-
 stories/FieldComment.stories.js               |  26 --
 stories/FieldDynamicArray.stories.js          |   3 +
 stories/FieldEnum.stories.js                  |   6 +-
 stories/FieldFont.stories.js                  |  28 ---
 stories/FieldFunction.stories.js              |  43 ++++
 stories/FieldId.stories.js                    |  26 --
 stories/FieldMaxZoom.stories.js               |  26 --
 stories/FieldMinZoom.stories.js               |  26 --
 stories/FieldMultiInput.stories.js            |   1 +
 stories/FieldNumber.stories.js                |   4 +-
 stories/FieldSelect.stories.js                |   1 +
 stories/FieldSource.stories.js                |  26 --
 stories/FieldSourceLayer.stories.js           |  26 --
 stories/FieldString.stories.js                |  44 +---
 stories/FieldSymbol.stories.js                |  29 ---
 stories/FieldType.stories.js                  |  26 --
 stories/FieldUrl.stories.js                   |   2 +
 stories/IconLayer.stories.js                  |  56 +++++
 stories/InputArray.stories.js                 |  44 ++++
 stories/InputAutocomplete.stories.js          |  29 +++
 stories/InputButton.stories.js                |  21 ++
 stories/InputCheckbox.stories.js              |  41 +++
 stories/InputColor.stories.js                 |  27 ++
 stories/InputDynamicArray.stories.js          |  55 ++++
 stories/InputEnum.stories.js                  |  77 ++++++
 stories/InputJson.stories.js                  |  27 ++
 stories/InputMultiInput.stories.js            |  29 +++
 stories/InputNumber.stories.js                |  44 ++++
 stories/InputSelect.stories.js                |  30 +++
 stories/InputString.stories.js                |  69 +++++
 stories/InputUrl.stories.js                   |  42 ++++
 stories/LayerEditor.stories.js                | 202 +++++++++++++++
 stories/LayerListItem.stories.js              |  58 +++++
 stories/MapMapboxGl.stories.js                | 109 ++++++++
 stories/MapOpenLayers.stories.js              | 112 +++++++++
 stories/Modal.stories.js                      |  26 ++
 stories/ModalAdd.stories.js                   |  25 ++
 stories/ModalDebug.stories.js                 |  28 +++
 stories/ModalExport.stories.js                |  26 ++
 stories/ModalLoading.stories.js               |  25 ++
 stories/ModalOpen.stories.js                  |  31 +++
 stories/ModalSettings.stories.js              |  29 +++
 stories/ModalShortcuts.stories.js             |   0
 stories/ModalSources.stories.js               |  32 +++
 ...tton.stories.js => ModalSurvey.stories.js} |  20 +-
 stories/ScrollContainer.stories.js            |  26 ++
 stories/ui.js                                 |   8 +
 127 files changed, 3858 insertions(+), 1832 deletions(-)
 create mode 100644 src/components/FieldJson.jsx
 create mode 100644 src/components/Fieldset.jsx
 create mode 100644 src/components/InputArray.jsx
 create mode 100644 src/components/InputAutocomplete.jsx
 rename src/components/{Button.jsx => InputButton.jsx} (93%)
 create mode 100644 src/components/InputCheckbox.jsx
 create mode 100644 src/components/InputColor.jsx
 create mode 100644 src/components/InputDynamicArray.jsx
 create mode 100644 src/components/InputEnum.jsx
 create mode 100644 src/components/InputFont.jsx
 rename src/components/{FieldJsonEditor.jsx => InputJson.jsx} (98%)
 create mode 100644 src/components/InputMultiInput.jsx
 create mode 100644 src/components/InputNumber.jsx
 create mode 100644 src/components/InputSelect.jsx
 create mode 100644 src/components/InputSpec.jsx
 create mode 100644 src/components/InputString.jsx
 create mode 100644 src/components/InputUrl.jsx
 create mode 100644 src/components/_FieldComment.jsx
 rename src/components/{FieldFont.jsx => _FieldFont.jsx} (74%)
 create mode 100644 src/components/_FieldId.jsx
 create mode 100644 src/components/_FieldMaxZoom.jsx
 create mode 100644 src/components/_FieldMinZoom.jsx
 create mode 100644 src/components/_FieldSource.jsx
 create mode 100644 src/components/_FieldSourceLayer.jsx
 rename src/components/{FieldSymbol.jsx => _FieldSymbol.jsx} (100%)
 create mode 100644 src/components/_FieldType.jsx
 delete mode 100644 stories/FieldComment.stories.js
 delete mode 100644 stories/FieldFont.stories.js
 create mode 100644 stories/FieldFunction.stories.js
 delete mode 100644 stories/FieldId.stories.js
 delete mode 100644 stories/FieldMaxZoom.stories.js
 delete mode 100644 stories/FieldMinZoom.stories.js
 delete mode 100644 stories/FieldSource.stories.js
 delete mode 100644 stories/FieldSourceLayer.stories.js
 delete mode 100644 stories/FieldSymbol.stories.js
 delete mode 100644 stories/FieldType.stories.js
 create mode 100644 stories/IconLayer.stories.js
 create mode 100644 stories/InputArray.stories.js
 create mode 100644 stories/InputAutocomplete.stories.js
 create mode 100644 stories/InputButton.stories.js
 create mode 100644 stories/InputCheckbox.stories.js
 create mode 100644 stories/InputColor.stories.js
 create mode 100644 stories/InputDynamicArray.stories.js
 create mode 100644 stories/InputEnum.stories.js
 create mode 100644 stories/InputJson.stories.js
 create mode 100644 stories/InputMultiInput.stories.js
 create mode 100644 stories/InputNumber.stories.js
 create mode 100644 stories/InputSelect.stories.js
 create mode 100644 stories/InputString.stories.js
 create mode 100644 stories/InputUrl.stories.js
 create mode 100644 stories/LayerEditor.stories.js
 create mode 100644 stories/LayerListItem.stories.js
 create mode 100644 stories/MapMapboxGl.stories.js
 create mode 100644 stories/MapOpenLayers.stories.js
 create mode 100644 stories/Modal.stories.js
 create mode 100644 stories/ModalAdd.stories.js
 create mode 100644 stories/ModalDebug.stories.js
 create mode 100644 stories/ModalExport.stories.js
 create mode 100644 stories/ModalLoading.stories.js
 create mode 100644 stories/ModalOpen.stories.js
 create mode 100644 stories/ModalSettings.stories.js
 create mode 100644 stories/ModalShortcuts.stories.js
 create mode 100644 stories/ModalSources.stories.js
 rename stories/{Button.stories.js => ModalSurvey.stories.js} (55%)
 create mode 100644 stories/ScrollContainer.stories.js

diff --git a/.storybook/main.js b/.storybook/main.js
index 81ab3a1..55c1c31 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,7 +16,6 @@ module.exports = {
       ...config,
       module: {
         rules: [
-          ...config.module.rules,
           ...rules,
         ]
       }
diff --git a/package-lock.json b/package-lock.json
index 4c73eae..ed128af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 047d86e..77c9c20 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/src/components/App.jsx b/src/components/App.jsx
index bd91f0f..a88cd56 100644
--- a/src/components/App.jsx
+++ b/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) {
diff --git a/src/components/AppToolbar.jsx b/src/components/AppToolbar.jsx
index 758a097..052e1ee 100644
--- a/src/components/AppToolbar.jsx
+++ b/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,
       },
     ];
@@ -242,13 +248,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>
diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index c462203..4f798d0 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -50,44 +50,15 @@ export default class Block extends React.Component {
         "maputnik-input-block--wide": this.props.wideMode,
         "maputnik-action-block": this.props.action
       })}
-      >
-      {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 &&
-      <label className="maputnik-input-block-label">
-        {this.props.label}
-      </label>
-      }
-      {this.props.action &&
-      <div className="maputnik-input-block-action">
-        {this.props.action}
-      </div>
-      }
-      <div className="maputnik-input-block-content">
-        {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>
-          })}
+    >
+      <label>
+        <div className="maputnik-input-block-label">
+          {this.props.label}
         </div>
-      }
-      {this.props.fieldSpec &&
-      <div
-        className="maputnik-doc-inline"
-        style={{display: this.state.showDoc ? '' : 'none'}}
-      >
-        <Doc fieldSpec={this.props.fieldSpec} />
-      </div>
-      }
+        <div className="maputnik-input-block-content">
+          {this.props.children}
+        </div>
+      </label>
     </div>
   }
 }
diff --git a/src/components/FieldArray.jsx b/src/components/FieldArray.jsx
index 7c78961..00103fc 100644
--- a/src/components/FieldArray.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldAutocomplete.jsx b/src/components/FieldAutocomplete.jsx
index 47c4864..da63105 100644
--- a/src/components/FieldAutocomplete.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldCheckbox.jsx b/src/components/FieldCheckbox.jsx
index 066f3c8..7cdc08b 100644
--- a/src/components/FieldCheckbox.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldColor.jsx b/src/components/FieldColor.jsx
index 1f73b4e..2e9067b 100644
--- a/src/components/FieldColor.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldComment.jsx b/src/components/FieldComment.jsx
index d64ca2e..9c6125e 100644
--- a/src/components/FieldComment.jsx
+++ b/src/components/FieldComment.jsx
@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Block from './Block'
-import FieldString from './FieldString'
+import InputString from './InputString'
 
-export default class BlockComment extends React.Component {
+export default class FieldComment extends React.Component {
   static propTypes = {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
@@ -20,7 +20,7 @@ export default class BlockComment extends React.Component {
       fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
     >
-      <FieldString
+      <InputString
         multi={true}
         value={this.props.value}
         onChange={this.props.onChange}
@@ -29,4 +29,3 @@ export default class BlockComment extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldDynamicArray.jsx b/src/components/FieldDynamicArray.jsx
index c8f3b71..47bbbaf 100644
--- a/src/components/FieldDynamicArray.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldEnum.jsx b/src/components/FieldEnum.jsx
index a9e89a0..f4268ec 100644
--- a/src/components/FieldEnum.jsx
+++ b/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>
   }
 }
diff --git a/src/components/FieldFunction.jsx b/src/components/FieldFunction.jsx
index 3cb25a2..ac5887b 100644
--- a/src/components/FieldFunction.jsx
+++ b/src/components/FieldFunction.jsx
@@ -315,6 +315,7 @@ export default class FieldFunction  extends React.Component {
       )
     }
     else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
       specField = (
         <DataProperty
           errors={this.props.errors}
diff --git a/src/components/FieldId.jsx b/src/components/FieldId.jsx
index ebeedc9..6a857f9 100644
--- a/src/components/FieldId.jsx
+++ b/src/components/FieldId.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldString from './FieldString'
+import InputString from './InputString'
 
-export default class BlockId extends React.Component {
+export default class FieldId extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string.isRequired,
@@ -18,11 +18,10 @@ export default class BlockId extends React.Component {
       data-wd-key={this.props.wdKey}
       error={this.props.error}
     >
-      <FieldString
+      <InputString
         value={this.props.value}
         onChange={this.props.onChange}
       />
     </Block>
   }
 }
-
diff --git a/src/components/FieldJson.jsx b/src/components/FieldJson.jsx
new file mode 100644
index 0000000..1f6ccea
--- /dev/null
+++ b/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} />
+  }
+}
+
diff --git a/src/components/FieldMaxZoom.jsx b/src/components/FieldMaxZoom.jsx
index a032915..2d38ad3 100644
--- a/src/components/FieldMaxZoom.jsx
+++ b/src/components/FieldMaxZoom.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldNumber from './FieldNumber'
+import InputNumber from './InputNumber'
 
-export default class BlockMaxZoom extends React.Component {
+export default class FieldMaxZoom extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
@@ -17,7 +17,7 @@ export default class BlockMaxZoom extends React.Component {
       error={this.props.error}
       data-wd-key="max-zoom"
     >
-      <FieldNumber
+      <InputNumber
         allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}
@@ -28,4 +28,3 @@ export default class BlockMaxZoom extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldMinZoom.jsx b/src/components/FieldMinZoom.jsx
index 99e2953..f0252d7 100644
--- a/src/components/FieldMinZoom.jsx
+++ b/src/components/FieldMinZoom.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldNumber from './FieldNumber'
+import InputNumber from './InputNumber'
 
-export default class BlockMinZoom extends React.Component {
+export default class FieldMinZoom extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
@@ -17,7 +17,7 @@ export default class BlockMinZoom extends React.Component {
       error={this.props.error}
       data-wd-key="min-zoom"
     >
-      <FieldNumber
+      <InputNumber
         allowRange={true}
         value={this.props.value}
         onChange={this.props.onChange}
@@ -28,4 +28,3 @@ export default class BlockMinZoom extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldMultiInput.jsx b/src/components/FieldMultiInput.jsx
index 94d7ba9..ae5daf6 100644
--- a/src/components/FieldMultiInput.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldNumber.jsx b/src/components/FieldNumber.jsx
index a74bb08..0d42ddf 100644
--- a/src/components/FieldNumber.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldSelect.jsx b/src/components/FieldSelect.jsx
index fc54eee..1d279c6 100644
--- a/src/components/FieldSelect.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldSource.jsx b/src/components/FieldSource.jsx
index bcee37f..7dcc96d 100644
--- a/src/components/FieldSource.jsx
+++ b/src/components/FieldSource.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldAutocomplete from './FieldAutocomplete'
+import InputAutocomplete from './InputAutocomplete'
 
-export default class BlockSource extends React.Component {
+export default class FieldSource extends React.Component {
   static propTypes = {
     value: PropTypes.string,
     wdKey: PropTypes.string,
@@ -26,7 +26,7 @@ export default class BlockSource extends React.Component {
       error={this.props.error}
       data-wd-key={this.props.wdKey}
     >
-      <FieldAutocomplete
+      <InputAutocomplete
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
@@ -34,4 +34,3 @@ export default class BlockSource extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldSourceLayer.jsx b/src/components/FieldSourceLayer.jsx
index ff617f4..895d43d 100644
--- a/src/components/FieldSourceLayer.jsx
+++ b/src/components/FieldSourceLayer.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldAutocomplete from './FieldAutocomplete'
+import InputAutocomplete from './InputAutocomplete'
 
-export default class BlockSourceLayer extends React.Component {
+export default class FieldSourceLayer extends React.Component {
   static propTypes = {
     value: PropTypes.string,
     onChange: PropTypes.func,
@@ -23,7 +23,7 @@ export default class BlockSourceLayer extends React.Component {
     return <Block label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
     >
-      <FieldAutocomplete
+      <InputAutocomplete
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
@@ -32,4 +32,3 @@ export default class BlockSourceLayer extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldString.jsx b/src/components/FieldString.jsx
index d061d81..89d9327 100644
--- a/src/components/FieldString.jsx
+++ b/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>
   }
 }
 
diff --git a/src/components/FieldType.jsx b/src/components/FieldType.jsx
index cc44523..d95c1c2 100644
--- a/src/components/FieldType.jsx
+++ b/src/components/FieldType.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Block from './Block'
-import FieldSelect from './FieldSelect'
-import FieldString from './FieldString'
+import InputSelect from './InputSelect'
+import InputString from './InputString'
 
-export default class BlockType extends React.Component {
+export default class FieldType extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string,
@@ -25,13 +25,13 @@ export default class BlockType extends React.Component {
       error={this.props.error}
     >
       {this.props.disabled &&
-        <FieldString
+        <InputString
           value={this.props.value}
           disabled={true}
         />
       }
       {!this.props.disabled &&
-        <FieldSelect
+        <InputSelect
           options={[
             ['background', 'Background'],
             ['fill', 'Fill'],
@@ -50,4 +50,3 @@ export default class BlockType extends React.Component {
     </Block>
   }
 }
-
diff --git a/src/components/FieldUrl.jsx b/src/components/FieldUrl.jsx
index 8132eb8..3c53b19 100644
--- a/src/components/FieldUrl.jsx
+++ b/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>
     );
   }
 }
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.jsx
new file mode 100644
index 0000000..4b7cada
--- /dev/null
+++ b/src/components/Fieldset.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+
+let IDX = 0;
+
+export default class Fieldset extends React.Component {
+  constructor (props) {
+    super(props);
+    this._labelId = `fieldset_label_${(IDX++)}`;
+  }
+
+  render () {
+    const {props} = this;
+
+    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
+      <div className="maputnik-input-block-label" id={this._labelId}>{props.label}</div>
+      <div className="maputnik-input-block-content">
+        {props.children}
+      </div>
+    </div>
+  }
+}
diff --git a/src/components/FilterEditor.jsx b/src/components/FilterEditor.jsx
index 55a04fd..d99d8a9 100644
--- a/src/components/FilterEditor.jsx
+++ b/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"
diff --git a/src/components/FilterEditorBlock.jsx b/src/components/FilterEditorBlock.jsx
index 6c95a6b..7f02b6c 100644
--- a/src/components/FilterEditorBlock.jsx
+++ b/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}
diff --git a/src/components/InputArray.jsx b/src/components/InputArray.jsx
new file mode 100644
index 0000000..dc24362
--- /dev/null
+++ b/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']}
+        />
+      } 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']}
+        />
+      }
+    })
+
+    return (
+      <div className="maputnik-array">
+        {inputs}
+      </div>
+    )
+  }
+}
+
diff --git a/src/components/InputAutocomplete.jsx b/src/components/InputAutocomplete.jsx
new file mode 100644
index 0000000..8d2027b
--- /dev/null
+++ b/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
+        aria-label={this.props['aria-label']}
+        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>
+  }
+}
+
+
diff --git a/src/components/Button.jsx b/src/components/InputButton.jsx
similarity index 93%
rename from src/components/Button.jsx
rename to src/components/InputButton.jsx
index cbddd5a..e9c4b23 100644
--- a/src/components/Button.jsx
+++ b/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
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.jsx
new file mode 100644
index 0000000..e01d99c
--- /dev/null
+++ b/src/components/InputCheckbox.jsx
@@ -0,0 +1,34 @@
+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,
+  }
+
+  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>
+  }
+}
+
diff --git a/src/components/InputColor.jsx b/src/components/InputColor.jsx
new file mode 100644
index 0000000..02fb096
--- /dev/null
+++ b/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>
+  }
+}
+
diff --git a/src/components/InputDynamicArray.jsx b/src/components/InputDynamicArray.jsx
new file mode 100644
index 0000000..05d9a26
--- /dev/null
+++ b/src/components/InputDynamicArray.jsx
@@ -0,0 +1,138 @@
+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)}
+        />
+      }
+      else if (this.props.type === 'number') {
+        input = <InputNumber
+          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)]);
+
+        input = <InputEnum
+          options={options}
+          value={v}
+          onChange={this.changeValue.bind(this, i)}
+        />
+      }
+      else {
+        input = <InputString
+          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}
+        <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>
+  }
+}
+
diff --git a/src/components/InputEnum.jsx b/src/components/InputEnum.jsx
new file mode 100644
index 0000000..f066949
--- /dev/null
+++ b/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} = 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']}
+      />
+    } else {
+      return <InputSelect
+        options={options}
+        value={value || this.props.default}
+        onChange={onChange}
+        aria-label={this.props['aria-label']}
+      />
+    }
+  }
+}
+
diff --git a/src/components/InputFont.jsx b/src/components/InputFont.jsx
new file mode 100644
index 0000000..9fc897b
--- /dev/null
+++ b/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']}
+          value={value}
+          options={this.props.fonts.map(f => [f, f])}
+          onChange={this.changeFont.bind(this, i)}
+        />
+      </li>
+    })
+
+    return (
+      <ul className="maputnik-font">
+        {inputs}
+      </ul>
+    );
+  }
+}
diff --git a/src/components/FieldJsonEditor.jsx b/src/components/InputJson.jsx
similarity index 98%
rename from src/components/FieldJsonEditor.jsx
rename to src/components/InputJson.jsx
index a32774c..54bac98 100644
--- a/src/components/FieldJsonEditor.jsx
+++ b/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>
   }
 }
-
diff --git a/src/components/InputMultiInput.jsx b/src/components/InputMultiInput.jsx
new file mode 100644
index 0000000..a9d2aad
--- /dev/null
+++ b/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>
+  }
+}
+
+
diff --git a/src/components/InputNumber.jsx b/src/components/InputNumber.jsx
new file mode 100644
index 0000000..d660daf
--- /dev/null
+++ b/src/components/InputNumber.jsx
@@ -0,0 +1,235 @@
+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}
+          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
+        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}
+      />
+    }
+  }
+}
+
+
diff --git a/src/components/InputSelect.jsx b/src/components/InputSelect.jsx
new file mode 100644
index 0000000..a138736
--- /dev/null
+++ b/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>
+  }
+}
+
+
diff --git a/src/components/InputSpec.jsx b/src/components/InputSpec.jsx
new file mode 100644
index 0000000..1e470b2
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/components/InputString.jsx b/src/components/InputString.jsx
new file mode 100644
index 0000000..3efd93d
--- /dev/null
+++ b/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,
+    });
+  }
+}
+
+
diff --git a/src/components/InputUrl.jsx b/src/components/InputUrl.jsx
new file mode 100644
index 0000000..dd62caa
--- /dev/null
+++ b/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>
+    );
+  }
+}
+
diff --git a/src/components/LayerEditor.jsx b/src/components/LayerEditor.jsx
index 5868fd5..1479ffc 100644
--- a/src/components/LayerEditor.jsx
+++ b/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,22 +208,24 @@ export default class LayerEditor extends React.Component {
           />
         </div>
       </div>
-      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
-        layer={this.props.layer}
-        onChange={(layer) => {
-          this.props.onLayerChanged(
-            this.props.layerIndex,
-            layer
-          );
-        }}
-      />
+      case 'properties':
+        return <PropertyGroup
+          errors={errorData}
+          layer={this.props.layer}
+          groupFields={fields}
+          spec={this.props.spec}
+          onChange={this.changeProperty.bind(this)}
+        />
+      case 'jsoneditor':
+        return <FieldJson
+          layer={this.props.layer}
+          onChange={(layer) => {
+            this.props.onLayerChanged(
+              this.props.layerIndex,
+              layer
+            );
+          }}
+        />
     }
   }
 
diff --git a/src/components/MapMapboxGl.jsx b/src/components/MapMapboxGl.jsx
index ea08e85..1269934 100644
--- a/src/components/MapMapboxGl.jsx
+++ b/src/components/MapMapboxGl.jsx
@@ -237,3 +237,4 @@ export default class MapMapboxGl extends React.Component {
     }
   }
 }
+
diff --git a/src/components/ModalAdd.jsx b/src/components/ModalAdd.jsx
index 0ed508a..ff4ff70 100644
--- a/src/components/ModalAdd.jsx
+++ b/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>
   }
diff --git a/src/components/ModalExport.jsx b/src/components/ModalExport.jsx
index f1f7ff5..19e0c85 100644
--- a/src/components/ModalExport.jsx
+++ b/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'
@@ -75,42 +74,33 @@ export default class ModalExport extends React.Component {
         </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
+            value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+          />
+          <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
+            value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          />
+          <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>
+            value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+            onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          />
         </div>
 
-        <Button
+        <InputButton
           onClick={this.downloadStyle.bind(this)}
           title="Download style"
         >
           <MdFileDownload />
           Download
-        </Button>
+        </InputButton>
       </div>
 
     </Modal>
diff --git a/src/components/ModalLoading.jsx b/src/components/ModalLoading.jsx
index 6c34485..07303c3 100644
--- a/src/components/ModalLoading.jsx
+++ b/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>
   }
diff --git a/src/components/ModalOpen.jsx b/src/components/ModalOpen.jsx
index 15d564c..42bde38 100644
--- a/src/components/ModalOpen.jsx
+++ b/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,7 +22,7 @@ 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)}
@@ -38,7 +38,7 @@ class PublicStyle extends React.Component {
             backgroundImage: `url(${this.props.thumbnailUrl})`
           }}
         ></div>
-      </Button>
+      </InputButton>
     </div>
   }
 }
@@ -201,7 +201,7 @@ export default class ModalOpen extends React.Component {
             <h2>Upload Style</h2>
             <p>Upload a JSON style from your computer.</p>
             <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-              <Button className="maputnik-upload-button"><MdFileUpload /> Upload</Button>
+              <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
 
@@ -211,7 +211,7 @@ export default class ModalOpen extends React.Component {
               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
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
@@ -221,12 +221,12 @@ 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>
diff --git a/src/components/ModalSettings.jsx b/src/components/ModalSettings.jsx
index 831d0ca..c3e733a 100644
--- a/src/components/ModalSettings.jsx
+++ b/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
-        label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
-        fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
-      >
         <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
+          fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
           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
-        label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
-        fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
-      >
         <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
+          fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
           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
-        label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
-        fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
-      >
         <FieldString {...inputProps}
+          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
+          fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
           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
-        label={fieldSpecAdditional.maputnik.style_renderer.label}
-        fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
-      >
         <FieldSelect {...inputProps}
+          label={fieldSpecAdditional.maputnik.style_renderer.label}
+          fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
           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>
   }
diff --git a/src/components/ModalSources.jsx b/src/components/ModalSources.jsx
index 2d6583c..475aa45 100644
--- a/src/components/ModalSources.jsx
+++ b/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,13 @@ 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
           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,41 +207,41 @@ 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
-          value={this.state.sourceId}
-          onChange={v => this.setState({ sourceId: v})}
-        />
-      </Block>
-      <Block label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
-        <FieldSelect
-          options={[
-            ['geojson_json', 'GeoJSON (JSON)'],
-            ['geojson_url', 'GeoJSON (URL)'],
-            ['tilejson_vector', 'Vector (TileJSON URL)'],
-            ['tilexyz_vector', 'Vector (XYZ URLs)'],
-            ['tilejson_raster', 'Raster (TileJSON URL)'],
-            ['tilexyz_raster', 'Raster (XYZ URL)'],
-            ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
-            ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
-            ['image', 'Image'],
-            ['video', 'Video'],
-          ]}
-          onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
-          value={this.state.mode}
-        />
-      </Block>
+      <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})}
+      />
+      <FieldSelect
+        label={"Source Type"}
+        fieldSpec={sourceTypeFieldSpec}
+        options={[
+          ['geojson_json', 'GeoJSON (JSON)'],
+          ['geojson_url', 'GeoJSON (URL)'],
+          ['tilejson_vector', 'Vector (TileJSON URL)'],
+          ['tilexyz_vector', 'Vector (XYZ URLs)'],
+          ['tilejson_raster', 'Raster (TileJSON URL)'],
+          ['tilexyz_raster', 'Raster (XYZ URL)'],
+          ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
+          ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
+          ['image', 'Image'],
+          ['video', 'Video'],
+        ]}
+        onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
+        value={this.state.mode}
+      />
       <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>
   }
 }
diff --git a/src/components/ModalSourcesTypeEditor.jsx b/src/components/ModalSourcesTypeEditor.jsx
index 1ce995e..4a84b24 100644
--- a/src/components/ModalSourcesTypeEditor.jsx
+++ b/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
-          value={this.props.source.url}
-          onChange={url => this.props.onChange({
-            ...this.props.source,
-            url: url
-          })}
-        />
-      </Block>
+      <FieldUrl
+        label={"TileJSON URL"}
+        fieldSpec={latest.source_vector.url}
+        value={this.props.source.url}
+        onChange={url => this.props.onChange({
+          ...this.props.source,
+          url: url
+        })}
+      />
       {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
-        type="url"
-        value={tiles}
-        onChange={this.changeTileUrls.bind(this)}
-      />
-    </Block>
+    return <FieldDynamicArray
+      label={"Tile URL"}
+      fieldSpec={latest.source_vector.tiles}
+      type="url"
+      value={tiles}
+      onChange={this.changeTileUrls.bind(this)}
+    />
   }
 
   render() {
     return <div>
       {this.renderTileUrls()}
-      <Block label={"Min Zoom"} fieldSpec={latest.source_vector.minzoom}>
-        <FieldNumber
-          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
-          value={this.props.source.maxzoom || 22}
-          onChange={maxzoom => this.props.onChange({
-            ...this.props.source,
-            maxzoom: maxzoom
-          })}
-        />
-      </Block>
+      <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
+        })}
+      />
+      <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
+        })}
+      />
       {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
-          value={this.props.source.url}
-          onChange={url => this.props.onChange({
-            ...this.props.source,
-            url,
-          })}
-        />
-      </Block>
+      <FieldUrl
+        label={"Image URL"}
+        fieldSpec={latest.source_image.url}
+        value={this.props.source.url}
+        onChange={url => this.props.onChange({
+          ...this.props.source,
+          url,
+        })}
+      />
       {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
-          <Block label={`Coord ${label}`} key={label}>
-            <FieldArray
-              length={2}
-              type="number"
-              value={this.props.source.coordinates[idx]}
-              default={[0, 0]}
-              onChange={(val) => changeCoord(idx, val)}
-            />
-          </Block>
+          <FieldArray
+            label={`Coord ${label}`}
+            key={label}
+            length={2}
+            type="number"
+            value={this.props.source.coordinates[idx]}
+            default={[0, 0]}
+            onChange={(val) => changeCoord(idx, val)}
+          />
         );
       })}
     </div>
@@ -155,25 +154,25 @@ class VideoSourceEditor extends React.Component {
     }
 
     return <div>
-      <Block label={"Video URL"} fieldSpec={latest.source_video.urls}>
-        <FieldDynamicArray
-          type="string"
-          value={this.props.source.urls}
-          default={""}
-          onChange={changeUrls}
-        />
-      </Block>
+      <FieldDynamicArray
+        label={"Video URL"}
+        fieldSpec={latest.source_video.urls}
+        type="string"
+        value={this.props.source.urls}
+        default={""}
+        onChange={changeUrls}
+      />
       {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
-          <Block label={`Coord ${label}`} key={label}>
-            <FieldArray
-              length={2}
-              type="number"
-              value={this.props.source.coordinates[idx]}
-              default={[0, 0]}
-              onChange={val => changeCoord(idx, val)}
-            />
-          </Block>
+          <FieldArray
+            label={`Coord ${label}`}
+            key={label}
+            length={2}
+            type="number"
+            value={this.props.source.coordinates[idx]}
+            default={[0, 0]}
+            onChange={val => changeCoord(idx, val)}
+          />
         );
       })}
     </div>
@@ -187,15 +186,15 @@ class GeoJSONSourceUrlEditor extends React.Component {
   }
 
   render() {
-    return <Block label={"GeoJSON URL"} fieldSpec={latest.source_geojson.data}>
-      <FieldUrl
-        value={this.props.source.data}
-        onChange={data => this.props.onChange({
-          ...this.props.source,
-          data: data
-        })}
-      />
-    </Block>
+    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
+      })}
+    />
   }
 }
 
@@ -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,16 +246,16 @@ 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
-            options={Object.keys(latest.source_raster_dem.encoding.values)}
-            onChange={encoding => this.props.onChange({
-              ...this.props.source,
-              encoding: encoding
-            })}
-            value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
-          />
-        </Block>
+        <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,
+            encoding: encoding
+          })}
+          value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
+        />
       </TileURLSourceEditor>
       case 'image': return <ImageSourceEditor {...commonProps} />
       case 'video': return <VideoSourceEditor {...commonProps} />
diff --git a/src/components/ModalSurvey.jsx b/src/components/ModalSurvey.jsx
index 9087142..13ab939 100644
--- a/src/components/ModalSurvey.jsx
+++ b/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>
diff --git a/src/components/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.jsx
index 676f78c..2b09431 100644
--- a/src/components/SingleFilterEditor.jsx
+++ b/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,14 @@ export default class SingleFilterEditor extends React.Component {
 
     return <div className="maputnik-filter-editor-single">
       <div className="maputnik-filter-editor-property">
-        <FieldAutocomplete
+        <InputAutocomplete
           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
           value={filterOp}
           onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
           options={otherFilterOps}
@@ -79,7 +79,7 @@ export default class SingleFilterEditor extends React.Component {
       </div>
       {filterArgs.length > 0 &&
       <div className="maputnik-filter-editor-args">
-        <FieldString
+        <InputString
           value={filterArgs.join(',')}
           onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
         />
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index dc6d2df..45be8a2 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -1,132 +1,41 @@
 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: Fieldset,
+  number: Block,
+  boolean: Block,
+  array: Fieldset,
+  resolvedImage: Block,
+  number: Block,
+  string: 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;
+    let TypeBlock = typeMap[fieldType];
+
+    if (!TypeBlock) {
+      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}
-                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>
-    );
+    return <TypeBlock label={props.label}>
+      <InputSpec {...props} />
+    </TypeBlock>
   }
 }
+
diff --git a/src/components/_DataProperty.jsx b/src/components/_DataProperty.jsx
index 6c0a4ce..7b12bb9 100644
--- a/src/components/_DataProperty.jsx
+++ b/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'
@@ -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);
 
@@ -188,6 +194,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 +202,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 +231,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 +263,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 +275,83 @@ export default class DataProperty extends React.Component {
     }
 
     return <div className="maputnik-data-spec-block">
-      <div className="maputnik-data-spec-property">
-        <Block
-          fieldSpec={this.props.fieldSpec}
-          label={labelFromFieldName(this.props.fieldName)}
-        >
-          <div className="maputnik-data-spec-property-group">
-            <Doc
-              label="Type"
-            />
+      <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">
-              <FieldSelect
+              <InputSelect
                 value={this.props.value.type}
                 onChange={propVal => this.changeDataProperty("type", propVal)}
                 title={"Select a type of data scale (default is 'categorical')."}
                 options={this.getDataFunctionTypes(this.props.fieldSpec)}
               />
             </div>
-          </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"
+            <Block
+              label={"Default"}
+            >
+              <InputSpec
+                fieldName={this.props.fieldName}
+                fieldSpec={this.props.fieldSpec}
+                value={this.props.value.default}
+                onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
               />
-              <div className="maputnik-data-spec-property-input">
-                <SpecField
-                  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>
-      {dataFields &&
-        <>
-          {dataFields}
-          <Button
-            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
-        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>
+          <div className="maputnik-toolbox">
+            {dataFields &&
+              <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
+              </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
+            </InputButton>
+          </div>
+        </div>
+      </fieldset>
     </div>
   }
 }
diff --git a/src/components/_DeleteStopButton.jsx b/src/components/_DeleteStopButton.jsx
index 840e1c3..d387cb3 100644
--- a/src/components/_DeleteStopButton.jsx
+++ b/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>
   }
 }
diff --git a/src/components/_ExpressionProperty.jsx b/src/components/_ExpressionProperty.jsx
index f7f6803..09bdfda 100644
--- a/src/components/_ExpressionProperty.jsx
+++ b/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",
diff --git a/src/components/_FieldComment.jsx b/src/components/_FieldComment.jsx
new file mode 100644
index 0000000..d64ca2e
--- /dev/null
+++ b/src/components/_FieldComment.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Block from './Block'
+import FieldString from './FieldString'
+
+export default class BlockComment 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"
+    >
+      <FieldString
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </Block>
+  }
+}
+
diff --git a/src/components/FieldFont.jsx b/src/components/_FieldFont.jsx
similarity index 74%
rename from src/components/FieldFont.jsx
rename to src/components/_FieldFont.jsx
index 2aece10..cd6ca15 100644
--- a/src/components/FieldFont.jsx
+++ b/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}
-        value={value}
-        options={this.props.fonts.map(f => [f, f])}
-        onChange={this.changeFont.bind(this, i)}
-      />
+      >
+        <FieldAutocomplete
+          value={value}
+          options={this.props.fonts.map(f => [f, f])}
+          onChange={this.changeFont.bind(this, i)}
+        />
+      </li>
     })
 
-    return <div className="maputnik-font">
-      {inputs}
-    </div>
+    return <Block label={this.props.label}>
+      <ul className="maputnik-font">
+        {inputs}
+      </ul>
+    </Block>
   }
 }
 
diff --git a/src/components/_FieldId.jsx b/src/components/_FieldId.jsx
new file mode 100644
index 0000000..ebeedc9
--- /dev/null
+++ b/src/components/_FieldId.jsx
@@ -0,0 +1,28 @@
+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'
+
+export default class BlockId 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}
+    >
+      <FieldString
+        value={this.props.value}
+        onChange={this.props.onChange}
+      />
+    </Block>
+  }
+}
+
diff --git a/src/components/_FieldMaxZoom.jsx b/src/components/_FieldMaxZoom.jsx
new file mode 100644
index 0000000..a032915
--- /dev/null
+++ b/src/components/_FieldMaxZoom.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldNumber from './FieldNumber'
+
+export default class BlockMaxZoom 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"
+    >
+      <FieldNumber
+        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>
+  }
+}
+
diff --git a/src/components/_FieldMinZoom.jsx b/src/components/_FieldMinZoom.jsx
new file mode 100644
index 0000000..99e2953
--- /dev/null
+++ b/src/components/_FieldMinZoom.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldNumber from './FieldNumber'
+
+export default class BlockMinZoom 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"
+    >
+      <FieldNumber
+        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>
+  }
+}
+
diff --git a/src/components/_FieldSource.jsx b/src/components/_FieldSource.jsx
new file mode 100644
index 0000000..bcee37f
--- /dev/null
+++ b/src/components/_FieldSource.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldAutocomplete from './FieldAutocomplete'
+
+export default class BlockSource 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}
+    >
+      <FieldAutocomplete
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds.map(src => [src, src])}
+      />
+    </Block>
+  }
+}
+
diff --git a/src/components/_FieldSourceLayer.jsx b/src/components/_FieldSourceLayer.jsx
new file mode 100644
index 0000000..ff617f4
--- /dev/null
+++ b/src/components/_FieldSourceLayer.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldAutocomplete from './FieldAutocomplete'
+
+export default class BlockSourceLayer 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"
+    >
+      <FieldAutocomplete
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds.map(l => [l, l])}
+      />
+    </Block>
+  }
+}
+
diff --git a/src/components/FieldSymbol.jsx b/src/components/_FieldSymbol.jsx
similarity index 100%
rename from src/components/FieldSymbol.jsx
rename to src/components/_FieldSymbol.jsx
diff --git a/src/components/_FieldType.jsx b/src/components/_FieldType.jsx
new file mode 100644
index 0000000..cc44523
--- /dev/null
+++ b/src/components/_FieldType.jsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+import Block from './Block'
+import FieldSelect from './FieldSelect'
+import FieldString from './FieldString'
+
+export default class BlockType 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 &&
+        <FieldString
+          value={this.props.value}
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <FieldSelect
+          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>
+  }
+}
+
diff --git a/src/components/_FunctionButtons.jsx b/src/components/_FunctionButtons.jsx
index eeda73c..bacd344 100644
--- a/src/components/_FunctionButtons.jsx
+++ b/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>
     }
   }
 }
diff --git a/src/components/_SpecProperty.jsx b/src/components/_SpecProperty.jsx
index 43f2448..e4df518 100644
--- a/src/components/_SpecProperty.jsx
+++ b/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>
+    />
   }
 }
diff --git a/src/components/_ZoomProperty.jsx b/src/components/_ZoomProperty.jsx
index 5a088f5..79ba4d9 100644
--- a/src/components/_ZoomProperty.jsx
+++ b/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'
@@ -143,52 +145,92 @@ 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
-              value={zoomLevel}
-              onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
-              min={0}
-              max={22}
-            />
-          </div>
-          <div className="maputnik-zoom-spec-property-stop-value">
-            <SpecField
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={value}
-              onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
-            />
-          </div>
-        </div>
-      </Block>
+        <td>
+          <InputNumber
+            value={zoomLevel}
+            onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
+            min={0}
+            max={22}
+          />
+        </td>
+        <td>
+          <InputSpec
+            fieldName={this.props.fieldName}
+            fieldSpec={this.props.fieldSpec}
+            value={value}
+            onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
+          />
+        </td>
+        <td>
+          {deleteStopBtn}
+        </td>
+      </tr>
     });
 
-    return <div className="maputnik-zoom-spec-property">
-      {zoomFields}
-      <Button
-        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
-        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>
+    // 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.changeDataProperty("type", 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}
+              </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
+            </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
+            </InputButton>
+          </div>
+        </div>
+      </fieldset>
     </div>
   }
+
+  getDataFunctionTypes(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return ["categorical", "interval", "exponential", "identity", "interpolate"]
+    }
+    else {
+      return ["categorical", "interval", "identity", "interpolate"]
+    }
+  }
+
 }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index eedefb5..d86896b 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -183,6 +183,7 @@
   .maputnik-input-block-label {
     display: inline-block;
     width: 32%;
+    margin-bottom: $margin-3;
   }
 
   .maputnik-input-block-action {
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 9f19d58..16f08bc 100644
--- a/src/styles/_input.scss
+++ b/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);
     }
   }
 
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 5e321f2..b1413fe 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -8,6 +8,9 @@
   z-index: 3;
   position: relative;
   font-family: $font-family;
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
 }
 
 .maputnik-modal-section {
@@ -50,7 +53,7 @@
 }
 
 .maputnik-modal-scroller {
-  max-height: calc(100vh - 35px);
+  flex: 1;
   overflow-y: auto;
 }
 
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 38e26c5..1108691 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -73,10 +73,6 @@
     width: 30%;
   }
 
-  .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
-    visibility: hidden;
-  }
-
   .maputnik-input-block-content {
     width: 70%;
   }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 11cca10..8acf3a2 100644
--- a/src/styles/index.scss
+++ b/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;
+  }
+}
+
diff --git a/stories/FieldArray.stories.js b/stories/FieldArray.stories.js
index 0ee6aab..2b4e9db 100644
--- a/stories/FieldArray.stories.js
+++ b/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}
diff --git a/stories/FieldAutocomplete.stories.js b/stories/FieldAutocomplete.stories.js
index b39eace..0d2ac9e 100644
--- a/stories/FieldAutocomplete.stories.js
+++ b/stories/FieldAutocomplete.stories.js
@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldAutocomplete
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
diff --git a/stories/FieldCheckbox.stories.js b/stories/FieldCheckbox.stories.js
index 5e7b6f0..4c009a5 100644
--- a/stories/FieldCheckbox.stories.js
+++ b/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}
       />
diff --git a/stories/FieldColor.stories.js b/stories/FieldColor.stories.js
index 31a35ac..b88b792 100644
--- a/stories/FieldColor.stories.js
+++ b/stories/FieldColor.stories.js
@@ -17,7 +17,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldColor
-        name="color"
+        label="Foobar"
         value={color}
         onChange={setColor}
       />
diff --git a/stories/FieldComment.stories.js b/stories/FieldComment.stories.js
deleted file mode 100644
index 6c815d9..0000000
--- a/stories/FieldComment.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldComment from '../src/components/FieldComment';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldComment',
-  component: FieldComment,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "Hello\nworld");
-
-  return (
-    <Wrapper>
-      <FieldComment
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldDynamicArray.stories.js b/stories/FieldDynamicArray.stories.js
index 85555fd..1fef7d9 100644
--- a/stories/FieldDynamicArray.stories.js
+++ b/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}
diff --git a/stories/FieldEnum.stories.js b/stories/FieldEnum.stories.js
index 3d1cd91..a048689 100644
--- a/stories/FieldEnum.stories.js
+++ b/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}
diff --git a/stories/FieldFont.stories.js b/stories/FieldFont.stories.js
deleted file mode 100644
index be1bdad..0000000
--- a/stories/FieldFont.stories.js
+++ /dev/null
@@ -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>
-  );
-};
-
diff --git a/stories/FieldFunction.stories.js b/stories/FieldFunction.stories.js
new file mode 100644
index 0000000..9efca27
--- /dev/null
+++ b/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>
+};
+
diff --git a/stories/FieldId.stories.js b/stories/FieldId.stories.js
deleted file mode 100644
index b2b97ae..0000000
--- a/stories/FieldId.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldId from '../src/components/FieldId';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldId',
-  component: FieldId,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "water");
-
-  return (
-    <Wrapper>
-      <FieldId
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldMaxZoom.stories.js b/stories/FieldMaxZoom.stories.js
deleted file mode 100644
index 729f889..0000000
--- a/stories/FieldMaxZoom.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMaxZoom from '../src/components/FieldMaxZoom';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldMaxZoom',
-  component: FieldMaxZoom,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", 12);
-
-  return (
-    <Wrapper>
-      <FieldMaxZoom
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldMinZoom.stories.js b/stories/FieldMinZoom.stories.js
deleted file mode 100644
index f88eaee..0000000
--- a/stories/FieldMinZoom.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMinZoom from '../src/components/FieldMinZoom';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldMinZoom',
-  component: FieldMinZoom,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", 2);
-
-  return (
-    <Wrapper>
-      <FieldMinZoom
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldMultiInput.stories.js b/stories/FieldMultiInput.stories.js
index 443bb14..444d38a 100644
--- a/stories/FieldMultiInput.stories.js
+++ b/stories/FieldMultiInput.stories.js
@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldMultiInput
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
diff --git a/stories/FieldNumber.stories.js b/stories/FieldNumber.stories.js
index ec6f721..d8738cb 100644
--- a/stories/FieldNumber.stories.js
+++ b/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}
diff --git a/stories/FieldSelect.stories.js b/stories/FieldSelect.stories.js
index 0b78158..011cb4c 100644
--- a/stories/FieldSelect.stories.js
+++ b/stories/FieldSelect.stories.js
@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldSelect
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
diff --git a/stories/FieldSource.stories.js b/stories/FieldSource.stories.js
deleted file mode 100644
index 25d9fde..0000000
--- a/stories/FieldSource.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSource from '../src/components/FieldSource';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSource',
-  component: FieldSource,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "openmaptiles");
-
-  return (
-    <Wrapper>
-      <FieldSource
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldSourceLayer.stories.js b/stories/FieldSourceLayer.stories.js
deleted file mode 100644
index 5d8b0ec..0000000
--- a/stories/FieldSourceLayer.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSourceLayer from '../src/components/FieldSourceLayer';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSourceLayer',
-  component: FieldSourceLayer,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "water");
-
-  return (
-    <Wrapper>
-      <FieldSourceLayer
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldString.stories.js b/stories/FieldString.stories.js
index 2889b45..9a65417 100644
--- a/stories/FieldString.stories.js
+++ b/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}
       />
diff --git a/stories/FieldSymbol.stories.js b/stories/FieldSymbol.stories.js
deleted file mode 100644
index 300eabf..0000000
--- a/stories/FieldSymbol.stories.js
+++ /dev/null
@@ -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>
-  );
-};
-
-
diff --git a/stories/FieldType.stories.js b/stories/FieldType.stories.js
deleted file mode 100644
index 2312bca..0000000
--- a/stories/FieldType.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldType from '../src/components/FieldType';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldType',
-  component: FieldType,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "background");
-
-  return (
-    <Wrapper>
-      <FieldType
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
diff --git a/stories/FieldUrl.stories.js b/stories/FieldUrl.stories.js
index b30d7bc..091cd81 100644
--- a/stories/FieldUrl.stories.js
+++ b/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}
diff --git a/stories/IconLayer.stories.js b/stories/IconLayer.stories.js
new file mode 100644
index 0000000..724cef6
--- /dev/null
+++ b/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>
+};
+
+
+
+
+
+
diff --git a/stories/InputArray.stories.js b/stories/InputArray.stories.js
new file mode 100644
index 0000000..ce50607
--- /dev/null
+++ b/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>
+  );
+};
+
+
diff --git a/stories/InputAutocomplete.stories.js b/stories/InputAutocomplete.stories.js
new file mode 100644
index 0000000..108e918
--- /dev/null
+++ b/stories/InputAutocomplete.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputAutocomplete from '../src/components/InputAutocomplete';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputAutocomplete',
+  component: InputAutocomplete,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "bar");
+
+  return (
+    <InputContainer>
+      <InputAutocomplete
+        label="Foobar"
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
diff --git a/stories/InputButton.stories.js b/stories/InputButton.stories.js
new file mode 100644
index 0000000..e984568
--- /dev/null
+++ b/stories/InputButton.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import InputButton from '../src/components/InputButton';
+import {action} from '@storybook/addon-actions';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'InputButton',
+  component: InputButton,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <InputContainer>
+    <InputButton onClick={action('onClick')}>
+      Hello InputButton
+    </InputButton>
+  </InputContainer>
+);
+
diff --git a/stories/InputCheckbox.stories.js b/stories/InputCheckbox.stories.js
new file mode 100644
index 0000000..0ec0da4
--- /dev/null
+++ b/stories/InputCheckbox.stories.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputCheckbox from '../src/components/InputCheckbox';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputCheckbox',
+  component: InputCheckbox,
+  decorators: [withA11y],
+};
+
+
+export const BasicUnchecked = () => {
+  const [value, setValue] = useActionState("onChange", false);
+
+  return (
+    <InputContainer>
+      <InputCheckbox
+        label="Foobar"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicChecked = () => {
+  const [value, setValue] = useActionState("onChange", true);
+
+  return (
+    <InputContainer>
+      <InputCheckbox
+        label="Foobar"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
diff --git a/stories/InputColor.stories.js b/stories/InputColor.stories.js
new file mode 100644
index 0000000..7d34c57
--- /dev/null
+++ b/stories/InputColor.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputColor from '../src/components/InputColor';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputColor',
+  component: InputColor,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [color, setColor] = useActionState("onChange", "#ff0000");
+
+  return (
+    <InputContainer>
+      <InputColor
+        label="Foobar"
+        value={color}
+        onChange={setColor}
+      />
+    </InputContainer>
+  );
+};
+
diff --git a/stories/InputDynamicArray.stories.js b/stories/InputDynamicArray.stories.js
new file mode 100644
index 0000000..fde4438
--- /dev/null
+++ b/stories/InputDynamicArray.stories.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputDynamicArray from '../src/components/InputDynamicArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputDynamicArray',
+  component: InputDynamicArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+        type="number"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const UrlType = () => {
+  const [value, setValue] = useActionState("onChange", ["http://example.com"]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+        type="url"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const EnumType = () => {
+  const [value, setValue] = useActionState("onChange", ["foo"]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+	      fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
+        type="enum"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
diff --git a/stories/InputEnum.stories.js b/stories/InputEnum.stories.js
new file mode 100644
index 0000000..802a2de
--- /dev/null
+++ b/stories/InputEnum.stories.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputEnum from '../src/components/InputEnum';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputEnum',
+  component: InputEnum,
+  decorators: [withA11y],
+};
+
+
+export const BasicFew = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", "Foo");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicFewWithDefault = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        default={"Baz"}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicMany = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicManyWithDefault = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}A
+        default={"h"}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
+
diff --git a/stories/InputJson.stories.js b/stories/InputJson.stories.js
new file mode 100644
index 0000000..200f532
--- /dev/null
+++ b/stories/InputJson.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import InputJson from '../src/components/InputJson';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'InputJson',
+  component: InputJson,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const layer = {
+    id: "background",
+    type: "background",
+  };
+
+  return <Wrapper>
+    <InputJson
+      layer={layer}
+      onClick={action('onClick')}
+    />
+  </Wrapper>
+};
+
diff --git a/stories/InputMultiInput.stories.js b/stories/InputMultiInput.stories.js
new file mode 100644
index 0000000..05a8aaf
--- /dev/null
+++ b/stories/InputMultiInput.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputMultiInput from '../src/components/InputMultiInput';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputMultiInput',
+  component: InputMultiInput,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <InputContainer>
+      <InputMultiInput
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
diff --git a/stories/InputNumber.stories.js b/stories/InputNumber.stories.js
new file mode 100644
index 0000000..3132275
--- /dev/null
+++ b/stories/InputNumber.stories.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputNumber from '../src/components/InputNumber';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputNumber',
+  component: InputNumber,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <InputContainer>
+      <InputNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Range = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <InputContainer>
+      <InputNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+        min={1}
+        max={24}
+        allowRange={true}
+        rangeStep={1}
+      />
+    </InputContainer>
+  );
+};
+
diff --git a/stories/InputSelect.stories.js b/stories/InputSelect.stories.js
new file mode 100644
index 0000000..48a1497
--- /dev/null
+++ b/stories/InputSelect.stories.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputSelect from '../src/components/InputSelect';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputSelect',
+  component: InputSelect,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "Foo"], ["BAR", "Bar"], ["BAZ", "Baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <InputContainer>
+      <InputSelect
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
+
diff --git a/stories/InputString.stories.js b/stories/InputString.stories.js
new file mode 100644
index 0000000..0d33528
--- /dev/null
+++ b/stories/InputString.stories.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputString from '../src/components/InputString';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputString',
+  component: InputString,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "Hello world");
+
+  return (
+    <InputContainer>
+      <InputString
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const WithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputString
+        value={value}
+        default={"Edit me..."}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Multiline = () => {
+  const [value, setValue] = useActionState("onChange", "Hello\nworld");
+
+  return (
+    <InputContainer>
+      <InputString
+        multi={true}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const MultilineWithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputString
+        multi={true}
+        default={"Edit\nme.."}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
diff --git a/stories/InputUrl.stories.js b/stories/InputUrl.stories.js
new file mode 100644
index 0000000..4b2bd53
--- /dev/null
+++ b/stories/InputUrl.stories.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputUrl from '../src/components/InputUrl';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputUrl',
+  component: InputUrl,
+  decorators: [withA11y],
+};
+
+
+export const Valid = () => {
+  const [value, setValue] = useActionState("onChange", "http://example.com");
+
+  return (
+    <InputContainer>
+      <InputUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Invalid = () => {
+  const [value, setValue] = useActionState("onChange", "foo");
+
+  return (
+    <InputContainer>
+      <InputUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
diff --git a/stories/LayerEditor.stories.js b/stories/LayerEditor.stories.js
new file mode 100644
index 0000000..0af25a8
--- /dev/null
+++ b/stories/LayerEditor.stories.js
@@ -0,0 +1,202 @@
+import React from 'react';
+import LayerEditor from '../src/components/LayerEditor';
+import {action} from '@storybook/addon-actions';
+import {withA11y} from '@storybook/addon-a11y';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+
+
+export default {
+  title: 'LayerEditor',
+  component: LayerEditor,
+  decorators: [withA11y],
+};
+
+export const Background = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "background", type: "background"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Fill = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "fill", type: "fill", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Line = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "line", type: "line", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Symbol = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "symbol", type: "symbol", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Raster = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "raster", type: "raster", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Cirlce = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "circle", type: "circle", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const FillExtrusion = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "fill-extrusion", type: "fill-extrusion", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Heatmap = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "heatmap", type: "heatmap", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Hillshade = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "hillshade", type: "hillshade", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
diff --git a/stories/LayerListItem.stories.js b/stories/LayerListItem.stories.js
new file mode 100644
index 0000000..8870e7c
--- /dev/null
+++ b/stories/LayerListItem.stories.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import LayerList from '../src/components/LayerList';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'LayerList',
+  component: LayerList,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{width: "200px"}}>
+      <LayerList
+        layers={[
+          {
+            id: "background",
+            type: "background",
+          },
+          {
+            id: "water",
+            type: "fill",
+            source: "openmaptiles"
+          },
+          {
+            id: "road_trunk",
+            type: "line",
+            source: "openmaptiles"
+          },
+          {
+            id: "road_minor",
+            type: "line",
+            source: "openmaptiles"
+          },
+          {
+            id: "building",
+            type: "fill",
+            source: "openmaptiles"
+          },
+        ]}
+        selectedLayerIndex={0}
+        onLayersChange={() => {}}
+        onLayerSelect={() => {}}
+        onLayerDestroy={() => {}}
+        onLayerCopy={() => {}}
+        onLayerVisibilityToggle={() => {}}
+        onMoveLayer={() => {}}
+        sources={{}}
+        errors={[]}
+      />
+    </div>
+  </Wrapper>
+);
+
+
diff --git a/stories/MapMapboxGl.stories.js b/stories/MapMapboxGl.stories.js
new file mode 100644
index 0000000..a8dc589
--- /dev/null
+++ b/stories/MapMapboxGl.stories.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import MapMapboxGl from '../src/components/MapMapboxGl';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'MapMapboxGl',
+  component: MapMapboxGl,
+  decorators: [withA11y],
+};
+
+const mapStyle = {
+  "version": 8,
+  "sources": {
+    "test1": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [0, -10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test2": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test3": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [-15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "test1",
+      "type": "circle",
+      "source": "test1",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "red"
+      }
+    },
+    {
+      "id": "test2",
+      "type": "circle",
+      "source": "test2",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "green"
+      }
+    },
+    {
+      "id": "test3",
+      "type": "circle",
+      "source": "test3",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "blue"
+      }
+    }
+  ]
+}
+
+export const Basic = () => {
+  return <div style={{height: "100vh", width: "100vw"}}>
+    <MapMapboxGl
+      mapStyle={mapStyle}
+      inspectModeEnabled={false}
+      replaceAccessTokens={(s) => s}
+    />
+  </div>
+};
+
+
diff --git a/stories/MapOpenLayers.stories.js b/stories/MapOpenLayers.stories.js
new file mode 100644
index 0000000..a8458bd
--- /dev/null
+++ b/stories/MapOpenLayers.stories.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import MapOpenLayers from '../src/components/MapOpenLayers';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'MapOpenLayers',
+  component: MapOpenLayers,
+  decorators: [withA11y],
+};
+
+const mapStyle = {
+  "version": 8,
+  "sources": {
+    "test1": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [0, -10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test2": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test3": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [-15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "test1",
+      "type": "circle",
+      "source": "test1",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "red"
+      }
+    },
+    {
+      "id": "test2",
+      "type": "circle",
+      "source": "test2",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "green"
+      }
+    },
+    {
+      "id": "test3",
+      "type": "circle",
+      "source": "test3",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "blue"
+      }
+    }
+  ]
+}
+
+export const Basic = () => {
+  return <div style={{height: "100vh", width: "100vw", display: "flex"}}>
+    <MapOpenLayers
+      mapStyle={mapStyle}
+      inspectModeEnabled={false}
+      replaceAccessTokens={(s) => s}
+      onChange={() => {}}
+      debugToolbox={true}
+    />
+  </div>
+};
+
+
+
diff --git a/stories/Modal.stories.js b/stories/Modal.stories.js
new file mode 100644
index 0000000..039e512
--- /dev/null
+++ b/stories/Modal.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from '../src/components/Modal';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <Modal title="hello" isOpen={true}>
+        {[...Array(50).keys()].map(() => {
+          return <p>Some text</p>
+        })}
+      </Modal>
+    </div>
+  </Wrapper>
+);
+
+
diff --git a/stories/ModalAdd.stories.js b/stories/ModalAdd.stories.js
new file mode 100644
index 0000000..be28966
--- /dev/null
+++ b/stories/ModalAdd.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ModalAdd from '../src/components/ModalAdd';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalAdd',
+  component: ModalAdd,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalAdd
+        layers={[]}
+        sources={{}}
+        isOpen={true}
+      />
+    </div>
+  </Wrapper>
+);
+
diff --git a/stories/ModalDebug.stories.js b/stories/ModalDebug.stories.js
new file mode 100644
index 0000000..34202a3
--- /dev/null
+++ b/stories/ModalDebug.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import ModalDebug from '../src/components/ModalDebug';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalDebug',
+  component: ModalDebug,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalDebug
+        isOpen={true}
+        renderer="mbgljs"
+        mapboxGlDebugOptions={{}}
+        mapView={{zoom: 1, center: {lat: 0, lng: 0}}}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
diff --git a/stories/ModalExport.stories.js b/stories/ModalExport.stories.js
new file mode 100644
index 0000000..8040397
--- /dev/null
+++ b/stories/ModalExport.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ModalExport from '../src/components/ModalExport';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalExport',
+  component: ModalExport,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalExport
+        isOpen={true}
+        mapStyle={{}}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
diff --git a/stories/ModalLoading.stories.js b/stories/ModalLoading.stories.js
new file mode 100644
index 0000000..bd93459
--- /dev/null
+++ b/stories/ModalLoading.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ModalLoading from '../src/components/ModalLoading';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalLoading',
+  component: ModalLoading,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalLoading
+        isOpen={true}
+        title="Loading"
+        message="Loading 'something.geojson'"
+      />
+    </div>
+  </Wrapper>
+);
+
diff --git a/stories/ModalOpen.stories.js b/stories/ModalOpen.stories.js
new file mode 100644
index 0000000..c97bf45
--- /dev/null
+++ b/stories/ModalOpen.stories.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ModalOpen from '../src/components/ModalOpen';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalOpen',
+  component: ModalOpen,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalOpen
+        isOpen={true}
+        mapStyle={{}}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+        onStyleChanged={action("onStyleChanged")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+
+
+
diff --git a/stories/ModalSettings.stories.js b/stories/ModalSettings.stories.js
new file mode 100644
index 0000000..49f42db
--- /dev/null
+++ b/stories/ModalSettings.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import ModalSettings from '../src/components/ModalSettings';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalSettings',
+  component: ModalSettings,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSettings
+        isOpen={true}
+        mapStyle={{}}
+        onStyleChanged={action("onStyleChanged")}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+
diff --git a/stories/ModalShortcuts.stories.js b/stories/ModalShortcuts.stories.js
new file mode 100644
index 0000000..e69de29
diff --git a/stories/ModalSources.stories.js b/stories/ModalSources.stories.js
new file mode 100644
index 0000000..03bcc65
--- /dev/null
+++ b/stories/ModalSources.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import ModalSources from '../src/components/ModalSources';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalSources',
+  component: ModalSources,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSources
+        isOpen={true}
+        mapStyle={{sources: {}}}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+        onStyleChanged={action("onStyleChanged")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+
+
+
+
diff --git a/stories/Button.stories.js b/stories/ModalSurvey.stories.js
similarity index 55%
rename from stories/Button.stories.js
rename to stories/ModalSurvey.stories.js
index c158d7c..b0bacd7 100644
--- a/stories/Button.stories.js
+++ b/stories/ModalSurvey.stories.js
@@ -1,21 +1,29 @@
 import React from 'react';
-import Button from '../src/components/Button';
+import ModalSurvey from '../src/components/ModalSurvey';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
 import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
-  title: 'Button',
-  component: Button,
+  title: 'ModalSurvey',
+  component: ModalSurvey,
   decorators: [withA11y],
 };
 
 export const Basic = () => (
   <Wrapper>
-    <Button onClick={action('onClick')}>
-      Hello Button
-    </Button>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSurvey
+        isOpen={true}
+      />
+    </div>
   </Wrapper>
 );
 
+
+
+
+
+
+
diff --git a/stories/ScrollContainer.stories.js b/stories/ScrollContainer.stories.js
new file mode 100644
index 0000000..f684f07
--- /dev/null
+++ b/stories/ScrollContainer.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ScrollContainer from '../src/components/ScrollContainer';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ScrollContainer',
+  component: ScrollContainer,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ScrollContainer>
+        {[...Array(50).keys()].map(() => {
+          return <p>Some text</p>
+        })}
+      </ScrollContainer>
+    </div>
+  </Wrapper>
+);
+
+
diff --git a/stories/ui.js b/stories/ui.js
index eb6333c..d04db8a 100644
--- a/stories/ui.js
+++ b/stories/ui.js
@@ -17,3 +17,11 @@ export function Wrapper ({children}) {
   );
 };
 
+export function InputContainer ({children}) {
+  return (
+    <div style={{maxWidth: "171px", margin: "0.4em"}}>
+      {children}
+    </div>
+  );
+};
+

From f911ed3522dec0b639e0a921f38026d1044aad6a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 10:10:40 +0100
Subject: [PATCH 03/25] Fix <InputColor/> issues when trying to close picker.

---
 src/components/Block.jsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 4f798d0..878d98f 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -40,6 +40,23 @@ 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 (contains) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
   render() {
     const errors = [].concat(this.props.error || []);
 
@@ -51,11 +68,11 @@ export default class Block extends React.Component {
         "maputnik-action-block": this.props.action
       })}
     >
-      <label>
+      <label onClick={this.onLabelClick}>
         <div className="maputnik-input-block-label">
           {this.props.label}
         </div>
-        <div className="maputnik-input-block-content">
+        <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
           {this.props.children}
         </div>
       </label>

From f3906c8dd8e7da2c9f15118478ae2092e5cb5564 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 10:25:56 +0100
Subject: [PATCH 04/25] A role="navigation" should not be on <ul/> as it
 changes how screen readers announce them.

---
 src/components/LayerList.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/LayerList.jsx b/src/components/LayerList.jsx
index fccdf22..5d94c60 100644
--- a/src/components/LayerList.jsx
+++ b/src/components/LayerList.jsx
@@ -302,12 +302,14 @@ class LayerListContainer extends React.Component {
           </div>
         </div>
       </header>
-      <ul className="maputnik-layer-list-container"
+      <div
         role="navigation"
         aria-label="Layers list"
       >
-        {listItems}
-      </ul>
+        <ul className="maputnik-layer-list-container">
+          {listItems}
+        </ul>
+      </div>
     </div>
   }
 }

From 40579c3e0c35691bc9eb06c61537464dce3b25d3 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 10:59:44 +0100
Subject: [PATCH 05/25] Added back in action buttons to input label/fieldset

---
 src/components/Block.jsx     |  3 +++
 src/components/Fieldset.jsx  |  7 ++++++-
 src/components/SpecField.jsx |  2 +-
 src/styles/_components.scss  | 12 +++++++++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 878d98f..bf754c5 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -72,6 +72,9 @@ export default class Block extends React.Component {
         <div className="maputnik-input-block-label">
           {this.props.label}
         </div>
+        <div className="maputnik-input-block-action">
+          {this.props.action}
+        </div>
         <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
           {this.props.children}
         </div>
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.jsx
index 4b7cada..aa3b23e 100644
--- a/src/components/Fieldset.jsx
+++ b/src/components/Fieldset.jsx
@@ -14,7 +14,12 @@ export default class Fieldset extends React.Component {
     const {props} = this;
 
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
-      <div className="maputnik-input-block-label" id={this._labelId}>{props.label}</div>
+      <div className="maputnik-input-block-label" id={this._labelId}>
+        {props.label}
+      </div>
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
       <div className="maputnik-input-block-content">
         {props.children}
       </div>
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index 45be8a2..3b4dfcc 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -33,7 +33,7 @@ export default class SpecField extends React.Component {
       TypeBlock = Block;
     }
 
-    return <TypeBlock label={props.label}>
+    return <TypeBlock label={props.label} action={props.action}>
       <InputSpec {...props} />
     </TypeBlock>
   }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index d86896b..3a04689 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -168,11 +168,21 @@
     color: $color-lowgray;
     display: inline-block;
     user-select: none;
-    width: 50%;
+    width: 32%;
     vertical-align: top;
     font-size: 12px;
   }
 
+  &-action {
+    color: $color-lowgray;
+    display: inline-block;
+    user-select: none;
+    width: 18%;
+    vertical-align: top;
+    font-size: 12px;
+    text-align: right;
+  }
+
   &-content {
     display: inline-block;
     width: 50%;

From 8ae6e9fc6146c991acda3c464e8dcf293ba89937 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 13:02:38 +0100
Subject: [PATCH 06/25] Fix to ignore click suppression on inputs

---
 src/components/Block.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index bf754c5..06b77f9 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -51,7 +51,7 @@ export default class Block extends React.Component {
     const nativeEvent = event.nativeEvent;
     const contains = this._blockEl.contains(el);
 
-    if (contains) {
+    if (event.nativeEvent.target.nodeName !== "INPUT" && contains) {
       event.stopPropagation();
       event.preventDefault();
     }

From 5804b3c72a0f3ca30a78777ef1d628a817063923 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 13:04:04 +0100
Subject: [PATCH 07/25] CSS outline fixes for keyboard users.

---
 src/styles/_base.scss  |  8 ++++++--
 src/styles/_input.scss | 26 ++++++++++++++++++++++----
 src/styles/_layer.scss |  2 ++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 9e860f7..0c97d23 100644
--- a/src/styles/_base.scss
+++ b/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 {
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 16f08bc..87d6a0a 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -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 {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 394f6f1..c3cc579 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -143,6 +143,8 @@
     color: inherit;
     text-decoration: none;
     cursor: pointer;
+    // HACK: Remove important
+    outline: none !important;
   }
 
   &-group-header {

From 34299c94ee9c7525ede6d0755bda5fd64754bec1 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 16:22:13 +0100
Subject: [PATCH 08/25] Fixed some 'axe' accessibility checker issues.

---
 src/components/AppToolbar.jsx     |  4 ++--
 src/components/InputCheckbox.jsx  |  4 ++--
 src/components/InputNumber.jsx    |  1 -
 src/components/LayerEditor.jsx    |  4 ++--
 src/components/LayerList.jsx      |  5 +++--
 src/components/LayerListItem.jsx  |  1 +
 src/components/ModalDebug.jsx     | 12 ++++++------
 src/components/ModalExport.jsx    |  6 +++---
 src/components/ModalOpen.jsx      | 17 +++++++++--------
 src/components/ModalShortcuts.jsx |  4 ++--
 src/components/ModalSources.jsx   | 19 ++++++++++---------
 src/styles/_components.scss       |  4 +---
 src/template.html                 |  1 +
 13 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/AppToolbar.jsx b/src/components/AppToolbar.jsx
index 052e1ee..7480210 100644
--- a/src/components/AppToolbar.jsx
+++ b/src/components/AppToolbar.jsx
@@ -184,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"
@@ -278,6 +278,6 @@ export default class AppToolbar extends React.Component {
           </ToolbarLinkHighlighted>
         </div>
       </div>
-    </div>
+    </nav>
   }
 }
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.jsx
index e01d99c..7cf8323 100644
--- a/src/components/InputCheckbox.jsx
+++ b/src/components/InputCheckbox.jsx
@@ -13,7 +13,7 @@ export default class InputCheckbox extends React.Component {
   }
 
   render() {
-    return <label className="maputnik-checkbox-wrapper">
+    return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
@@ -28,7 +28,7 @@ export default class InputCheckbox extends React.Component {
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </label>
+    </div>
   }
 }
 
diff --git a/src/components/InputNumber.jsx b/src/components/InputNumber.jsx
index d660daf..f256288 100644
--- a/src/components/InputNumber.jsx
+++ b/src/components/InputNumber.jsx
@@ -172,7 +172,6 @@ export default class InputNumber extends React.Component {
           step="any"
           spellCheck="false"
           value={value === undefined ? defaultValue : value}
-          aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {
             this._keyboardEvent = true;
diff --git a/src/components/LayerEditor.jsx b/src/components/LayerEditor.jsx
index 1479ffc..f4dbb8e 100644
--- a/src/components/LayerEditor.jsx
+++ b/src/components/LayerEditor.jsx
@@ -290,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"
     >
@@ -332,6 +332,6 @@ export default class LayerEditor extends React.Component {
       >
         {groups}
       </Accordion>
-    </div>
+    </section>
   }
 }
diff --git a/src/components/LayerList.jsx b/src/components/LayerList.jsx
index 5d94c60..cadb166 100644
--- a/src/components/LayerList.jsx
+++ b/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"
@@ -310,7 +311,7 @@ class LayerListContainer extends React.Component {
           {listItems}
         </ul>
       </div>
-    </div>
+    </section>
   }
 }
 
diff --git a/src/components/LayerListItem.jsx b/src/components/LayerListItem.jsx
index f135288..6e8f18c 100644
--- a/src/components/LayerListItem.jsx
+++ b/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}
diff --git a/src/components/ModalDebug.jsx b/src/components/ModalDebug.jsx
index 6b92729..a7e040c 100644
--- a/src/components/ModalDebug.jsx
+++ b/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>
   }
 }
diff --git a/src/components/ModalExport.jsx b/src/components/ModalExport.jsx
index 19e0c85..5af01cc 100644
--- a/src/components/ModalExport.jsx
+++ b/src/components/ModalExport.jsx
@@ -67,8 +67,8 @@ 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>
@@ -101,7 +101,7 @@ export default class ModalExport extends React.Component {
           <MdFileDownload />
           Download
         </InputButton>
-      </div>
+      </section>
 
     </Modal>
   }
diff --git a/src/components/ModalOpen.jsx b/src/components/ModalOpen.jsx
index 42bde38..8ef91be 100644
--- a/src/components/ModalOpen.jsx
+++ b/src/components/ModalOpen.jsx
@@ -27,11 +27,11 @@ class PublicStyle extends React.Component {
         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={{
@@ -200,18 +200,19 @@ export default class ModalOpen extends React.Component {
           <section className="maputnik-modal-section">
             <h2>Upload Style</h2>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+            <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>
-            <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}>
+              <h2>Load from URL</h2>
+              <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>
               <InputUrl
+                aria-label="Style URL"
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
diff --git a/src/components/ModalShortcuts.jsx b/src/components/ModalShortcuts.jsx
index 2710863..ebe8a0e 100644
--- a/src/components/ModalShortcuts.jsx
+++ b/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>
   }
 }
diff --git a/src/components/ModalSources.jsx b/src/components/ModalSources.jsx
index 475aa45..05369e7 100644
--- a/src/components/ModalSources.jsx
+++ b/src/components/ModalSources.jsx
@@ -84,6 +84,7 @@ class ActiveModalSourcesTypeEditor extends React.Component {
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
         <span className="maputnik-space" />
         <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'}}
@@ -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>
   }
 }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 3a04689..8dd491c 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -163,10 +163,10 @@
 // INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
+  display: flex;
 
   &-label {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 32%;
     vertical-align: top;
@@ -175,7 +175,6 @@
 
   &-action {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 18%;
     vertical-align: top;
@@ -184,7 +183,6 @@
   }
 
   &-content {
-    display: inline-block;
     width: 50%;
   }
 }
diff --git a/src/template.html b/src/template.html
index 300e999..cfa2a3e 100644
--- a/src/template.html
+++ b/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>

From 6c751fe1c44c1d3318f8cef1c9b1938dd3a6082f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 17:18:11 +0100
Subject: [PATCH 09/25] Updated maputnik/design to diagnose axe accessibility
 checker issue with SVGs

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ed128af..02c923d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 77c9c20..9facb7e 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^1.10.1",
     "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",

From bfada7cace8d5b89f59def73b4883a1d3c301cf3 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 18:16:43 +0100
Subject: [PATCH 10/25] Added aria-label to things that are otherwise labelled
 in the UI.

---
 src/components/InputArray.jsx         |  4 ++--
 src/components/InputAutocomplete.jsx  |  2 +-
 src/components/InputDynamicArray.jsx  |  5 ++++-
 src/components/InputEnum.jsx          |  7 ++++---
 src/components/InputFont.jsx          |  2 +-
 src/components/SingleFilterEditor.jsx |  3 +++
 src/components/SpecField.jsx          | 26 ++++++++++++++++----------
 src/components/_ZoomProperty.jsx      |  2 ++
 8 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/InputArray.jsx b/src/components/InputArray.jsx
index dc24362..885688f 100644
--- a/src/components/InputArray.jsx
+++ b/src/components/InputArray.jsx
@@ -89,7 +89,7 @@ export default class FieldArray extends React.Component {
           value={value[i]}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label']}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       } else {
         return <InputString
@@ -98,7 +98,7 @@ export default class FieldArray extends React.Component {
           value={value[i]}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
-          aria-label={this.props['aria-label']}
+          aria-label={this.props['aria-label'] || this.props.label}
         />
       }
     })
diff --git a/src/components/InputAutocomplete.jsx b/src/components/InputAutocomplete.jsx
index 8d2027b..c2848f0 100644
--- a/src/components/InputAutocomplete.jsx
+++ b/src/components/InputAutocomplete.jsx
@@ -56,7 +56,6 @@ export default class InputAutocomplete extends React.Component {
       }}
     >
       <Autocomplete
-        aria-label={this.props['aria-label']}
         menuStyle={{
           position: "fixed",
           overflow: "auto",
@@ -68,6 +67,7 @@ export default class InputAutocomplete extends React.Component {
           style: null
         }}
         inputProps={{
+          'aria-label': this.props['aria-label'],
           className: "maputnik-string",
           spellCheck: false
         }}
diff --git a/src/components/InputDynamicArray.jsx b/src/components/InputDynamicArray.jsx
index 05d9a26..73851ff 100644
--- a/src/components/InputDynamicArray.jsx
+++ b/src/components/InputDynamicArray.jsx
@@ -65,27 +65,30 @@ export default class FieldDynamicArray extends React.Component {
         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}
         />
       }
 
diff --git a/src/components/InputEnum.jsx b/src/components/InputEnum.jsx
index f066949..a3dd702 100644
--- a/src/components/InputEnum.jsx
+++ b/src/components/InputEnum.jsx
@@ -26,7 +26,8 @@ export default class InputEnum extends React.Component {
   }
 
   render() {
-    const {options, value, onChange, name} = this.props;
+    const {options, value, onChange, name, label} = this.props;
+    console.log("this.props", this.props)
 
     if(options.length <= 3 && optionsLabelLength(options) <= 20) {
       return <InputMultiInput
@@ -34,14 +35,14 @@ export default class InputEnum extends React.Component {
         options={options}
         value={value || this.props.default}
         onChange={onChange}
-        aria-label={this.props['aria-label']}
+        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']}
+        aria-label={this.props['aria-label'] || label}
       />
     }
   }
diff --git a/src/components/InputFont.jsx b/src/components/InputFont.jsx
index 9fc897b..5354084 100644
--- a/src/components/InputFont.jsx
+++ b/src/components/InputFont.jsx
@@ -44,7 +44,7 @@ export default class FieldFont extends React.Component {
         key={i}
       >
         <InputAutocomplete
-          aria-label={this.props['aria-label']}
+          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)}
diff --git a/src/components/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.jsx
index 2b09431..57661dc 100644
--- a/src/components/SingleFilterEditor.jsx
+++ b/src/components/SingleFilterEditor.jsx
@@ -65,6 +65,7 @@ export default class SingleFilterEditor extends React.Component {
     return <div className="maputnik-filter-editor-single">
       <div className="maputnik-filter-editor-property">
         <InputAutocomplete
+          aria-label="key"
           value={propertyName}
           options={Object.keys(this.props.properties).map(propName => [propName, propName])}
           onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
@@ -72,6 +73,7 @@ export default class SingleFilterEditor extends React.Component {
       </div>
       <div className="maputnik-filter-editor-operator">
         <InputSelect
+          aria-label="function"
           value={filterOp}
           onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
           options={otherFilterOps}
@@ -80,6 +82,7 @@ export default class SingleFilterEditor extends React.Component {
       {filterArgs.length > 0 &&
       <div className="maputnik-filter-editor-args">
         <InputString
+          aria-label="value"
           value={filterArgs.join(',')}
           onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
         />
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index 3b4dfcc..9d73f1c 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -6,14 +6,15 @@ import Fieldset from './Fieldset'
 
 
 const typeMap = {
-  color: Block,
-  enum: Fieldset,
-  number: Block,
-  boolean: Block,
-  array: Fieldset,
-  resolvedImage: Block,
-  number: Block,
-  string: Block
+  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,
 };
 
 export default class SpecField extends React.Component {
@@ -26,9 +27,14 @@ export default class SpecField extends React.Component {
     const {props} = this;
 
     const fieldType = props.fieldSpec.type;
-    let TypeBlock = typeMap[fieldType];
 
-    if (!TypeBlock) {
+    const typeBlockFn = typeMap[fieldType];
+
+    let TypeBlock;
+    if (typeBlockFn) {
+      TypeBlock = typeBlockFn(props);
+    }
+    else {
       console.warn("No such type for '%s'", fieldType);
       TypeBlock = Block;
     }
diff --git a/src/components/_ZoomProperty.jsx b/src/components/_ZoomProperty.jsx
index 79ba4d9..eb55700 100644
--- a/src/components/_ZoomProperty.jsx
+++ b/src/components/_ZoomProperty.jsx
@@ -150,6 +150,7 @@ export default class ZoomProperty extends React.Component {
       >
         <td>
           <InputNumber
+            aria-label="Zoom"
             value={zoomLevel}
             onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
             min={0}
@@ -158,6 +159,7 @@ export default class ZoomProperty extends React.Component {
         </td>
         <td>
           <InputSpec
+            aria-label="Output value"
             fieldName={this.props.fieldName}
             fieldSpec={this.props.fieldSpec}
             value={value}

From 0279daf7bdb665b4f9225da203dfa86ac106b31e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 18:17:25 +0100
Subject: [PATCH 11/25] 'getApplicationNode' doesn't appear to be required as
 the modal is already a dialog

---
 src/components/Modal.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 2179ef9..c7e6ee5 100644
--- a/src/components/Modal.jsx
+++ b/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}

From b83c9a1ad96d81a0b908450e219b89628804d83a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 19:20:18 +0100
Subject: [PATCH 12/25] Fix block styling issues.

---
 src/styles/_components.scss   | 2 ++
 src/styles/_zoomproperty.scss | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 8dd491c..6406dd7 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -164,6 +164,7 @@
 .maputnik-input-block {
   margin: $margin-3;
   display: flex;
+  flex-wrap: wrap;
 
   &-label {
     color: $color-lowgray;
@@ -279,6 +280,7 @@
   .maputnik-input-block-content {
     display: block;
     width: auto;
+    flex: 1;
   }
 
   .maputnik-input-block-label {
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 1108691..ae9d72a 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -73,6 +73,10 @@
     width: 30%;
   }
 
+  .maputnik-input-block-action {
+    display: none;
+  }
+
   .maputnik-input-block-content {
     width: 70%;
   }

From 06bccfab10704aac58996739d94755a56c301c28 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 19:20:42 +0100
Subject: [PATCH 13/25] Fix for checkboxes within non-clickable label

---
 src/components/Block.jsx         | 29 ++++++++++++++---------------
 src/components/InputCheckbox.jsx |  7 ++++++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 06b77f9..bfa85ba 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -51,35 +51,34 @@ export default class Block extends React.Component {
     const nativeEvent = event.nativeEvent;
     const contains = this._blockEl.contains(el);
 
-    if (event.nativeEvent.target.nodeName !== "INPUT" && contains) {
+    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
-      event.preventDefault();
     }
+		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}
     >
-      <label onClick={this.onLabelClick}>
-        <div className="maputnik-input-block-label">
-          {this.props.label}
-        </div>
-        <div className="maputnik-input-block-action">
-          {this.props.action}
-        </div>
-        <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
-          {this.props.children}
-        </div>
-      </label>
-    </div>
+      <div className="maputnik-input-block-label">
+        {this.props.label}
+      </div>
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+        {this.props.children}
+      </div>
+    </label>
   }
 }
 
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.jsx
index 7cf8323..d930896 100644
--- a/src/components/InputCheckbox.jsx
+++ b/src/components/InputCheckbox.jsx
@@ -12,13 +12,18 @@ export default class InputCheckbox extends React.Component {
     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={e => this.props.onChange(!this.props.value)}
+        onChange={this.onChange}
+        onClick={this.onChange}
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">

From c4b05b62b3e0cb7dadef6b3145dcd3d26c048376 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 19:44:05 +0100
Subject: [PATCH 14/25] Remove logging.

---
 src/components/InputEnum.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/InputEnum.jsx b/src/components/InputEnum.jsx
index a3dd702..138d05b 100644
--- a/src/components/InputEnum.jsx
+++ b/src/components/InputEnum.jsx
@@ -27,7 +27,6 @@ export default class InputEnum extends React.Component {
 
   render() {
     const {options, value, onChange, name, label} = this.props;
-    console.log("this.props", this.props)
 
     if(options.length <= 3 && optionsLabelLength(options) <= 20) {
       return <InputMultiInput

From 09373dda44a904631a68fb9455ae134b8d7193ec Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 20:26:39 +0100
Subject: [PATCH 15/25] Fixed changing between zoom/data functions.

---
 src/components/FieldFunction.jsx | 80 ++++++++++++++++++++++++++------
 src/components/_DataProperty.jsx | 16 ++++++-
 src/components/_ZoomProperty.jsx | 14 ++++--
 3 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/src/components/FieldFunction.jsx b/src/components/FieldFunction.jsx
index ac5887b..35a1775 100644
--- a/src/components/FieldFunction.jsx
+++ b/src/components/FieldFunction.jsx
@@ -200,12 +200,35 @@ export default class FieldFunction  extends React.Component {
   }
 
   makeZoomFunction = () => {
-    const zoomFunc = {
-      stops: [
-        [6, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-        [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
-      ]
+    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, 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)
   }
 
@@ -255,17 +278,44 @@ export default class FieldFunction  extends React.Component {
     this.props.onChange(this.props.fieldName, expression);
   }
 
-  makeDataFunction = () => {
-    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+  makeDataFunction = (functionType) => {
+    functionType = functionType || this.getFieldFunctionType(this.props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
-    const dataFunc = {
-      property: "",
-      type: functionType,
-      stops: [
-        [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-        [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
-      ]
+    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: [
+          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
+          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
+        ]
+      }
+    }
+
     this.props.onChange(this.props.fieldName, dataFunc)
   }
 
@@ -310,6 +360,7 @@ export default class FieldFunction  extends React.Component {
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onChangeToDataFunction={this.makeDataFunction}
           onExpressionClick={this.makeExpression} 
         />
       )
@@ -326,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} 
         />
       )
diff --git a/src/components/_DataProperty.jsx b/src/components/_DataProperty.jsx
index 7b12bb9..35cbfca 100644
--- a/src/components/_DataProperty.jsx
+++ b/src/components/_DataProperty.jsx
@@ -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"]
@@ -167,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
@@ -284,7 +296,7 @@ export default class DataProperty extends React.Component {
             <div className="maputnik-data-spec-property-input">
               <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)}
               />
diff --git a/src/components/_ZoomProperty.jsx b/src/components/_ZoomProperty.jsx
index eb55700..8f0d53b 100644
--- a/src/components/_ZoomProperty.jsx
+++ b/src/components/_ZoomProperty.jsx
@@ -126,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;
 
@@ -183,7 +189,7 @@ export default class ZoomProperty extends React.Component {
             <div className="maputnik-data-spec-property-input">
               <InputSelect
                 value={"interpolate"}
-                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)}
               />
@@ -227,11 +233,11 @@ export default class ZoomProperty extends React.Component {
   }
 
   getDataFunctionTypes(fieldSpec) {
-    if (fieldSpec.expression.interpolated) {
-      return ["categorical", "interval", "exponential", "identity", "interpolate"]
+    if (fieldSpec['property-type'] === 'data-driven') {
+      return ["interpolate", "categorical", "interval", "exponential", "identity"];
     }
     else {
-      return ["categorical", "interval", "identity", "interpolate"]
+      return ["interpolate"];
     }
   }
 

From e3dc98b76dacd573750872fcb0f60b99a61db5fb Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 20:37:08 +0100
Subject: [PATCH 16/25] <h2/> -> <h1/>

---
 src/components/ModalOpen.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ModalOpen.jsx b/src/components/ModalOpen.jsx
index 8ef91be..f399fdc 100644
--- a/src/components/ModalOpen.jsx
+++ b/src/components/ModalOpen.jsx
@@ -198,7 +198,7 @@ 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" aria-label="Style file">
               <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
@@ -207,7 +207,7 @@ export default class ModalOpen extends React.Component {
 
           <section className="maputnik-modal-section">
             <form onSubmit={this.onSubmitUrl}>
-              <h2>Load from URL</h2>
+              <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>
@@ -233,7 +233,7 @@ export default class ModalOpen extends React.Component {
           </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>

From 4a6f58d61c628f9ff37e1a85a862518ee0f5048e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 10 Jun 2020 20:37:46 +0100
Subject: [PATCH 17/25] Changed heading sizes for modals.

---
 src/styles/_modal.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index b1413fe..345e47e 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -17,6 +17,14 @@
   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;
 

From 67bdea1827936afb0a065a5d31c72794c8e0af47 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Jun 2020 16:03:59 +0100
Subject: [PATCH 18/25] Re-added info button and SDK docs to fields after
 refactor.

---
 src/components/Block.jsx     | 25 ++++++++++++++++++++++---
 src/components/Fieldset.jsx  | 36 +++++++++++++++++++++++++++++++++---
 src/components/SpecField.jsx |  6 +++++-
 src/styles/_components.scss  |  1 +
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index bfa85ba..383c1fc 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -69,15 +69,34 @@ export default class Block extends React.Component {
       })}
       onClick={this.onLabelClick}
     >
-      <div className="maputnik-input-block-label">
-        {this.props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
         {this.props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </label>
   }
 }
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.jsx
index aa3b23e..e6308b9 100644
--- a/src/components/Fieldset.jsx
+++ b/src/components/Fieldset.jsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
 
 
 let IDX = 0;
@@ -8,21 +10,49 @@ export default class Fieldset extends React.Component {
   constructor (props) {
     super(props);
     this._labelId = `fieldset_label_${(IDX++)}`;
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
   }
 
   render () {
     const {props} = this;
 
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
-      <div className="maputnik-input-block-label" id={this._labelId}>
-        {props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content">
         {props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </div>
   }
 }
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index 9d73f1c..e978b65 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -39,7 +39,11 @@ export default class SpecField extends React.Component {
       TypeBlock = Block;
     }
 
-    return <TypeBlock label={props.label} action={props.action}>
+    return <TypeBlock
+      label={props.label}
+      action={props.action}
+      fieldSpec={this.props.fieldSpec}
+    >
       <InputSpec {...props} />
     </TypeBlock>
   }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 6406dd7..d7ee196 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -89,6 +89,7 @@
   font-size: 12px;
   margin-top: $margin-3;
   line-height: 1.5;
+  flex: 1 0;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {

From a46c83487430f315855d1abcd2d4f8f7b5b18c0a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Jun 2020 16:12:36 +0100
Subject: [PATCH 19/25] Fixed data functions.

---
 src/components/FieldFunction.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FieldFunction.jsx b/src/components/FieldFunction.jsx
index 35a1775..0174f93 100644
--- a/src/components/FieldFunction.jsx
+++ b/src/components/FieldFunction.jsx
@@ -278,8 +278,8 @@ export default class FieldFunction  extends React.Component {
     this.props.onChange(this.props.fieldName, expression);
   }
 
-  makeDataFunction = (functionType) => {
-    functionType = functionType || this.getFieldFunctionType(this.props.fieldSpec);
+  makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
     const {value} = this.props;
     let dataFunc;

From 3ad487dce772996b871a83eb412a37782dbe55c7 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Jun 2020 16:18:04 +0100
Subject: [PATCH 20/25] Removed isRequired from label incase null.

---
 src/components/Block.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index 383c1fc..d3a2bff 100644
--- a/src/components/Block.jsx
+++ b/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,

From 0d6b9ee9d4da5981ee5ffcdeb6bb2fad4ec01542 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Jun 2020 16:26:28 +0100
Subject: [PATCH 21/25] Fixed source modal CSS for new block definitions.

---
 src/styles/_modal.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 345e47e..a3d86bd 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -206,8 +206,8 @@
     width: 30%;
   }
 
-  .maputnik-input-block-content {
-    width: 70%;
+  .maputnik-input-block-action {
+    width: 20%;
   }
 }
 
@@ -218,8 +218,8 @@
     width: 30%;
   }
 
-  .maputnik-input-block-content {
-    width: 70%;
+  .maputnik-input-block-action {
+    width: 20%;
   }
 }
 

From 21dbc6c4d9e0cc0b8219d0eee54ca3a3349b6619 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Jun 2020 09:42:05 +0100
Subject: [PATCH 22/25] Added back in https://github.com/maputnik/editor link

---
 src/components/AppToolbar.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/AppToolbar.jsx b/src/components/AppToolbar.jsx
index 7480210..f6b7dd1 100644
--- a/src/components/AppToolbar.jsx
+++ b/src/components/AppToolbar.jsx
@@ -211,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')}>

From 5981151b273811e1b346fca99e7d2ae8466babc8 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Jun 2020 09:43:24 +0100
Subject: [PATCH 23/25] Added cursor pointer to SDK docs button

---
 src/styles/_components.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index d7ee196..e7633e7 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -30,6 +30,7 @@
   .maputnik-doc-button {
     opacity: 1;
     pointer-events: all;
+    cursor: pointer;
   }
 }
 

From ca56951256c39cf3586bbd0c13c5d6e55e46b258 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Jun 2020 09:48:55 +0100
Subject: [PATCH 24/25] Fix styling in export model

---
 src/styles/_modal.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index a3d86bd..6baf76b 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -127,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 {

From 8441abe907008754a2a65f7807f6e39c8ecb7add Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Jun 2020 10:30:26 +0100
Subject: [PATCH 25/25] Added padding to 'maputnik-doc-button' and removed
 cursor from doc label.

---
 src/styles/_components.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index e7633e7..5d7213e 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -36,9 +36,6 @@
 
 // DOC LABEL
 .maputnik-doc {
-  &-target {
-    cursor: help;
-  }
 
   &-wrapper {
     display: inline-block;
@@ -70,7 +67,7 @@
     background: $color-black;
     color: white;
     border: none;
-    padding: 0;
+    padding: 4px;
 
     svg {
       pointer-events: none;