Create a search / filter input field component

We need a new component that follows the criteria of "Search by typing" from https://design.gitlab.com/components/search:

  • The search action is triggered immediately after users start typing
  • a spinner is added in the right corner of the search box
  • A clear icon appears in the right corner when the search box contains content and there is no search activity happening in the background
  • Clicking the clear icon removes the content, focuses the input field (if not already), and hides itself
  • A magnifying glass icon is placed in the left corner of the search box
  • The placeholder in a search box should ideally be just “Search”

image

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

Edited by Inactive Account