telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
375 stars 82 forks source link

Multiselect/Dropdown #439

Closed tommy-codez closed 1 year ago

tommy-codez commented 3 years ago

Hi there,

a multiselect option for dropdown or similiar component would be nice to have :)

Something like this grafik

I am not sure about accessible for this, though...

Greetings

Lalaluka commented 3 years ago

I'm not a maintainer, but I might take a look. That looks pretty cool and extremely useful.

IIRC there are specific ARIA Labels for such a use case. So it might be complicated but not imposible.

acstll commented 3 years ago

Thank you @tommy-codez for the suggestion and thank you @Lalaluka for chiming in.

It would be useful indeed.

I'm wondering whether this should be a variant of the Dropdown or a totally different component…

The Dropdown, as currently implemented, has a few known issues (specially with React), so we have this idea of refactoring it (without the select tag), sometime in the future. But the accessibility implications won't be minor: we would have to have the component fully tested again to (re)validate the AA certification.

Lalaluka commented 3 years ago

Not sure if it should be part of Dropdown either. For one I know such functionality for text fields too. For example: Bildschirmfoto 2021-07-09 um 14 55 39

So maybe a MultiSelect Component could cut it. Or add it to both Textfield and Dropdown with something like this:

<scale-dropdown multiple>

Like Material for Bootstrap does it: https://mdbootstrap.com/docs/standard/extended/multiselect/ But I'm not sure if this fits the Components design.

filipjnc commented 2 years ago

Here's a headless (neutral) ui library that provide this component with a11y: https://github.com/downshift-js/downshift

felix-ico commented 1 year ago

this is related https://github.com/telekom/scale/issues/1058