hint support for typeahead

public/app/containers/Explore/Typeahead.tsx

@@ -23,12 +23,13 @@ class TypeaheadItem extends React.PureComponent<any, any> {
   };
   };
 
 
   render() {
   render() {
-    const { isSelected, label, onClickItem } = this.props;
+    const { hint, isSelected, label, onClickItem } = this.props;
     const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item';
     const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item';
     const onClick = () => onClickItem(label);
     const onClick = () => onClickItem(label);
     return (
     return (
       <li ref={this.getRef} className={className} onClick={onClick}>
       <li ref={this.getRef} className={className} onClick={onClick}>
         {label}
         {label}
+        {hint && isSelected ? <div className="typeahead-item-hint">{hint}</div> : null}
       </li>
       </li>
     );
     );
   }
   }
@@ -43,12 +44,14 @@ class TypeaheadGroup extends React.PureComponent<any, any> {
         <ul className="typeahead-group__list">
         <ul className="typeahead-group__list">
           {items.map(item => {
           {items.map(item => {
             const text = typeof item === 'object' ? item.text : item;
             const text = typeof item === 'object' ? item.text : item;
+            const label = typeof item === 'object' ? item.display || item.text : item;
             return (
             return (
               <TypeaheadItem
               <TypeaheadItem
                 key={text}
                 key={text}
                 onClickItem={onClickItem}
                 onClickItem={onClickItem}
                 isSelected={selected.indexOf(text) > -1}
                 isSelected={selected.indexOf(text) > -1}
-                label={text}
+                hint={item.hint}
+                label={label}
               />
               />
             );
             );
           })}
           })}

public/sass/components/_slate_editor.scss

@@ -67,6 +67,11 @@
   .typeahead-item__selected {
   .typeahead-item__selected {
     background-color: $typeahead-selected-bg;
     background-color: $typeahead-selected-bg;
     color: $typeahead-selected-color;
     color: $typeahead-selected-color;
+
+    .typeahead-item-hint {
+      font-size: $font-size-xs;
+      color: $text-color;
+    }
   }
   }
 }
 }