The SearchInput component needs to be designed and specified before its implementation as one of the building blocks of the Codex TypeaheadSearch component.
|This Figma frame contains the design specifications for this component.|
As a designer and developer, I need to be able to reuse a system-compliant SearchInput component, in order to provide users with an input they can use to submit a search query.
The SearchInput component has two variants:
- A simple version that only presents a single input type search
- A version that also includes a 'Search' button (Normal neutral, with text or IconOnly) beside the input
The SearchInput component is composed either by a single search input (i.e. an Input with type=search) or a search input + Normal Neutral Button.
Acceptance criteria (or Done)
- All the interactive states and behavior of the SearchInput are documented.
- All the visual properties of the SearchInput are fully specified
- Keyboard navigation support is defined
The existing version of TypeaheadSearch within Codex has a UI similar to that of SearchInput, and should use the SearchInput component once it exists.
- CdxSearchInput can be used within TypeaheadSearch, while providing a reusable interface for other search implementations
- CdxSearchInput is properly documented on the Codex docs site
- CdxSearchInput follows the design spec
- Responsiveness is out of the scope of this task and captured by this separate ticket: T302881