From 73ddf2c3ed5d119ea97463871256a60714300dc2 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Tue, 12 Jun 2018 17:12:03 +0200
Subject: [PATCH] hint support for typeahead

---
 public/app/containers/Explore/Typeahead.tsx | 7 +++++--
 public/sass/components/_slate_editor.scss   | 5 +++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/app/containers/Explore/Typeahead.tsx b/public/app/containers/Explore/Typeahead.tsx
index e7f0a9a0dce..44fce7f8c7e 100644
--- a/public/app/containers/Explore/Typeahead.tsx
+++ b/public/app/containers/Explore/Typeahead.tsx
@@ -23,12 +23,13 @@ class TypeaheadItem extends React.PureComponent<any, any> {
   };
 
   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 onClick = () => onClickItem(label);
     return (
       <li ref={this.getRef} className={className} onClick={onClick}>
         {label}
+        {hint && isSelected ? <div className="typeahead-item-hint">{hint}</div> : null}
       </li>
     );
   }
@@ -43,12 +44,14 @@ class TypeaheadGroup extends React.PureComponent<any, any> {
         <ul className="typeahead-group__list">
           {items.map(item => {
             const text = typeof item === 'object' ? item.text : item;
+            const label = typeof item === 'object' ? item.display || item.text : item;
             return (
               <TypeaheadItem
                 key={text}
                 onClickItem={onClickItem}
                 isSelected={selected.indexOf(text) > -1}
-                label={text}
+                hint={item.hint}
+                label={label}
               />
             );
           })}
diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss
index 7e832b0f0b8..de8a6e6d721 100644
--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@@ -67,6 +67,11 @@
   .typeahead-item__selected {
     background-color: $typeahead-selected-bg;
     color: $typeahead-selected-color;
+
+    .typeahead-item-hint {
+      font-size: $font-size-xs;
+      color: $text-color;
+    }
   }
 }