User dropdown for tag selector

client/src/app/demo/components-demo-page.js

@@ -83,7 +83,7 @@ let DemoPage = React.createClass({
                     items={[
                         {name: 'tag1', color: 'blue'},
                         {name: 'suggestion', color: '#ff6900'},
-                        {name: 'tag3', color: 'yellow'},
+                        {name: 'tag3', color: 'red'},
                         {name: 'tag4', color: 'green'},
                         {name: 'bug', color: '#eb144c'},
                     ]}

client/src/core-components/drop-down.js

@@ -50,11 +50,12 @@ class DropDown extends React.Component {
 
     render() {
         let animation = this.getAnimationStyles();
-        let selectedItem = this.props.items[this.getSelectedIndex()];
 
         return (
             <div className={this.getClass()}>
-                {this.renderCurrentItem(selectedItem)}
+                <div {...this.getCurrentItemProps()}>
+                    {this.props.children ? this.props.children : this.renderCurrentItem()}
+                </div>
                 <Motion defaultStyle={animation.defaultStyle} style={animation.style} onRest={this.onAnimationFinished.bind(this)}>
                     {this.renderList.bind(this)}
                 </Motion>
@@ -72,15 +73,17 @@ class DropDown extends React.Component {
         );
     }
 
-    renderCurrentItem(item) {
-        var iconNode = null;
+    renderCurrentItem() {
+        let item = this.props.items[this.getSelectedIndex()];
+        let iconNode = null;
+
 
         if (item.icon) {
             iconNode = <Icon className="drop-down__current-item-icon" name={item.icon} />;
         }
 
         return (
-            <div {...this.getCurrentItemProps()}>
+            <div>
                 {iconNode}{item.content}
             </div>
         );

client/src/core-components/tag-selector.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import Icon from 'core-components/icon';
+import DropDown from 'core-components/drop-down';
 
 class TagSelector extends React.Component {
 
@@ -16,12 +17,9 @@ class TagSelector extends React.Component {
     render() {
         return (
             <div className="tag-selector">
-                <div className="tag-selector__selected-tags">
+                <DropDown className="tag-selector__drop-down" items={this.renderTagOptions().map(tag => ({content: tag}))} selectedIndex={-1} size="large">
                     {this.renderSelectedTags()}
-                </div>
-                <div className="tag-selector__tag-options">
-                    {this.renderTagOptions()}
-                </div>
+                </DropDown>
             </div>
         );
     }
@@ -35,7 +33,7 @@ class TagSelector extends React.Component {
 
     renderSelectedTag(item,index) {
         return (
-            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} key={index}>
+            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} onClick={event => event.stopPropagation()} key={index}>
                 <span className="tag-selector__selected-tag-name">{item.name}</span>
                 <span onClick={this.onRemoveClick.bind(this,item.name)} className="tag-selector__selected-tag-remove" >
                     <Icon name="times-circle" size="small"/>
@@ -52,20 +50,22 @@ class TagSelector extends React.Component {
 
     renderTagOption(item,index) {
         return (
-            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" style={{backgroundColor:item.color}} key={index}>
+            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" key={index}>
+                <span className="tag-selector__tag-option-square" style={{backgroundColor:item.color}}/>
                 <span className="tag-selector__tag-option-name" >{item.name}</span>
             </div>
         );
     }
 
-    onRemoveClick(name) {
+    onRemoveClick(tag) {
+
         if(this.props.onRemoveClick){
-            this.props.onRemoveClick(name);
+            this.props.onRemoveClick(tag);
         }
     }
-    onTagSelected(name) {
+    onTagSelected(tag) {
         if(this.props.onTagSelected){
-            this.props.onTagSelected(name);
+            this.props.onTagSelected(tag);
         }
     }
 

client/src/core-components/tag-selector.scss

@@ -3,27 +3,45 @@
 .tag-selector{
   margin-bottom: 30px;
   text-align: left;
-  &__selected-tags {
-    border-radius: 3px;
-    background-color:white;
-    padding:3px 1px;
+
+  &__drop-down {
+    .drop-down__current-item {
+      cursor: text;
+      background-color: white;
+      border: 1px solid $grey;
+
+      &:focus {
+        outline: none;
+        border-color: $primary-blue;
+      }
+    }
   }
 
-  &__selected-tag,
-  &__tag-option {
-    color:white;
+  &__selected-tags {
     border-radius: 3px;
-    margin-left: 5px;
-    padding:3px;
-    font-size: 10px;
+    background-color: white;
+    padding: 3px 1px;
   }
 
   &__selected-tag {
+    color: white;
     display: inline-block;
+    border-radius: 3px;
+    margin-left: 5px;
+    padding: 3px;
+    font-size: 13px;
+  }
+
+  &__selected-tag {
+    cursor: default;
 
     &-remove {
-      margin-left: 10px;
       cursor: pointer;
+      margin-left: 10px;
+
+      &:hover {
+        color: $light-grey;
+      }
     }
   }
 
@@ -33,9 +51,19 @@
   }
 
   &__tag-option {
-    cursor: pointer;
-    &-name {
+    color: $primary-black;
+    display: flex;
+    align-items: center;
 
+    &-square {
+      display: inline-block;
+      height: 15px;
+      width: 15px;
+      border-radius: 4px;
+    }
+
+    &-name {
+      margin-left: 10px;
     }
   }
 }