search

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
http://designlibrary.sebgroup.com
14 stars 1 forks source link

Dropdown multiselect #59

Open TheresaHedlund opened 5 years ago

TheresaHedlund commented 5 years ago

Decision from the Design review May 8

The dropdown now has another version that allows multiple selections.

image

Full specification See states and sizes here: https://designlibrary.sebgroup.com/components/forms/dropdown/#styles

Component identifier component-dropdown

Thank you! :) Ulrika Design management

TheresaHedlund commented 5 years ago

How complicated does it have to be? What's your need?

Some examples so you can see what I'm trying to say :) image

Created a first suggestion: https://share.goabstract.com/e8f20342-c78b-4e55-aae7-0467ca012182

ghost commented 5 years ago

Think it looks good @TheresaHedlund 😍 Maybe we can add this multiselect as symbols for now and when we find further needs of functionality we dig in to it when that time comes?

ulde01 commented 5 years ago

I like too, very clean and nice! If anyone has input, please share asap.

Next step is to (if you haven't already)

Did/will your team develop this and add the code to design library @TheresaHedlund ?

hjalmers commented 5 years ago

I think we need a version with an option to use an input field as well to filter the items in the dropdown, something like this: https://github.pytes.net/tail.select/ (just the first hit on google) and like your third example here https://github.com/sebgroup/design-library/issues/59#issue-431528575.

TheresaHedlund commented 5 years ago

I like too, very clean and nice! If anyone has input, please share asap.

Next step is to (if you haven't already)

  • [ ] Add this to the masterfile in Sketch,
  • [ ] Send it out for review through Abstract
  • [ ] Review it on the next Working group meeting
  • [ ] Add issues in Github to be developed
  • [ ] Show at Henkes komponent

Did/will your team develop this and add the code to design library @TheresaHedlund ?

The development of this will probably not happen until after summer, or even later, due to change of plans in project.

TheresaHedlund commented 5 years ago

I think we need a version with an option to use an input field as well to filter the items in the dropdown, something like this: https://github.pytes.net/tail.select/ (just the first hit on google) and like your third example here #59 (comment).

Do you think any of these would work better or maybe not at all? :) image And, could we choose to use "Select all" and "Search" only if needed?

hjalmers commented 5 years ago

I would vote for v3 and perhaps search should be filter or find as the user would filter the options below based on the input in the field but that's up for discussion and user testing:)

v1 and v2 might look cleaner but it might be confusing if the items/options below are removed based on the input i.e. if user types Option 3 then Option 1 and Option 2 would be removed but Select all wouldn't? v3 makes that distinction clearer in my opinion as only the options below the input would be altered:)

Select all and Search should be optional, same as the ability to select multiple values. I've actually created an issue for it here: https://github.com/sebgroup/ng-components/issues/22 (currently requires special permission as it's not public yet).

ghost commented 5 years ago

I vote for v1 with a little twist. The "Select all" should be visible even after you get suggestions on your selection. So it might need a line to. (But only if there still are a few options left.) Agree on the Filter or Find instead of Search.

didzisspruds commented 5 years ago

I would agree to Jesssi. I vote for version1 as it looks more simple to me.

TheresaHedlund commented 5 years ago

New iteration for version 1. We decided to keep the word "Search", since that seems like the most common one used in other examples.

ver1