Support propagating from different layer types

src/fields/color.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
 static propTypes = {
     onChange: React.PropTypes.func.isRequired,
 		name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number,
+    value: React.PropTypes.string,
     default: React.PropTypes.number,
     doc: React.PropTypes.string,
   }
@@ -17,10 +17,10 @@ static propTypes = {
 	}
 
 	render() {
-		return <div>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+		return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				name={this.props.name}
 				placeholder={this.props.default}
 				value={this.props.value}

src/fields/enum.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Select, Input } from 'rebass'
+import inputStyle from './input.js'
 
 class EnumField extends React.Component {
 	static propTypes = {
@@ -16,14 +17,19 @@ class EnumField extends React.Component {
 
 	render() {
 		const options = this.props.allowedValues.map(val => {
-			return {children: val, value: val}
+			return <option key={val} value={val}>{val}</option>
 		})
-		return <Select
-			onChange={this.onChange.bind(this)}
-			name={this.props.name}
-			options={options}
-			label={this.props.name}
-		/>
+
+		return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
+			<select
+				style={inputStyle.select}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			>
+				{options}
+			</select>
+		</div>
 	}
 }
 

src/fields/number.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class NumberField extends React.Component {
@@ -20,10 +20,10 @@ class NumberField extends React.Component {
 	}
 
 	render() {
-		return <div>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+		return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				type="number"
 				name={this.props.name}
 				placeholder={this.props.default}

src/fields/string.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label, Input } from 'rebass'
-import {inputBase} from '../theme'
+import inputStyle from './input.js'
 
 /*** Number fields with support for min, max and units and documentation*/
 class StringField extends React.Component {
@@ -16,11 +16,11 @@ static propTypes = {
 		return this.props.onChange(e.target.value)
 	}
 
-	render() {
-		return <div>
-			<Label htmlFor={this.props.name} children={this.props.name} />
+render() {
+	return <div style={inputStyle.property}>
+			<label style={inputStyle.label}>{this.props.name}</label>
 			<input
-				style={inputBase}
+				style={inputStyle.input}
 				name={this.props.name}
 				placeholder={this.props.default}
 				value={this.props.value}