feat(dropdown): single search

[bmdalex]

feat(dropdown): single search

Description:

This PR implements the single selection with search flavor Dropdown component (prerequisite for inline Dropdown).

API

<Dropdown
  search
  items={inputItems}
  placeholder="Start typing a name"
  noResultsMessage="We couldn't find any matches."
/>

renders:

[codecov]

Codecov Report

Merging #839 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #839   +/-   ##
=======================================
  Coverage   93.54%   93.54%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       73       73           
=======================================
  Hits          681      681           
  Misses         47       47

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2b05085...d18a307. Read the comment docs.

[mnajdova]

I don't like the fact that if I want to replace the selected item I have to remove everything and start typing. I like the SUIR implementation: https://react.semantic-ui.com/modules/dropdown/#types-search-selection it's closer to what i would expect. If you have something selected and you are clicking again on the dropdown, clear the dropdown so that the user can start typing the new item. Does not have to be implemented as part of this PR, but this is something I had to mention :)

[bmdalex]

@mnajdova

We're actually following ARIA standards in this implementation:

https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
(see Example 3: List with Inline Autocomplete)

I agree there should be a better way to clear the selection. The UX will get better when we'll be adding the 'x' icon to clear the selection. It's on the roadmap for Dropdown