Can we create this using Paste: select values + tags like in Messaging Insights filter

[elainelylee]

This is a screenshot of the filter in Messaging Insights. Would like to do the same in the product I'm working on to have some consistency. Mainly, can we Paste-ify the select drowndown that shows the tags that you can easily remove? OR, use the console react component for it and swap it for a Paste version when available?

[SiTaggart]

Hi @elainelylee

The multi select combobox is on the roadmap, but not scheduled until maybe Q2 of next year.

You can add any element to the prefix of a combobox, but we don't have pills yet either so that may not be particularly helpful.

My personal preference would be to just use the react-components one and wait for the new one to drop next year for the swap. Avoid, if you can, restyling the old one to make it look like the new styles as you'll be incurring twice the technical debt.

[elainelylee]

Got it. Does this mean we shouldn't update any of those fields in that grouping using the new Paste select? Alternatively, only for that "Value" dropdown, use the react-component and swap that out later. Elaine Lee Principal Product Designer - Twilio AI [image: twilio] <https://www.twilio.com/?utm_source=email_signature> EMAIL [email protected]

…

On Thu, Dec 3, 2020 at 1:03 PM Simon Taggart ***@***.***> wrote: Hi @elainelylee <https://urldefense.com/v3/__https://github.com/elainelylee__;!!NCc8flgU!Ir5HS3THkgfJCuMWy1uJ-vbCkzFfsF6cjovDZxe1eNtg40-L62DJCgwYBAUd$> The multi select combobox is on the roadmap, but not scheduled until maybe Q2 of next year. You can add any element to the prefix of a combobox, but we don't have pills yet either so that may not be particularly helpful. My personal preference would be to just use the react-components one and wait for the new one to drop next year for the swap. Avoid, if you can, restyling the old one to make it look like the new styles as you'll be incurring twice the technical debt. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/993*discussioncomment-146729__;Iw!!NCc8flgU!Ir5HS3THkgfJCuMWy1uJ-vbCkzFfsF6cjovDZxe1eNtg40-L62DJCqzYI5wo$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABTIKLAFDDVSTUECM6GG3V3SS74KNANCNFSM4ULKLRJQ__;!!NCc8flgU!Ir5HS3THkgfJCuMWy1uJ-vbCkzFfsF6cjovDZxe1eNtg40-L62DJCgM-Fnrz$> .

[elainelylee]

Are we ok with using this same pattern where the labels are removed when you "add filter" row? cc @epardosanllorente

[SiTaggart]

It's preferable to show the label on all fields as it gives a much bigger click target for each field (clicking a label should focus it's input).

For this specific case, as the labels are all the same for each row, it's probably fine to visually hide the label of subsequent rows using the Screen reader only component, so long as the first row is visually showing their labels.

In the long term you might end up putting them in some sort of interactive / editable data grid where the column headers act as the visual labels too, once we have the data grid available.

[epardosanllorente]

So for the input label, we can use the Screen ready only component but for the combobox component, there is no such solution, right?
If we would like to hide the label for the combobox we will need to implement our own solution without using the combobox component.

[SiTaggart]

labelText for the Combobox takes children. You can pass it a <ScreenReaderOnly /> wrapped string as the label to achieve the same functionality.

As an example I've created a CodeSandbox https://codesandbox.io/s/input-and-combobox-with-visually-hidden-labels-3xzum

[epardosanllorente]

thank you, it is working 🎉