Restructure CSS more

src/components/fields/ZoomSpecField.jsx

@@ -5,6 +5,7 @@ import Button from '../Button'
 import SpecField from './SpecField'
 import NumberInput from '../inputs/NumberInput'
 import DocLabel from './DocLabel'
+import InputBlock from '../inputs/InputBlock'
 
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import DeleteIcon from 'react-icons/lib/md/delete'
@@ -85,46 +86,36 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 
   renderZoomProperty() {
-    const label = <div className="maputnik-zoom-spec-property-label">
-      <DocLabel
-        label={labelFromFieldName(this.props.fieldName)}
-        doc={this.props.fieldSpec.doc}
-      />
-    </div>
-
     const zoomFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0]
       const value = stop[1]
+      const deleteStopBtn= <DeleteStopButton onClick={this.deleteStop.bind(this, idx)} />
 
-      return <div key={zoomLevel} className="maputnik-zoom-spec-property-stop-item">
-        {label}
-        <Button
-          className="maputnik-delete-stop"
-          onClick={this.deleteStop.bind(this, idx)}
-        >
-          <DocLabel
-            label={<DeleteIcon />}
-            doc={"Remove zoom level stop."}
-          />
-
-        </Button>
-        <div className="maputnik-zoom-spec-property-stop-edit">
-          <NumberInput
-            value={zoomLevel}
-            onChange={changedStop => this.changeStop(idx, changedStop, value)}
-            min={0}
-            max={22}
-          />
+      return <InputBlock
+        key={zoomLevel}
+        doc={this.props.fieldSpec.doc}
+        label={labelFromFieldName(this.props.fieldName)}
+        action={deleteStopBtn}
+      >
+        <div>
+          <div className="maputnik-zoom-spec-property-stop-edit">
+            <NumberInput
+              value={zoomLevel}
+              onChange={changedStop => this.changeStop(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.changeStop(idx, zoomLevel, newValue)}
+            />
+          </div>
         </div>
-        <div className="maputnik-zoom-spec-property-stop-value">
-          <SpecField
-            fieldName={this.props.fieldName}
-            fieldSpec={this.props.fieldSpec}
-            value={value}
-            onChange={(_, newValue) => this.changeStop(idx, zoomLevel, newValue)}
-          />
-        </div>
-      </div>
+      </InputBlock>
     })
 
     return <div className="maputnik-zoom-spec-property">
@@ -139,28 +130,18 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 
   renderProperty() {
-    return <div className="maputnik-zoom-spec-property">
-      <DocLabel
-        label={labelFromFieldName(this.props.fieldName)}
-        doc={this.props.fieldSpec.doc}
-        style={{
-          width: this.props.fieldSpec['zoom-function'] ? '41%' : '50%',
-        }}
-      />
-      {this.props.fieldSpec['zoom-function'] &&
-      <Button
-        className="maputnik-make-zoom-function"
-        onClick={this.makeZoomFunction.bind(this)}
-      >
-        <DocLabel
-          label={<FunctionIcon />}
-          cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-        />
-      </Button>
-      }
-      <SpecField {...this.props} style={{ width: '50%' } }/>
-    </div>
+    let zoomBtn = null
+    if(this.props.fieldSpec['zoom-function']) {
+      zoomBtn = <MakeZoomFunctionButton onClick={this.makeZoomFunction.bind(this)} />
+    }
+
+    return <InputBlock
+      doc={this.props.fieldSpec.doc}
+      label={labelFromFieldName(this.props.fieldName)}
+      action={zoomBtn}
+    >
+      <SpecField {...this.props} />
+    </InputBlock>
   }
 
   render() {
@@ -172,6 +153,31 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 }
 
+function MakeZoomFunctionButton(props) {
+  return <Button
+    className="maputnik-make-zoom-function"
+    onClick={props.onClick}
+  >
+    <DocLabel
+      label={<FunctionIcon />}
+      cursorTargetStyle={{ cursor: 'pointer' }}
+      doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
+    />
+  </Button>
+}
+
+function DeleteStopButton(props) {
+  return <Button
+    className="maputnik-delete-stop"
+    onClick={props.onClick}
+  >
+    <DocLabel
+      label={<DeleteIcon />}
+      doc={"Remove zoom level stop."}
+    />
+  </Button>
+}
+
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
   return capitalize(label)

src/components/inputs/ArrayInput.jsx

@@ -11,7 +11,6 @@ class ArrayInput extends React.Component {
     type: React.PropTypes.string,
     length: React.PropTypes.number,
     default: React.PropTypes.array,
-    style: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -27,31 +26,23 @@ class ArrayInput extends React.Component {
   }
 
   render() {
-    const commonStyle = {
-      width: '48%',
-      marginRight: '2%',
-      marginBottom: '2%'
-    }
     const inputs = this.values.map((v, i) => {
       if(this.props.type === 'number') {
         return <NumberInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       } else {
         return <StringInput
           key={i}
           value={v}
-          style={commonStyle}
           onChange={this.changeValue.bind(this, i)}
         />
       }
     })
 
-    return <div className="maputnik-array"
-      style={{display: 'inline-block', width: '50%'}}>
+    return <div className="maputnik-array">
       {inputs}
     </div>
   }

src/components/inputs/AutocompleteInput.jsx

@@ -8,8 +8,6 @@ class AutocompleteInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.string,
     options: React.PropTypes.array,
-    wrapperStyle: React.PropTypes.object,
-    inputStyle: React.PropTypes.object,
     onChange: React.PropTypes.func,
   }
 
@@ -20,7 +18,10 @@ class AutocompleteInput extends React.Component {
 
   render() {
     return <Autocomplete
-      className="maputnik-autocomplete"
+      wrapperProps={{
+        className: "maputnik-autocomplete",
+        style: null
+      }}
       menuStyle={{
         border: 'none',
         padding: '2px 0',
@@ -30,16 +31,8 @@ class AutocompleteInput extends React.Component {
         background: colors.gray,
         zIndex: 3,
       }}
-      wrapperStyle={{
-        display: 'inline-block',
-        ...this.props.wrapperStyle
-      }}
       inputProps={{
-        style: {
-          ...input.input,
-          width: '100%',
-          ...this.props.inputStyle,
-        }
+        className: "maputnik-string"
       }}
       value={this.props.value}
       items={this.props.options}

src/components/inputs/IconInput.jsx

@@ -6,7 +6,7 @@ import { margins } from '../../config/scales.js'
 
 class IconInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array.isRequired,
+    value: React.PropTypes.array,
     icons: React.PropTypes.array,
     style: React.PropTypes.object,
     onChange: React.PropTypes.func.isRequired,

src/components/inputs/InputBlock.jsx

@@ -1,12 +1,17 @@
 import React from 'react'
+import classnames from 'classnames'
 import input from '../../config/input'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
-    label: React.PropTypes.string.isRequired,
+    label: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]).isRequired,
     doc: React.PropTypes.string,
+    action: React.PropTypes.element,
     children: React.PropTypes.element.isRequired,
     style: React.PropTypes.object,
   }
@@ -16,36 +21,34 @@ 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={this.props.style}
-      className="maputnik-input-block"
+      className={classnames({
+        "maputnik-input-block": true,
+        "maputnik-action-block": this.props.action
+      })}
       >
       {this.props.doc &&
-      <DocLabel
-        label={this.props.label}
-        doc={this.props.doc}
-        style={{
-          width: '50%',
-        }}
-      />
+      <div className="maputnik-input-block-label">
+        <DocLabel
+          label={this.props.label}
+          doc={this.props.doc}
+        />
+      </div>
       }
       {!this.props.doc &&
       <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
       }
-      {this.renderChildren()}
+      {this.props.action &&
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      }
+      <div className="maputnik-input-block-content">
+        {this.props.children}
+      </div>
     </div>
   }
 }

src/components/inputs/NumberInput.jsx

@@ -4,7 +4,6 @@ import input from '../../config/input.js'
 class NumberInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.number,
-    style: React.PropTypes.object,
     default: React.PropTypes.number,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
@@ -69,7 +68,6 @@ class NumberInput extends React.Component {
   render() {
     return <input
       className="maputnik-number"
-      style={this.props.style}
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}

src/components/layers/LayerSourceBlock.jsx

@@ -24,7 +24,6 @@ class LayerSourceBlock extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceIds.map(src => [src, src])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }

src/components/layers/LayerSourceLayerBlock.jsx

@@ -24,7 +24,6 @@ class LayerSourceLayer extends React.Component {
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
-        wrapperStyle={{ width: '50%' }}
       />
     </InputBlock>
   }