As discussed with Dave, the following would be the approach to replace the interface shown above with Eui components. For reference, that interface can be found at the top of Dashboard and Discover in Kibana.

<div>
 <EuiSuggestInput saveState=”saving”>key : value></EuiSuggestInput>
 <EuiPopover className=”euiSuggest__popover”>
   <EuiSuggestItem />
   <EuiSuggestItem />
   <EuiSuggestItem />
   <EuiSuggestItem />
 </EuiPopover>
</div>

Kibana currently builds this interface using some existing Eui components (namely EuiIcon). Kibana passes the type prop to EuiIcon. It also creates a CSS class {kbnSuggestionItem-- + props.suggestion.type} and calculates color and background-color in SASS for each type (this is for the square which contains the icon on each suggestion). See:

In the current implementation each type is linked to a specific color and background-color.

I would like for EuiSuggestItem to offer the user more freedom and allow them pick the color for the icon they're using. For that reason, EuiSuggestItem's type prop would be limited to generating the icon through EuiIcon only. I would add other props to handle color.

Here are the props that I’m considering:

type => to generate the icon using EuiIcon (Kibana currently uses EuiIcon for this and I would like to do the same)
text => primary text / label
description => secondary text (optional)
color => color of the icon. Accepts either our palette colors (primary, secondary ..etc) or a hex value.
bgcolor => background color of the square where the icon is placed. Accepts hex value.

In the case in which the user picks a palette color for color we would auto-generate the background-color for them in SASS. Unless they specify a hex value for bgcolor.

In terms for structure I was thinking of something like this:

<EuiFlexGroup>
 <EuiFlexItem><EuiIcon type={type} /></EuiFlexItem>
 <EuiFlexItem>{text}</EuiFlexItem>
 <EuiFlexItem>{description}</EuiFlexItem>
</EuiFlexGroup>

Please send your comments, suggestions, etc.