Makes input fields easier to click. Closes decaporg#173

src/components/ControlPanel/ControlPane.css

@@ -1,15 +1,15 @@
 .control {
   color: #7c8382;
   position: relative;
-  padding: 20px 0;
+  padding: 20px 0 10px 0;
 
   & input,
   & textarea,
   & select {
     font-family: monospace;
     display: block;
     width: 100%;
-    padding: 0;
+    padding: 12px 0 10px 0;
     margin: 0;
     border: none;
     outline: 0;
@@ -24,7 +24,6 @@
   display: block;
   color: #AAB0AF;
   font-size: 12px;
-  margin-bottom: 8px;
 }
 
 .labelWithError {
@@ -36,7 +35,7 @@
   list-style-type: none;
   font-size: 10px;
   color: #FF706F;
-  margin-bottom: 18px;
+  margin-bottom: 5px;
 }
 
 .widget {

src/components/Widgets/ControlHOC.js

@@ -89,6 +89,7 @@ class ControlHOC extends Component {
       onAddAsset,
       onRemoveAsset,
       getAsset,
+      forID: field.get('name'),
       ref: this.processInnerControlRef,
     });
   }

src/components/Widgets/ListControl.js

@@ -29,6 +29,7 @@ export default class ListControl extends Component {
     onChange: PropTypes.func.isRequired,
     value: PropTypes.node,
     field: PropTypes.node,
+    forID: PropTypes.string.isRequired,
     getAsset: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
     onRemoveAsset: PropTypes.func.isRequired,
@@ -162,15 +163,15 @@ export default class ListControl extends Component {
   }
 
   renderListControl() {
-    const { value } = this.props;
-    return (<div>
+    const { value, forID } = this.props;
+    return (<div id={forID}>
       {value && value.map((item, index) => this.renderItem(item, index))}
       <div><button className={styles.addButton} onClick={this.handleAdd}>new</button></div>
     </div>);
   }
 
   render() {
-    const { field } = this.props;
+    const { field, forID } = this.props;
     const { value } = this.state;
 
     if (field.get('field') || field.get('fields')) {
@@ -179,6 +180,7 @@ export default class ListControl extends Component {
 
     return (<input
       type="text"
+      id={forID}
       value={value}
       onChange={this.handleChange}
       onBlur={this.handleCleanup}

src/components/Widgets/NumberControl.js

@@ -1,16 +1,17 @@
 import React, { PropTypes } from 'react';
 
 export default class StringControl extends React.Component {
-  handleChange = e => {
+  handleChange = (e) => {
     this.props.onChange(e.target.value);
   };
 
   render() {
-    return <input type="number" value={this.props.value || ''} onChange={this.handleChange}/>;
+    return <input type="number" id={this.props.forID} value={this.props.value || ''} onChange={this.handleChange} />;
   }
 }
 
 StringControl.propTypes = {
   onChange: PropTypes.func.isRequired,
   value: PropTypes.node,
+  forID: PropTypes.string.isRequired,
 };

src/components/Widgets/ObjectControl.js

@@ -11,6 +11,7 @@ export default class ObjectControl extends Component {
     getAsset: PropTypes.func.isRequired,
     value: PropTypes.node,
     field: PropTypes.object,
+    forID: PropTypes.string.isRequired,
   };
 
   controlFor(field) {
@@ -38,12 +39,12 @@ export default class ObjectControl extends Component {
   }
 
   render() {
-    const { field } = this.props;
+    const { field, forID } = this.props;
     const multiFields = field.get('fields');
     const singleField = field.get('field');
 
     if (multiFields) {
-      return (<div className={styles.root}>
+      return (<div id={forID} className={styles.root}>
         {multiFields.map(field => this.controlFor(field))}
       </div>);
     } else if (singleField) {

src/components/Widgets/RelationControl.js

@@ -15,6 +15,7 @@ function escapeRegexCharacters(str) {
 class RelationControl extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    forID: PropTypes.string.isRequired,
     value: PropTypes.node,
     field: PropTypes.node,
     isFetching: PropTypes.node,
@@ -105,12 +106,13 @@ class RelationControl extends Component {
   };
 
   render() {
-    const { value, isFetching, queryHits } = this.props;
+    const { value, isFetching, forID, queryHits } = this.props;
 
     const inputProps = {
       placeholder: '',
       value: value || '',
       onChange: this.onChange,
+      id: forID,
     };
 
     const suggestions = (queryHits.get) ? queryHits.get(this.controlID, []) : [];

src/components/Widgets/SelectControl.js

@@ -7,7 +7,7 @@ export default class SelectControl extends React.Component {
   };
 
   render() {
-    const { field, value } = this.props;
+    const { field, value, forID } = this.props;
     const fieldOptions = field.get('options');
 
     if (!fieldOptions) {
@@ -21,7 +21,7 @@ export default class SelectControl extends React.Component {
       return option;
     });
 
-    return (<select value={value || ''} onChange={this.handleChange}>
+    return (<select id={forID} value={value || ''} onChange={this.handleChange}>
       {options.map((option, idx) => <option key={idx} value={option.value}>
         {option.label}
       </option>)}
@@ -32,6 +32,7 @@ export default class SelectControl extends React.Component {
 SelectControl.propTypes = {
   onChange: PropTypes.func.isRequired,
   value: PropTypes.node,
+  forID: PropTypes.string.isRequired,
   field: ImmutablePropTypes.contains({
     options: ImmutablePropTypes.listOf(PropTypes.oneOf([
       PropTypes.string,

src/components/Widgets/StringControl.js

@@ -1,16 +1,17 @@
 import React, { PropTypes } from 'react';
 
 export default class StringControl extends React.Component {
-  handleChange = e => {
+  handleChange = (e) => {
     this.props.onChange(e.target.value);
   };
 
   render() {
-    return <input type="text" value={this.props.value || ''} onChange={this.handleChange}/>;
+    return <input type="text" id={this.props.forID} value={this.props.value || ''} onChange={this.handleChange} />;
   }
 }
 
 StringControl.propTypes = {
   onChange: PropTypes.func.isRequired,
+  forID: PropTypes.string.isRequired,
   value: PropTypes.node,
 };

src/components/Widgets/TextControl.js

@@ -5,27 +5,28 @@ export default class StringControl extends React.Component {
     this.updateHeight();
   }
 
-  handleChange = e => {
+  handleChange = (e) => {
     this.props.onChange(e.target.value);
     this.updateHeight();
   };
 
   updateHeight() {
     if (this.element.scrollHeight > this.element.clientHeight) {
-      this.element.style.height = this.element.scrollHeight + 'px';
+      this.element.style.height = `${ this.element.scrollHeight }px`;
     }
   }
 
-  handleRef = ref => {
+  handleRef = (ref) => {
     this.element = ref;
   };
 
   render() {
-    return <textarea ref={this.handleRef} value={this.props.value || ''} onChange={this.handleChange}/>;
+    return <textarea ref={this.handleRef} id={this.props.forID} value={this.props.value || ''} onChange={this.handleChange} />;
   }
 }
 
 StringControl.propTypes = {
   onChange: PropTypes.func.isRequired,
+  forID: PropTypes.string.isRequired,
   value: PropTypes.node,
 };