Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search component (new) #186

Open
reddolan opened this issue Dec 5, 2016 · 26 comments

Comments

@reddolan
Copy link

commented Dec 5, 2016

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

headers

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
start

Beginning of interaction
state 2

Search field fully open
state 3

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

recent searches

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
suggestions - typing

Searching dropdown
suggestions - searching

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

suggestions

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

no results

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
responsive - 768

Screen widths 544px or less
responsive - 544

  • 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
search-aligned-right

right fade for left-aligned Search
search-aligned-left

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)
small-search

Documentation is subject to change

@reddolan reddolan self-assigned this Dec 5, 2016

@reddolan reddolan changed the title Add a Search component Search component (new) Dec 21, 2016

@pchoi

This comment has been minimized.

Copy link

commented Dec 29, 2016

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?

@jaffoneh jaffoneh added the UX Ready label Jan 19, 2017

@reddolan reddolan removed their assignment Feb 28, 2017

@joshjohnson72

This comment has been minimized.

Copy link

commented Mar 15, 2017

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.

embedded-right-search

@bkcohaesus

This comment has been minimized.

Copy link

commented Apr 7, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Apr 7, 2017

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?

@mathisscott mathisscott removed this from In Progress / Design in Clarity 1.0.0 Roadmap Apr 12, 2017

@jakehockey10

This comment has been minimized.

Copy link

commented May 28, 2017

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

This comment has been minimized.

Copy link
Contributor

commented May 30, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented May 30, 2017

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

This comment has been minimized.

Copy link

commented May 31, 2017

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

This comment has been minimized.

Copy link
Contributor

commented May 31, 2017

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

@adityarb88

This comment has been minimized.

Copy link
Contributor

commented Jun 26, 2017

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

@Jinnie

This comment has been minimized.

Copy link
Contributor

commented Jun 27, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jun 27, 2017

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

This comment has been minimized.

Copy link
Author

commented Jun 27, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2017

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

@Jinnie

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2017

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.

@psingl

This comment has been minimized.

Copy link

commented Dec 26, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Dec 26, 2017

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

@psingl

This comment has been minimized.

Copy link

commented Dec 26, 2017

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

@hippee-lee

This comment has been minimized.

Copy link
Contributor

commented Dec 26, 2017

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

This comment has been minimized.

Copy link

commented Jul 11, 2018

Hey there! did anyone implemented the above search design?

@gnomeontherun

This comment has been minimized.

Copy link
Collaborator

commented Jul 11, 2018

There has been no change in implementation status for Clarity.

@vinaykhegde

This comment has been minimized.

Copy link

commented Sep 3, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2018

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!

@mathisscott mathisscott removed the Accepted label Oct 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.