Fix #877

components/autocomplete/Autocomplete.js

@@ -35,7 +35,6 @@ const factory = (Chip, Input) => {
        autocomplete: PropTypes.string,
        focus: PropTypes.string,
        input: PropTypes.string,
-       label: PropTypes.string,
        suggestion: PropTypes.string,
        suggestions: PropTypes.string,
        up: PropTypes.string,
@@ -308,6 +307,8 @@ const factory = (Chip, Input) => {
            onFocus={this.handleQueryFocus}
            onKeyDown={this.handleQueryKeyDown}
            onKeyUp={this.handleQueryKeyUp}
+           theme={theme}
+           themeNamespace="input"
            value={this.state.query}
          />
          {this.renderSuggestions()}

components/autocomplete/readme.md

@@ -63,13 +63,14 @@ Additional properties will be passed to the Input Component so you can use `hint
 
 ## Theme
 
+This component uses an `Input` under the covers. The theme object is passed down namespaced under `input` keyword. This means you can use the same theme classNames from `Input` component but namespaced with `input`. For example, to style the label you have to use `inputLabel` className.
+
 | Name     | Description|
 |:---------|:-----------|
 | `active` | Used for a suggestion when it's active.|
 | `autocomplete`  | Used for the root element.|
 | `focus`   | Used when the input is focused.|
 | `input`   | Used to style the `Input` component.|
-| `label`   | Used for the label.|
 | `suggestion`   | Used to style each suggestion.|
 | `suggestions`   | Used to style the suggestions container.|
 | `up`   | Used for the suggestions when it's opening to the top.|

components/autocomplete/theme.scss

@@ -8,9 +8,6 @@
   position: relative;
   padding: $unit 0;
   &.focus {
-    .label {
-      color: $autocomplete-color-primary;
-    }
     .suggestions {
       max-height: $autocomplete-overflow-max-height;
       visibility: visible;
@@ -19,12 +16,6 @@
   }
 }
 
-.label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
-  transition: color $animation-duration $animation-curve-default;
-}
-
 .values {
   flex-direction: row;
   flex-wrap: wrap;