Allow field style overriding

src/fields/boolean.jsx

@@ -7,6 +7,7 @@ class BooleanField extends React.Component {
     name: React.PropTypes.string.isRequired,
     value: React.PropTypes.bool,
     doc: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   render() {
@@ -14,7 +15,10 @@ class BooleanField extends React.Component {
       <label style={inputStyle.label}>{this.props.name}</label>
       <input
         type="checkbox"
-        style={inputStyle.checkbox}
+        style={{
+          ...inputStyle.checkbox,
+          ...this.props.style
+        }}
         value={this.props.value}
         onChange={e => {this.props.onChange(!this.props.value)}}
         checked={this.props.value}

src/fields/color.jsx

@@ -16,6 +16,7 @@ class ColorField extends React.Component {
     value: React.PropTypes.string,
     default: React.PropTypes.number,
     doc: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   constructor(props) {
@@ -55,7 +56,10 @@ class ColorField extends React.Component {
       <label style={inputStyle.label}>{this.props.name}</label>
       <input
         onClick={this.togglePicker.bind(this)}
-        style={inputStyle.input}
+        style={{
+          ...inputStyle.select,
+          ...this.props.style
+        }}
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}

src/fields/enum.jsx

@@ -8,6 +8,7 @@ class EnumField extends React.Component {
     value: React.PropTypes.string,
     allowedValues: React.PropTypes.array.isRequired,
     doc: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   onChange(e) {
@@ -22,7 +23,10 @@ class EnumField extends React.Component {
     return <div style={inputStyle.property}>
       <label style={inputStyle.label}>{this.props.name}</label>
       <select
-        style={inputStyle.select}
+        style={{
+          ...inputStyle.select,
+          ...this.props.style
+        }}
         value={this.props.value}
         onChange={this.onChange.bind(this)}
       >

src/fields/number.jsx

@@ -12,6 +12,7 @@ class NumberField extends React.Component {
     min: React.PropTypes.number,
     max: React.PropTypes.number,
     doc: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   onChange(e) {
@@ -27,7 +28,10 @@ class NumberField extends React.Component {
     return <div style={inputStyle.property}>
       <label style={inputStyle.label}>{this.props.name}</label>
       <input
-        style={inputStyle.input}
+        style={{
+          ...inputStyle.input,
+          ...this.props.style
+        }}
         type="number"
         name={this.props.name}
         placeholder={this.props.default}

src/fields/spec.jsx

@@ -43,7 +43,23 @@ class ZoomSpecField extends React.Component {
 
         return <div key={zoomLevel}>
           <b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
-          <SpecField {...this.props} value={value} />
+          <SpecField {...this.props}
+            value={value}
+            style={{
+              width: '20%'
+            }}
+          />
+
+          <input
+            style={{
+              ...inputStyle.input,
+              width: '10%'
+            }}
+            type="number"
+            value={zoomLevel}
+            min={0}
+            max={22}
+          />
         </div>
       }).toSeq()
       return <div style={{
@@ -68,6 +84,7 @@ function labelFromFieldName(fieldName) {
   return label
 }
 
+
 /** Display any field from the Mapbox GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
@@ -78,6 +95,8 @@ class SpecField extends React.Component {
       React.PropTypes.string,
       React.PropTypes.number,
     ]),
+    /** Override the style of the field */
+    style: React.PropTypes.object,
   }
 
   onValueChanged(property, value) {
@@ -97,6 +116,7 @@ class SpecField extends React.Component {
           max={this.props.fieldSpec.max}
           unit={this.props.fieldSpec.unit}
           doc={this.props.fieldSpec.doc}
+          style={this.props.style}
         />
       )
       case 'enum': return (
@@ -106,6 +126,7 @@ class SpecField extends React.Component {
           name={label}
           allowedValues={Object.keys(this.props.fieldSpec.values)}
           doc={this.props.fieldSpec.doc}
+          style={this.props.style}
         />
       )
       case 'string': return (
@@ -114,6 +135,7 @@ class SpecField extends React.Component {
           value={this.props.value}
           name={label}
           doc={this.props.fieldSpec.doc}
+          style={this.props.style}
         />
       )
       case 'color': return (
@@ -122,6 +144,7 @@ class SpecField extends React.Component {
           value={this.props.value}
           name={label}
           doc={this.props.fieldSpec.doc}
+          style={this.props.style}
         />
       )
       case 'boolean': return (
@@ -130,6 +153,7 @@ class SpecField extends React.Component {
           value={this.props.value}
           name={label}
           doc={this.props.fieldSpec.doc}
+          style={this.props.style}
         />
       )
       default: return null

src/fields/string.jsx

@@ -9,6 +9,7 @@ class StringField extends React.Component {
     value: React.PropTypes.string,
     default: React.PropTypes.number,
     doc: React.PropTypes.string,
+    style: React.PropTypes.object,
   }
 
   onChange(e) {
@@ -20,7 +21,10 @@ class StringField extends React.Component {
     return <div style={inputStyle.property}>
       <label style={inputStyle.label}>{this.props.name}</label>
       <input
-        style={inputStyle.input}
+        style={{
+          ...inputStyle.input,
+          ...this.props.style
+        }}
         name={this.props.name}
         placeholder={this.props.default}
         value={this.props.value ? this.props.value : ""}