Combobox component (new)

reddolan commented 7 years ago

Description

a Select component that allows for typing as well as scrolling through options
similar to autocomplete or combobox

Use cases under consideration

type into field and filter down to options matching query
click something to show the options available
scroll through list and select an option
multi-select
option grouping (or categories)
accessible navigation, option selection and option deletion
system status for slow responding option list
highlight value matches in options

Documentation

Basic

Default view

will look like a standard Select
caret will be grey and have an circle around it to distinguish it from a standard Select
the input field will show the standard input focus style (blue underline) while being interacted with

inactive

Active view

clicking the caret will show the Options dropdown
with the dropdown showing, the arrow keys can navigate up or down through options
hitting Enter will select the option and display it in the input field
show up to 10 options at a time
if more than 10 options exist, user will be able to scroll down through them
hover or highlight while scrolling will be the hover grey (#EEE)

active - hover

Selections

selected option will be the row selection blue (#D9E4EA)

active - selected

Typing

tabbing into the field will show the cursor in the input field
options are displayed after 1 character has been typed
query values are highlighted bold within each matching option
pressing the down arrow key shows the dropdown
user can tab to the caret and activate the dropdown
tabbing out, clicking outside of, or hitting Escape will close the dropdown

active - typing

Searching message

if the options come back quickly (< 100ms), show the Options dropdown
if the options load slowly (> 100ms), show the Searching dropdown
Searching message will use the Select's label value

searching

Multiselect

includes all Basic interactions
user can select more than one option by clicking on it or hitting Enter
holding Shift and selecting two separate options will select all options in between them
hitting Enter or clicking outside of the dropdown will make the option visible in the input field as a Label
the Label will have an “X” in it for easy removal
selecting the Label and deleting it will remove it from the selected options

labels

Labels will fill the space available in the inut field and over flow will wrap vertically

many labels

Option Groups

options can be displayed on groups with a title

option groups

Custom Option Format

option can be formatted in a custom way
can be used to include additional useful data such as images or other data

custom options

References

mathisscott commented 6 years ago

@luis-cortina Thanks for the offer. @youdz would have more details on where this is at present.

mathisscott commented 6 years ago

@mvcoding The Select2 component was in progress but is now on hold until we have someone free to pick it back up. That may not be until later this year. So it is possible that this component isn't finished until early next year sometime.

luis-cortina commented 6 years ago

@youdz what branch is this on now?

youdz commented 6 years ago

Right now the partial implementation is on the topic/select2 branch. The branch is quite a bit behind master so you don't want to try to build Clarity from it, but you can browse the select2 code on it.

Because we do not know how long this component is going to be waiting for final implementation, we are planning on merging the partial implementation into master just to keep up with the frequent refactors we go through. Here is the corresponding pull request. This does not mean the select2 component will be ready to use when merged. The implementation is still partial and the component will not work correctly at the moment.

jwiesmann commented 6 years ago

Hi all,

today i was playing around with the https://cuppalabs.github.io/angular2-multiselect-dropdown/#/limitbadges multi select box. You can add your own styles to it and so on. I am far away from being good at css, but if you cannot wait and want to give it a try... Here you can find my results from todays testing (a lot of !important, not really the nicest, but it is working quite ok so far and it looks nice in my opinion)

Here you can find a working stackblitz: https://stackblitz.com/edit/clarity-light-theme-v11-d8su69? https://clarity-light-theme-v11-d8su69.stackblitz.io/

like i said before, it is far away from perfect, but it could be a good solution if you have no time to wait :) If anybody has some hints of how to make it even better, please let me know.

And thank you the @Clarity Team for such an outstanding job!

Ketec commented 6 years ago

+1

I have gotten almost everything done on clarity (with custom css and such naturally) - all except a grid context menu and now ran into this.

Unfortunately it seems it won't be around for a while so have to look for a third party option (not worth implementing from scratch time wise). Something like ng-select (less other bloat - just the select).

speti43 commented 5 years ago

Hi All,

Is there any prognosis, when will this be available in any release?

geek-at-heart commented 5 years ago

We ended up having to go with ng-select, but are pretty happy with it. https://github.com/ng-select/ng-select

speti43 commented 5 years ago

@geek-at-heart looks good, a clarity skin would be perfect and then I could use it :)

jacobbutton commented 5 years ago

Will this have the ability to filter via a custom search function like ng-select does?

gnomeontherun commented 5 years ago

@jacobbutton I believe it should, though the design doesn't really denote that. There will have to be a way to do custom searching to support server driven lists.

markofranjic commented 5 years ago

Hi Team, do you have eta when select 2.0 will be released?

Regards

jacobbutton commented 5 years ago

According to the Work in Progress wiki, April, tentatively. I imagine that's subject to change.

ygoron commented 5 years ago

Really need this component... Any updates?

mathisscott commented 5 years ago

@ygoron The Combobox (a.k.a. Select 2) is in progress. Up-to-date status is always available here.

sheribyrne commented 5 years ago

Accessible multi-select is tricky. There is some good advice on it at https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/listbox/listbox.html

Mennez commented 5 years ago

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.

https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

bendem commented 5 years ago

Is there any plan to support this before 2.0? If not, I would love to know what's the status of the 2.0 release. A percentage of some sort maybe? 👼

gnomeontherun commented 5 years ago

It is in active development and will be in a release as soon as it is ready. We have no delivery guarantees, so any questions about when it will land cannot be answered. You'll all know based on release notes when its available.

yuezhizizhang commented 5 years ago

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.

https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

$dark-theme-highlight-color is not defined.

d-m-s commented 5 years ago

It is pretty clear to everyone in software development that release dates and feature scope are matter to change and not guaranteed at all!

Fair enough!

But a component that has been designed almost 3 years ago, partly implemented more that a year ago in branch, then multiple times rescheduled and not yet released, currently being overdue since 2 days - simply leaves some questions to the users of the design system you're building!

In general I think you guys are building a really great design system, in a perfect open-source manner!

But please, add some more project management and predictability for the users of your design system!!!

Just one picture to make it even clearer .... missingprojectmanagement

the release which is overdue by 2 days is 33% completed (67% unfinished!)
the stuff that should be done some day is 20% complete, the gap is just 13% ...

Mennez commented 5 years ago

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms. https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

$dark-theme-highlight-color is not defined.

Fixed. This was a local SASS color variable. Added the variable to the gist.

TrifonovSergey commented 5 years ago

There is any progress in this? 50% or 90% done maybe? About 5 months component is in active development phase... maybe it's time to release it in parts? or change the developer? This is a common practice of IT project management, I don’t understand why they are not used on clarity project. Also, I hope the project manager noticed that this is the most anticipated component at this moment.

mathisscott commented 5 years ago

@TrifonovSergey The combobox has been impacted by two separate efforts.

The smart popovers. It made no sense to complete the combobox without smartly positioning its dropdown.
A company-wide focus on accessibility improvements across all products (even Clarity). All development for Clarity was put on pause for 2.5 months to focus on fixing critical accessibility issues and backporting them to 1.0. This effort needed to reach conclusion by September.

For what it's worth, our zenhub board is open to the public so you can see exactly what's in flight.

Also, fwiw, there is a test page for the combobox in its current state at http://localhost:4200/combobox/basic if you fork or clone our repo and run npm start in terminal. You can see it there. It's not ready for release and there's still some work we need to do with it. But, if I'm not mistaken, I believe the public-facing API is fairly stable.

The combobox should be back in development soon. Thanks for the interest. We would love nothing more than to get it released.

TrifonovSergey commented 5 years ago

@mathisscott thank you very much for the detailed answer! Now the situation with this task and focus of the project is clear for me. We look forward to the release of this component, which, as I understand, will not be earlier than November.

webplease commented 5 years ago

I follow too, the Clarity autocomplete function is too important.

EvanSevy commented 5 years ago

I'm very interested in this feature as well. I'm strongly considering Clarity for my needs and am hoping this feature will be out within the next 1-3 months.

Are their any updates on a possible release time frame?

gnomeontherun commented 5 years ago

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

dannyr-git commented 5 years ago

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

Oh wow, so we're not making v3 either?

3 Year Anniversary of this component!

webia1 commented 4 years ago

Understanding question: Autocomplete is not ready yet?

mathisscott commented 4 years ago

@webia1 For a simple autocomplete form field, checkout the datalist component in 3.0

For more complex autocomplete fields, @Jinnie and @hippee-lee can provide an update

Jinnie commented 4 years ago

The combobox is under active development. There had been some accessibility related technical complications, but they are overall resolved now and we're back to the normal planned development process.

jmls commented 4 years ago

oooh, any idea if this will make it into v3 ? I need this so badly ...

HarperHampton commented 4 years ago

ETA on this would be exceedingly helpful. We are preparing a new project and I would prefer to use Clarity over Angular Material. Can make adjustments to code around this if I know it's coming.

mathisscott commented 4 years ago

@HarperHampton and @jmls

There is a WIP branch in review right now. I don't think this will be in 3.0 but I believe we are planning to have it ready for 3.1 – which should land shortly after 3.0.

I think time-wise that puts this on the 4-6 weeks away timeframe. Maybe sooner. Maybe later. Depends...

Jinnie commented 4 years ago

@colinreedmiller We'd need a dark theme design spec for this component, thanks!

colinreedmiller commented 4 years ago

@jinnie - left a note in the Figma file - all dark theme colors specified there. also: changed the dismiss X to 5px - let me know if you have any thoughts, questions.

d-m-s commented 4 years ago

is the development of this component further pursued or will this be replaced by datalist? https://clarity.design/documentation/datalist

gnomeontherun commented 4 years ago

@d-m-s The datalist is a lightweight HTML element that we could easily support. The combobox is still being built to work for more complex situations, so you'll have both options.

hippee-lee commented 4 years ago

@d-m-s combobox has an open pull request thats currently under review if you want to take a look at it while it gets polished: https://github.com/vmware/clarity/pull/4286

shankar1318 commented 4 years ago

@hippee-lee @gnomeontherun when can we expect combobox release? I am waiting for the multi select functionality.

hippee-lee commented 4 years ago

Hi @shankar1318 - please follow the PR https://github.com/vmware/clarity/pull/4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

adumesny commented 4 years ago

good to see such a control coming out. Is there a plan for a Search widget that would be similar ? could maybe even restyle this one as I've been thinking of a search (type anything) + filter combo like this:

gnomeontherun commented 4 years ago

@adumesny We don't have any design or explorations for something like this, but I believe the combobox can provide you most of what you really need here. I don't really understand the mechanics or use case of this control at this moment.

adumesny commented 4 years ago

@gnomeontherun even if you ignore my custom design (search + filter) a simple search field with type ahead suggestions like this new comboBox (but with highlighting of the matching pattern) would be great. Every product seem to re-create their search...

sisohs commented 4 years ago

Hi @shankar1318 - please follow the PR #4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

@hippee-lee will this be available in the previous versions of Clarity?

Jinnie commented 4 years ago

The combobox is finally officially in our repo, waiting for the next release. Please add all related problems, suggestions for improvements, direct contributions with code, design, documentation, etc, in separate issues or pull requests, so they can get focused attention and prioritization. Thank you!

mathi123 commented 4 years ago

@Jinnie Any idea when this will end up in the v4.next package? I have been eagerly waiting for this ;)

gnomeontherun commented 4 years ago

Its available in https://www.npmjs.com/package/@clr/angular/v/4.0.0-rc.0

vmware-archive / clarity