Removed arrowicon, use ffe-form dropdown styling

SpareBank1 · Mar 17, 2017 · 135e2a7 · 135e2a7
1 parent 48f2cfe
commit 135e2a7
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 26 deletions.
diff --git a/src/selectors/base-selector.js b/src/selectors/base-selector.js
@@ -186,7 +186,7 @@ class BaseSelector extends Component {
     const {showSuggestions, highlightedSuggestionIndex, suggestionListId} = this.state;
     return (
       <div
-        className='base-selector'
+        className='base-selector ffe-input-group'
       >
         <Input
           inputFieldRef={(input) => {

diff --git a/src/selectors/input-field.js b/src/selectors/input-field.js
@@ -1,6 +1,4 @@
 import React, { PropTypes, Component } from 'react';
-import classNames from 'classnames';
-import ChevronIkon from 'ffe-icons-react/chevron-ikon';
 import KryssIkon from 'ffe-icons-react/kryss-ikon';
 
 class Input extends Component {
@@ -32,14 +30,14 @@ class Input extends Component {
       >
         <input
           onChange={ (e) => {onChange(e.target.value);}}
-          className='ffe-input-field input-field'
+          className='ffe-input-field ffe-dropdown input-field'
           onKeyDown={ onKeyDown }
           autoComplete='off'
           value={ value }
           id={ id }
           placeholder={ placeholder }
           ref={inputFieldRef}
-          aria-invalid={ ariaInvalid } // add aria with hoc?
+          aria-invalid={ ariaInvalid }
           aria-autocomplete='list'
         />
         { value.length > 0 &&
@@ -53,9 +51,6 @@ class Input extends Component {
           <KryssIkon className='reset-button-icon'/>
         </button>
         }
-        <div className={classNames('arrow-icon', {'arrow-icon--up': isSuggestionsShowing })}>
-          <ChevronIkon focusable={ false }/>
-        </div>
       </div>
     );
   }

diff --git a/styles/base-selector.less b/styles/base-selector.less
@@ -7,24 +7,6 @@
     }
   }
 
-  .arrow-icon {
-    position: absolute;
-    top: 16px;
-    right: 10px;
-
-    svg {
-      width: 14px;
-      height: 14px;
-      fill: @ffe-blue-royal-light-wcag;
-    }
-
-    &--up {
-      svg {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
   .reset-button {
     position: absolute;
     right: 35px;