paranext / paranext-core

Electron client, extension host, and C# library for Paranext
https://paranext.github.io/paranext-core/
MIT License
17 stars 2 forks source link

Add multiselect to combobox #1325

Open rolfheij-sil opened 1 day ago

rolfheij-sil commented 1 day ago

image


This change is Reviewable

Sebastian-ubs commented 1 day ago

lib/platform-bible-react/src/components/basics/combo-box.component.tsx line 71 at r1 (raw file):

  if (Array.isArray(value)) {
    if (value.length === 0) return buttonPlaceholder;
    return value.map((entry) => getOptionLabel(entry)).join(', ');

In addition to the concatenation of the value (that will soon run out of space), we need another functional parameter that will define the label based on the array input (if provided). Alternatively buttonPlaceholder could be made a function that takes the value as input. Screenshot 2024-11-21 151043.png

jolierabideau commented 1 day ago

Thanks Rolf, this is super useful! Just curious if the UX design for ComboBox is that they are always multi-select and we should use a different component like Select in other places? I'm working on the new settings design and need a dropdown for the projects that is searchable but not multi-select. I was imagining we could add flags to the ComboBox props, and put different functionality like multi-select and clearable behind them.

jolierabideau commented 1 day ago

@rolfheij-sil That makes sense! Yes, I think that would work

irahopkinson commented 1 hour ago

My 2 cents. You could keep the complicated component as the internal implementation detail and only export several wrapper components that simplify the options.