Create search field component

[gfellerph]

Create a search field component.

Design

https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16739%3A53259&mode=design&t=i6IlqbsNcGrr8I6l-1

Features

• Has a placeholder icon that disappears when a search query is entered
• Has a clear button that will clear the current search query and focus the input field afterwards
• Has an optional suggestion list (which is basically a styleable datalist)
  • Suggestions can either trigger the search directly (like a link) or just put the value into the input box (specific feature of the suggestionlist component that could also be used in a combobox where selecting a suggestion does not submit a search)
  • A maximum of 8 items are displayed at any given time (recommendation, use overflow scrolling if there are more)
  • If the list is empty, it should be hidden
  • While selecting suggestions, the focus should stay inside the text box in case the user continues to type
  • Number of characters to trigger the first suggestion get call should be configurable
  • Suggestion items can have any icon
  • Text input that matches a part of the suggestion will render this part in bold
  • Suggestion items can be categorized with headings
  • The suggestion list can either be rendered inline or as a popover (internet header uses inline rendering as the searchbox itself is already in a popover)

Structure proposal

Floating label

<post-search id="search" floating>
  <label for="search">Search</label>
  <post-suggestion-list slot="suggestions" popover>
    <post-suggestion>Se</suggestion>
  </post-suggestion-list>
</post-search>

Non floating label

<label for="search">Search</label>
<post-search id="search">
  <post-suggestion-list slot="suggestions">
    <post-suggestion>Se</suggestion>
  </post-suggestion-list>
</post-search>

This approach could use the <post-popovercontainer> internally.

<Host>
  <input />
  <post-popovercontainer>
    <slot name="suggestion-list"></slot>
  </post-popovercontainer>
</Host>

Alternative structure proposal (more generic, more complicated):

<post-textinput clearbutton type="search" floating id="search">
  <post-icon name="1000" slot="placeholder-icon"></post-icon>
  <label for="search">Search</label>
</post-textinput>

Tasks

Beta Give feedback

1. Reach agreement on component naming and structure
2. Create a web component for the search input
3. Create a documentation page
4. Add end to end tests

Initial Design Ticket: #1960

[gfellerph]

• Split suggestion list into a separate ticket

[gfellerph]

Closing because definition and requirements are outdated. Components that will make a suggestion box possible need to be implemented separately.