Restyle to use border box

src/components/fields/ColorField.jsx

@@ -82,7 +82,6 @@ class ColorField extends React.Component {
     </div>
 
     return <div style={{
-      ...input.property,
       position: 'relative',
       display: 'inline',
     }}>

src/components/fields/ZoomSpecField.jsx

@@ -3,6 +3,7 @@ import Color from 'color'
 
 import Button from '../Button'
 import SpecField from './SpecField'
+import NumberInput from '../inputs/NumberInput'
 import DocLabel from './DocLabel'
 
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
@@ -44,20 +45,21 @@ export default class ZoomSpecField extends React.Component {
     let label = <DocLabel
       label={labelFromFieldName(this.props.fieldName)}
       doc={this.props.fieldSpec.doc}
+      style={{
+        width: '50%',
+      }}
     />
 
     if(isZoomField(this.props.value)) {
       const zoomFields = this.props.value.stops.map((stop, idx) => {
-        label = <label style={{...input.label, width: '30%'}}>
-          {labelFromFieldName(this.props.fieldName)}
-        </label>
-
-        if(idx > 0) {
-          label = <label style={{...input.label, width: '30%'}}></label>
-        }
+        label = <DocLabel
+          doc={this.props.fieldSpec.doc}
+          style={{ width: '42.5%'}}
+          label={idx > 0 ? "" : labelFromFieldName(this.props.fieldName)}
+        />
 
         if(idx === 1) {
-          label = <label style={{...input.label, width: '30%'}}>
+          label = <label style={{...input.label, width: '42.5%'}}>
             <Button style={{fontSize: fontSizes[5]}}>
               Add stop
             </Button>
@@ -67,17 +69,19 @@ export default class ZoomSpecField extends React.Component {
         const zoomLevel = stop[0]
         const value = stop[1]
 
-        return <div style={input.property} key={zoomLevel}>
+        return <div key={zoomLevel} style={{
+            ...input.property,
+            marginLeft: 0,
+            marginRight: 0
+          }}>
           {label}
           <Button style={{backgroundColor: null}}>
             <DeleteIcon />
           </Button>
-          <input
+          <NumberInput
             style={{
-              ...input.input,
-              width: '10%',
+              width: '7%',
             }}
-            type="number"
             value={zoomLevel}
             min={0}
             max={22}
@@ -85,19 +89,20 @@ export default class ZoomSpecField extends React.Component {
           <SpecField {...this.props}
             value={value}
             style={{
-              width: '33%',
+              width: '42%',
               marginLeft: margins[0],
             }}
           />
         </div>
       })
+
       return <div style={input.property}>
         {zoomFields}
       </div>
     } else {
       return <div style={input.property}>
         {label}
-        <SpecField {...this.props} />
+        <SpecField {...this.props} style={{ width: '50%' } }/>
       </div>
     }
   }

src/components/filter/FilterEditor.jsx

@@ -5,6 +5,10 @@ import input from '../../config/input.js'
 import colors from '../../config/colors.js'
 import { margins } from '../../config/scales.js'
 
+import SelectInput from '../inputs/SelectInput'
+import StringInput from '../inputs/StringInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
+
 const combiningFilterOps = ['all', 'any', 'none']
 const setFilterOps = ['in', '!in']
 const otherFilterOps = Object
@@ -35,6 +39,7 @@ class CombiningOperatorSelect extends React.Component {
     })
 
     return <div>
+
       <select
         style={{
           ...input.select,
@@ -64,20 +69,15 @@ class OperatorSelect extends React.Component {
   }
 
   render() {
-    const options = otherFilterOps.map(op => {
-      return <option key={op} value={op}>{op}</option>
-    })
-    return <select
+    return <SelectInput
       style={{
-        ...input.select,
         width: '15%',
         margin: margins[0]
       }}
       value={this.props.value}
-      onChange={e => this.props.onChange(e.target.value)}
-    >
-      {options}
-    </select>
+      onChange={this.props.onChange}
+      options={otherFilterOps.map(op => [op, op])}
+    />
   }
 }
 
@@ -104,32 +104,26 @@ class SingleFilterEditor extends React.Component {
     const filterArgs = f.slice(2)
 
     return <div>
-      <select
-        style={{
-          ...input.select,
-            width: '17%',
-            margin: margins[0]
+      <AutocompleteInput
+        wrapperStyle={{
+          width: '35%',
+          margin: margins[0],
         }}
         value={propertyName}
+        options={Object.keys(this.props.properties).map(propName => [propName, propName])}
         onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
-      >
-        {Object.keys(this.props.properties).map(propName => {
-          return <option key={propName} value={propName}>{propName}</option>
-        })}
-      </select>
+      />
       <OperatorSelect
         value={filterOp}
         onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
       />
-      <input
+      <StringInput
         style={{
-          ...input.input,
-          width: '53%',
+          width: '35%',
           margin: margins[0]
         }}
         value={filterArgs.join(',')}
-        onChange={e => {
-          this.onFilterPartChanged(filterOp, propertyName, e.target.value.split(','))}}
+        onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
       />
     </div>
   }
@@ -182,11 +176,7 @@ export default class CombiningFilterEditor extends React.Component {
       return null
     }
 
-    return <div style={{
-      padding: margins[2],
-      paddingRight: 0,
-      backgroundColor: colors.black
-    }}>
+    return <div>
       <CombiningOperatorSelect
         value={combiningOp}
         onChange={this.onFilterPartChanged.bind(this, 0)}

src/components/inputs/ArrayInput.jsx

@@ -18,8 +18,8 @@ class ArrayInput extends React.Component {
   render() {
     const values = this.props.value || this.props.default || []
     const commonStyle = {
-      width: '15%',
-      marginRight: margins[0],
+      width: '49%',
+      marginRight: '1%',
     }
     const inputs = values.map((v, i) => {
       if(this.props.type === 'number') {
@@ -28,7 +28,7 @@ class ArrayInput extends React.Component {
       return <StringInput key={i} value={v} style={commonStyle} />
     })
 
-    return <div style={{display: 'inline-block', width: '51%'}}>
+    return <div style={{display: 'inline-block', width: '50%'}}>
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -8,7 +8,8 @@ class AutocompleteInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string,
     options: React.PropTypes.array,
-    style: React.PropTypes.object,
+    wrapperStyle: React.PropTypes.object,
+    inputStyle: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -28,11 +29,15 @@ class AutocompleteInput extends React.Component {
         background: colors.gray,
         zIndex: 3,
       }}
+      wrapperStyle={{
+        display: 'inline-block',
+        ...this.props.wrapperStyle
+      }}
       inputProps={{
         style: {
           ...input.input,
-          width: null,
-          ...this.props.style,
+          width: '100%',
+          ...this.props.inputStyle,
         }
       }}
       value={this.props.value}

src/components/inputs/InputBlock.jsx

@@ -15,15 +15,30 @@ class InputBlock extends React.Component {
     return this.props.onChange(value === "" ? null: value)
   }
 
+  renderChildren() {
+    return React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, {
+        style: {
+          ...child.props.style,
+          width: '50%',
+        }
+      })
+    })
+  }
+
   render() {
     return <div style={{
-      display: 'block',
-      marginTop: margins[2],
-      marginBottom: margins[2],
+      ...input.property,
       ...this.props.style,
     }}>
-      <label style={input.label}>{this.props.label}</label>
-      {this.props.children}
+      <label
+        style={{
+          ...input.label,
+          width: '50%',
+      }}>
+        {this.props.label}
+      </label>
+      {this.renderChildren()}
     </div>
   }
 }

src/config/input.js

@@ -3,6 +3,7 @@ import { margins, fontSizes } from './scales'
 
 const base = {
   display: 'inline-block',
+  boxSizing: 'border-box',
   fontSize: fontSizes[5],
   lineHeight: 2,
   paddingLeft: 5,
@@ -11,20 +12,19 @@ const base = {
 
 const label = {
   ...base,
-  width: '40%',
+  padding: null,
   color: colors.lowgray,
   userSelect: 'none',
 }
 
 const property = {
-  marginTop: margins[2],
-  marginBottom: margins[2],
+  display: 'block',
+  margin: margins[2],
 }
 
 const input = {
   ...base,
   border: 'none',
-  width: '47%',
   backgroundColor: colors.gray,
   color: colors.lowgray,
 }
@@ -38,7 +38,6 @@ const checkbox = {
 
 const select = {
   ...input,
-  width: '50%',
   height: '2.15em',
 }