search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.87k stars 1.82k forks source link

Multiselect pattern with selected options shown #2878

Closed Ashley-Johnson28 closed 5 years ago

Ashley-Johnson28 commented 5 years ago

Summary: 
We need a component that allows our users to select multiple options from a dropdown search and show what they have selected.

Justification: 
Our users must feel confident that they know the exact selections they’ve made and be able to edit/delete those items with ease. Selecting very technical data can be difficult and requires a second confirmation by showing the user what they’ve selected.

Desired UX and success metrics: 
In the prototype below you can see the desired behavior of the components in a small version as well as a large.

v10 example: https://ibm.invisionapp.com/share/WQNYXVC2H45

“Must have” functionality: Show selected options Need to select multiple options at once

Specific timeline requests: 
Would like to use this in our next release in September.

Resources: 
Contributing developer: (currently working on the react build) @Alexander-Melo - Alexander.Melo@ibm.com

Contributing designers: @rtonev - rtonev@ibm.com @Ashley-Johnson28 - Ashley.Johnson@ibm.com

asudoh commented 5 years ago

Hi 👋 thank you for writing this up! Is it close to filterable variant of http://react.carbondesignsystem.com/?selectedKind=MultiSelect&selectedStory=default? You can go to KNOBS tab at the bottom and check off "filterable" knob to see that.

Ashley-Johnson28 commented 5 years ago

@asudoh Yes this is close. It is a filterable dropdown. But the difference is they need to see what they have selected. We would like to add a component that uses this pattern but allows the user to view all they selected.

emyarod commented 5 years ago

seems related https://github.com/carbon-design-system/carbon/issues/2422 https://github.com/carbon-design-system/carbon/issues/2571 https://github.com/carbon-design-system/carbon/issues/2640

Ashley-Johnson28 commented 5 years ago

@emyarod I definitely think these examples show similar features but none solve our problem. We do feel strongly that a variety of teams could benefit from our example. Let me know what you think!

asudoh commented 5 years ago

@Ashley-Johnson28 Great that you came up with a component that you think would be beneficial for multiple teams! Looking forward to seeing the prototype. One question from dev perspective - Would it be a trivial addition/modification to our <MultiSelect>? Another question, from design perspective this time - Is there a quick screenshot that shows the selection stuffs?

Ashley-Johnson28 commented 5 years ago

@asudoh The prototype is actually attached in the ticket! Please use the link below to click through and see our design....

https://ibm.invisionapp.com/share/WQNYXVC2H45#/screens

Ashley-Johnson28 commented 5 years ago

@asudoh I labeled it 'v10 example' in the ticket but should have been more clear and labeled 'prototype'

asudoh commented 5 years ago

@Ashley-Johnson28 Thank you for the link. The link seems to show an integration pattern of multi-select and data table, correct me if I'm wrong here.

creckling commented 5 years ago

In Watson IoT we have the same request and feedback about the current component. It is more typical to show the selection in the chip. image

Ashley-Johnson28 commented 5 years ago

Thanks @creckling - Yes that is definitely the preferred pattern. The issue is our content could be text strings of technical data the user needs to see. So the real estate won't allow it. That's why our solution needs the second part to the component.

Ashley-Johnson28 commented 5 years ago

@asudoh Yes for the 'large' option we tried to use established designs to limit the redesign effort and to stay consistent. The 'small' pattern uses a variation of the multi select but allows for your selection to be shown to the right of the dropdown.

designertyler commented 5 years ago

@creckling would it be acceptable for your use case if the selected tags appeared outside the dropdown or did it require the selection to be inside? It makes sense outside to allow for longer tag names and to not limit text input.

@Ashley-Johnson28 are you proposing to have the selected tags only appear to the right or could it be configured above or below?

image

Ashley-Johnson28 commented 5 years ago

@designertyler My issue with putting it below is that the dropdown will then 'hide' the information (we played around with this option) and putting in above can change the height of the page if it is in a form for example. With the selected state to the side the content that might be below will stay in place. If you see our 'large' example we do put the table below. This option if for the extremely detailed data you may be selecting.

creckling commented 5 years ago

It is taking up horizontal space if the selection is next to the dropdown. Let me see if I can find some real examples in our products.

creckling commented 5 years ago

not a real product yet but a mockup where the field width is pretty wide and can handle more text. image

Ashley-Johnson28 commented 5 years ago

@creckling What happens when you fill the dropdown space in this example? The reason I liked the secondary input space was because it could get longer (in height) if needed but when you change the height on a dropdown it gets a little wonky.

creckling commented 5 years ago

In this case, it is okay for the field to expand vertically (like a to: field in the inbox).

naythanwilliams commented 5 years ago

Hi. I'm working on a similar issue for Songtrust - where we're using Carbon as our base component library. I'd love to contribute to a solution to this issue, since I'm currently trying to rewrite some of the MultiSelect logic to support showing deletable tags outside of the select dropdown.

creckling commented 5 years ago

I wonder if your use case works with this type of list building pattern. You have a list on left and the selected items on the right. image

naythanwilliams commented 5 years ago

I'll run it by our designers and see if this is something we could work with.

Yuanwwwwww commented 5 years ago

To follow up on Naythaniel's comment. Is there any technical reason for the smaller version to have max 10 selected items? If we could take out the container for the selected items, and display the selected results in either chip and list item form as below, would that be feasible?

image

stale[bot] commented 5 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

stale[bot] commented 5 years ago

As there's been no activity since this issue was marked as stale, we are auto-closing it.

iozzyi commented 4 years ago

I am also looking for this feature - named items once selected and limited options. I know other libraries do it but it would be nice to have a single component library.

keehun commented 3 years ago

I would like to +1 on this component.

DenisCor commented 1 year ago

2023 and they still didnt add this to MultiSelect...