Clarity: Search component (new)

[reddolan]

Description

• a field or icon that can be interacted with to return a specific result or results
• search from header so that it is in a consistent place site-wide

Use cases under consideration

• autocomplete
• placeholder text
• recent searches
• hot keys
• advanced search
• responsive design

Future use cases under consideration

• operators, modifiers, wildcards
• saved searches
• formatted autosuggestions (different designs based on context)
• search from grid

Documentation

Header Options

Search will be available to all Header design patterns

Search Interaction

• Clicking on the Search icon or field will activate the Search interaction
• icon area will turn white (box around icon)
• icon will turn Active blue
• white search box will expand to fill the Header space up to 1000px (see Responsive)
• expansion will start from the search icon/field origination point
• expansion will cover all icons and links
• expansion will stop to the left of the product name area
• search field will retain the placeholder text if there was, or display Search if it was just an icon

Starting point

Beginning of interaction

Search field fully open

Recent Searches

• display recently searched items when available
• shows immediately after expansion animation is finished
• display pages and/or search queries
• pages are displayed blue like a link
• icons associated with different object types (optional)
• Search experience can be closed by: clicking “cancel”, clicking outside of the search field or dropdown, and also by hitting the Esc key

Suggestions Interaction

• Recent Searches stays visible while typing, up to 2 characters
• once the 3 character is typed, display the Searching dropdown
• if the suggestions come back quickly (~1 sec or less), immediately show the Suggestions dropdown and bypass showing the Searching dropdown
• show up to 5 of the most recent search queries

While typing

Searching dropdown

Suggestions

• Results that match the search query will be displayed in the Suggestions dropdown
• the default display is a dropdown list design
• Clarity recommends that results are displayed alphabetically
• icons associated with different object types (optional)
• users can navigate the list with arrow keys
• selected result will have a grey background to highlight the selection
• hitting the Enter key or clicking the result will navigate the user
• search query is bolded within results
• additional meta data can be associated with the search result
• Search for “[query]” will be displayed as first result and will be selected
• show up to 5 search results

No Results

• displayed when the user’s search query has no matching results
• No Results dropdown will replace Recent Searches, Loading, or Suggestions dropdowns when no results are available and depending on where the users is in the workflow
• display the search query in the No Results dropdown and bolded

Responsive

• will follow all above interactions
• Search experience will be responsive to different screen sizes
• responds to our normal break points: 768px and 544px
• the responsive versions will cover the entire Header area

Screen widths 768px to 545px

Screen widths 544px or less

• Search will have a max width of 1000px
• larger screens will push the Search to the left or right side
• Search will overlay any Header elements and will have a fade based on the Search alignment

left fade for right-aligned Search

right fade for left-aligned Search

Sizes

• standard size is 1000px (max)
• small size is 500px, when the width of Search results are narrow
• small will display right or left aligned depending on its origination

small Search (right-aligned)

Documentation is subject to change

[pchoi]

Is there a plan to introduce the following capabilities?

1. pagination (Note: personally, I think a pagination on a search component is an overkill. User should just hone in on the search query to get more relevant/accurate result. Having said that, maybe configurable number of results should be helpful?)
2. throttle/debounce

Also, as you've mentioned, this is a site-wide search. Is there also a plan to introduce a search component that you can add to a specific page?

[joshjohnsonux]

Feature request: It's been noted that showing search only as an icon may not be discoverable enough, so it would be useful to support a persistent open search associated with the right-aligned items in the header. I'm picturing something similar to the "small Search (right-aligned)" but without the "cancel" and displayed inline with the other right-aligned icons.

[bkcohaesus]

Hi, do you have any estimate when this feature might be available? 1month, 3 months, 6months? Our team is building an app on Clarity and really need search for our MVP. We don't want to do any thing custom if this is coming, but the ticked has not updated in a while.

[mathisscott]

Hi @bkcohaesus
search is not currently being implemented but it's on our short list in the coming months. Could you share a bit more about your use cases and priorities so we can see if we can re-prioritize it to help you out?

[jakehockey10]

I was just wondering how the datasource for the autocomplete is currently planned to work like. Will there be various ways to set a repository or endpoint? Thanks

[mathisscott]

@jakehockey10

@youdz can correct me on this if I am wrong but my understanding is that the datasource will be passed through your hostcomponent. most likely the autocomplete suggestions will be managed on your end through a declarative syntax similar to how datagrid rows are created.

[youdz]

Yes, this is exactly it. We will never make HTTP calls for you, for various testability and maintainability reasons.

So you'll just make the call on your side, and display the results declaratively (for instance with an
*ngFor) inside of our component.

[whizkidwwe1217]

Hi, I was just wondering if this component could also be used as an input control for forms. Will this be like an auto-complete combo box that can be used not just in the header component but in the form as well?

[mathisscott]

@whizkidwwe1217
Not really. I think the component you're wanting to follow is #248

[adityarb88]

Implementation/Fix to this should also include resolving the issues mentioned in #451 & #447

[Jinnie]

Hi all,
We have an use-case where our auto-suggesting search box should be combined with tags.
We are currently using the ng2-tag-input component (demo: http://www.buompris.co/ng2-tag-input/), but we'd prefer to switch to a clarity component once we have one.
Is there any viable chance to have tags added to the current specs?

[jaffoneh]

CC @reddolan to learn more about the above request and see if it makes sense to include in the search component or the select 2.0 component.

[reddolan]

@Jinnie #248 (Select 2.0) has a feature spec'd for tag/label usage. It is labeled as "Multiselect". Is this what you are talking about?

[Jinnie]

Absolutely. Thanks, @reddolan, I'll bookmark #248 and watch for the progress there.

[Jinnie]

Btw, will it only work with predefined values, or it will be possible to add free text entries?
In our use-case it will be a complex search field, that we want to use to filter content both on tags (predefined) and partial entity name. For example typing "delete" should filter on all actions with the word "delete" in their name, like "delete virtual machine", "delete snaphsot", etc.

[mathisscott]

Hi @Jinnie
The select 2.0 component will be the view layer for your business logic. What it filters, how it filters, or if it even _is_ a filter is the piece that Application developers would add.

Much like how the datagrid does not store your application’s state and is not opinionated about where the data is coming from.

So visually, yes, the select 2.0 component will give you the visual tools to represent all of that. But your business logic will be driving it.

I hope that makes sense.

[Jinnie]

Thanks for the answer, @mathisscott
I added info about filtering, etc, just to clarify my use-case.
My actual question is whether the select 2.0 will turn only predefined answers from the dropdown to selected entities, with border and X icon for deletion, or I will have the power to implement it in such a way, that I am able to add random text, which may not be part of the, let's call them, "options 2.0" - the predefined answers of the select component.

[mathisscott]

Hi @Jinnie
I don't see Clarity supplying that text. So anything you determine is an item will be an item. Your app will be what is sending the Clarity component these labels. I'm sure that if you have additional text you want to add or not show that you will be able to do it in the host component before it reaches the Clarity Select.

[itisparas]

I am not able to use this feature properly. Can someone tell me about me on how to use this component? I am not finding much details in the official docs.

[gnomeontherun]

@psingl This is not yet implemented, but you could use the design pattern outlined here for building something.

[itisparas]

Hey there! Has someone implemented the above search design? If yes, could you please provide with the source code?

[hippee-lee]

Hi @psingl - There is no source code for this feature. As pointed out above, this issue is the search design spec but it hasn't been implemented. If you are looking to implement your own solution you could use the design spec outlined in this issue.

[dhanunjaya]

Hey there! did anyone implemented the above search design?

[gnomeontherun]

There has been no change in implementation status for Clarity.

[vinaykhegde]

Hi guys good job, I have started using Clarity, and I wanted to know any workaround or updates on this implementation? Because we need search for our app. Thanks.

[mathisscott]

HI @vinaykhegde
No, there has been no change in status. You can see what the Clarity team is working on and planning to work on here.

Thanks!

[gnomeontherun]

The basics of a search component are available in Clarity Core already, but this issue covers a number of specific use cases that aren't supported out of the box. These feature requests have been captured into our list and we’re going to take them into consideration as we develop Clarity Core capabilities. In an effort to clean up our backlog and focus our attention, I’m going to close this as captured in our feature requests. Please follow our development and releases to see when we release relevant components to make this possible. Future feature requests can be made in our GitHub Discussions.