New autocomplete component using downshift

[steverydz]

Referenced in https://github.com/canonical-web-and-design/snapcraft.io/pull/3709/files/1dac9743a7cd553ae40d78baa44431856b032011#r727302510

It would be good to have an autocomplete component, perhaps using https://github.com/downshift-js/downshift

This is used on the snapcraft brand store

Design: https://app.zeplin.io/project/60c863a20f844214a2a97f3c/screen/61362d637a071a2f2c18cd9f

[huwshimi]

Hi @steverydz do you think the datalist element would work for you, or are there more features you need? We recently started using datalist in MAAS.

https://vanillaframework.io/docs/examples/base/forms/datalist

[hatched]

IIRC the design called for a styled multi-row list to select from in the drop down.

[steverydz]

@huwshimi yes @hatched is right - the suggestions list used styled cards with two rows for the results. We don't necessarily need a specific component as it relies heavily on a third-party library?

[hatched]

The reason we would provide a wrapper around it is so that we can standardize the feature set, have consistent styling, and have a single place where people can come to pick 'blessed' components from for our projects. So I think even though it will end up being a very thin wrapper around the third party library it's still valuable for the team.

[bartaz]

The reason we would provide a wrapper around it is so that we can standardize the feature set, have consistent styling, and have a single place where people can come to pick 'blessed' components from for our projects. So I think even though it will end up being a very thin wrapper around the third party library it's still valuable for the team.

I agree, especially that it seems it has some specific styling designed, so we should turn it into Vanilla component, to ensure the styling is consistent across different uses of it.

Overall, as it sounds like a component with specific new styling it should be proposed to Vanilla, get reviewed by working group and implemented into Vanilla framework and React component here.

Does downshift impose any constrains on the shape of the component (in terms of HTML structure of the search results for example)?

[steverydz]

Does downshift impose any constrains on the shape of the component (in terms of HTML structure of the search results for example)?

No, it's very flexible in regards to that. You can use any HTML you want.

See: https://github.com/canonical-web-and-design/snapcraft.io/blob/master/static/js/brand-store/Snaps/SnapsSearch.js

[bartaz]

@steverydz Great, thanks.

Can you update the description with some screenshot/gif of the component, or link to designs if you have them? This would be helpful when proposing the component to Vanilla working group.

[steverydz]

@bartaz done

[clagom]

@AnnSoMuller a couple of examples:

• ubuntu.com > not implemented: https://zpl.io/VxNjdOk
• Juju Dashboard > part of the search and filter compoent: Then once you click:

[AnnSoMuller]

I have added the "autocomplete list" on the google document "Search & Filter pattern - documentation" here for review

[AnnSoMuller]

@davegoddard42 @marinacastejon @wgx if you want to review ^^

[davegoddard42]

@AnnSoMuller - this is great work! I've left a few very minor points on the doc.

I noticed this is in the Search and Filter component specs, but the S&F already has a drop down functionality. I'm guessing this doesn't replace that? Should the functionality proposed actually fit in with the Search component, not the S&F? (It's so confusing with the naming...) Admittedly there isn't a Search specs doc yet - that's what I'm planning on doing this week - we can add this in too.

[AnnSoMuller]

@davegoddard42 Thanks for the feedback! Indeed, It is to add to and nor replace the dropdown functionality :)

Good point too that I was first looking for the search spec and found out there is only the S&F one with the split part that explains you can split it :D I've tried to stay simple and put the autocomplete where I thought I makes more sense. Feel free to copy paste (or adapt!) that part into a search spec if you write it! I'll be happy to help or review. Thanks!

[davegoddard42]

Awesome @AnnSoMuller. Yes, I will definitely add this into the Search specs doc. And I'll run it past you once written for review. Thanks

[cristinadresch]

@AnnSoMuller are the specs now finalised? could you paste the link here pls

[AnnSoMuller]

@cristinadresch I have posted the link above :) But here it is => Specs I wanted to present (in DA and Vanilla WG) before closing it. If we agree, I'll post the adding bit in discourse Thanks!

[marinacastejon]

Reviewed on my end too. Thanks @AnnSoMuller !