Skip to content

Wildcard V2: Introduce `MultiSelect`

Warren Gifford requested to merge kr/multiselect into main

Created by: courier-new

Introduces a new component to the Wildcard component library, the MultiSelect! It's like a Select, but you can choose 0 to as many options as you want.

We have encountered a need for this component within Batch Changes in order to support filtering a list of batch changes or changesets to multiple statuses at the same time. I didn't see any reason not to make this more general-purpose, so here it is. 🙂

Since this component isn't yet scoped out in the Figma Wildcard design system, I piggy-backed off of a fully-featured, accessible, select input control library, React Select, for the internal component implementation and then painted a heavy layer of style customization on top of it to match Input and Select. I chose this over using the native <select multiple> because the native component doesn't allow for the sort of visual customization of options we would want to fit this into the Sourcegraph brand. MultiSelect wraps React Select's component and works in both light and dark theme mode.

I encourage you to check out its Storybook story to get a feel for it, and please let me know if you can identify any visual discrepancies between it and Input or Select that I might have missed. I'd also love to get a sign-off from a designer that this would be "good enough" to start out with, but since it'll only narrowly be used in 1 or 2 places in Batch Changes for now, I'd prefer to save more significant refinements for a follow-up later on, if any are surfaced.

As a side note, React Select's component technically supports both multi- and single-select, so we could hypothetically merge it with our Wildcard implementation of Select if we wanted to.

Test plan

This is 99% new code, and the minor CSS variable refactor that constitutes the other 1% is covered by existing Storybook stories. The new code is also covered with its own Storybook stories, and I thoroughly tested the component by hand from that story. I could also add a snapshot test if we would like.

Merge request reports

Loading