Old visual style - components used for searching and filtering used deprecated PF3 design system or other ad hoc alterations
Inconsistency - similar use cases don’t often use the search inputs the same way. Search inputs and also additional filters wildly deviate across the product
Searching features not supported by PF4 - There is no component in PF4 that would support all currently used search features such as autocomplete, complex queries with multiple operators, etc.
After mapping all the different search inputs across the Foreman, we come up with this design proposal to cover all use-cases currently in Foreman. See interactive prototype here.
Plain search input
Basic search input (with a bookmark functionality)
Combination with filter(s)
- Search triggers - Enter/ Autosearch upon inactivity (possibility to switch on/off or alternate frequency in settings)
- Complex queries (with multiple operators)
- Fulltext search - for names / descriptions / messages (no need to add query format Name = maria)
- Bookmarks - it’s possible to bookmark a search query that was created also with an additional filter. This will be stored and restored in the form of a search query)
- Deletion with X inside the search input or filter chip
- Chip creation - at the end of the search, to better communicate selected values (results in better control over the search query - no need to scroll right/left within the small search input component) For extremely long queries, a chip truncation is an option.
Give us your feedback
These designs were discussed just with a small number of users, therefore we would like to invite you to share your opinions with us. You could either fill out a short questionnaire, leave a comment under the article, or drop me a message.
Note: This is just a design proposal, which may not be implemented exactly in this way. Recently, PF4 has been looking at our requirements and working on their own solution (not very different from the proposed one here).