Restructure CSS more

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)}