Update search components in gitlab-ui

Guidelines: https://design.gitlab.com/components/search

Specs: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/search-spec-previews/

A list of all searchboxes throughout the application (WIP): https://docs.google.com/spreadsheets/d/13y5NMHi7VUs8jNeEBuMd5C5PcR_hdUfDdwKxLOyIjWU/edit#gid=0

Proposal

1. Search by typing 2. Search by enter/click
image
Default -> Typing (spinner indicates background activity) -> Show the clear icon when there's no background activity

- Search icon placed in the left edge of search box
- Lack of button indicates automatic search
- Focus search box when clear icon is clicked
- Hide the clear icon when search box is empty
image
*Default -> Typing (show clear icon)*

- Search icon in the button
- Button indicates the need for confirming/triggering search
- Focus search box when clear icon is clicked
- Hide the clear icon when search box is empty

And also update the most commonly and prominently used one so it's better aligned with the 2. from above.

image

Old description:

### Resources FE @timzallmann

We have a number of differently styles search boxes across the site.

Here are three different examples all on the same page:

Screen_Recording_2017-01-03_at_02.29_PM

Let's standarize all the search boxes. The magnifying glass icon should remain, even when text is entered into the search field. We should remove the clear icon, as it doesn't provide enough value.

Proposal

Update the related search components in gitlab-ui

Screen_Shot_2017-06-19_at_3.37.13_PM

Screen_Shot_2017-06-19_at_3.46.34_PM

Edited by Jeremy Watson (ex-GitLab)