[change] Remove label markup

As discussed in reactjs#89

Author: CMTegner

examples/async-data/app.js

@@ -24,9 +24,11 @@ let App = React.createClass({
           attempt to autocomplete the first one.
         </p>
 
+        <label htmlFor="async-autocomplete">
+          Choose a US state
+        </label>
         <Autocomplete
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{ id: 'async-autocomplete' }}
           ref="autocomplete"
           value={this.state.value}
           items={this.state.unitedStates}

examples/custom-menu/app.js

@@ -21,10 +21,12 @@ let App = React.createClass({
           look as well as the rendering of it. In this case we put headers for each
           letter of the alphabet.
         </p>
+        <label htmlFor="custom-autocomplete">
+          Choose a US state
+        </label>
         <Autocomplete
           value={this.state.value}
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{ id: 'custom-autocomplete' }}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={value => this.setState({ value, unitedStates: [] }) }

examples/static-data/app.js

@@ -16,10 +16,12 @@ let App = React.createClass({
           so <code>Autocomplete</code> has methods baked in to help.
         </p>
 
+        <label htmlFor="static-autocomplete">
+          Choose a US state
+        </label>
         <Autocomplete
           value={this.state.value}
-          labelText="Choose a state from the US"
-          inputProps={{name: "US state"}}
+          inputProps={{ id: 'static-autocomplete' }}
           items={getStates()}
           getItemValue={(item) => item.name}
           shouldItemRender={matchStateToTerm}

lib/Autocomplete.js

@@ -1,5 +1,4 @@
 const React = require('react')
-const lodash = require('lodash')
 const scrollIntoView = require('dom-scroll-into-view')
 
 let _debugStates = []
@@ -14,7 +13,6 @@ let Autocomplete = React.createClass({
     renderItem: React.PropTypes.func.isRequired,
     menuStyle: React.PropTypes.object,
     inputProps: React.PropTypes.object,
-    labelText: React.PropTypes.string,
     wrapperProps: React.PropTypes.object,
     wrapperStyle: React.PropTypes.object
   },
@@ -27,7 +25,6 @@ let Autocomplete = React.createClass({
         display: 'inline-block'
       },
       inputProps: {},
-      labelText: '',
       onChange () {},
       onSelect (value, item) {},
       renderMenu (items, value, style) {
@@ -55,7 +52,6 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount () {
-    this.id = lodash.uniqueId('autocomplete-'); 
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
@@ -315,9 +311,6 @@ let Autocomplete = React.createClass({
     }
     return (
       <div style={{...this.props.wrapperStyle}} {...this.props.wrapperProps}>
-        <label htmlFor={this.id} ref="label">
-          {this.props.labelText}
-        </label>
         <input
           {...this.props.inputProps}
           role="combobox"
@@ -330,7 +323,6 @@ let Autocomplete = React.createClass({
           onKeyUp={(event) => this.handleKeyUp(event)}
           onClick={this.handleInputClick}
           value={this.props.value}
-          id={this.id}
         />
         {this.state.isOpen && this.renderMenu()}
         {this.props.debug && (

package.json

@@ -48,7 +48,6 @@
   "dependencies": {
     "babel-preset-es2015": "^6.5.0",
     "dom-scroll-into-view": "1.0.1",
-    "lodash": "^4.5.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7"
   }