Designing complex Filters for data

[Khushli]

Hi team,

For enterprise insights, we have a need for designing multiple complex filters for data tables. I have created some solutions with a little spin on the existing components

1. I need a different type of combobox for the filter operators (e.g AND, OR, NOT) to create a clear distinction between the operators and the filters. Here's what I have created.

2. I wanted to ask about truncating options within a combobox. Which one option would you advise?

[TheSisb]

Hey @Khushli,

This kind of question would be best talked through together in an office hour. Would you be willing to sign up for one? You can find the link as a recent message in the #help-design-system slack channel.

We've also started moodboarding some patterns - filter is one. It would be great if you could drop your thoughts and iterations in the filter moodboard on Figma: https://www.figma.com/file/6MlUZI1JHp8aIWE5JCGlm0/?node-id=8%3A16148

[Khushli]

Here is the link to the Figma file - https://www.figma.com/file/lT5YYQkHap6DS0W1jsYqZt/?node-id=667%3A20098

[SiTaggart]

Hi @Khushli

To round out the Office hours, our preference would be something similar to the design below, using the disclosure.

To recap the feedback:

• Please keep the labels above all input fields in the filtering panel. This is really important for accessibility.
• Please be mindful of choosing the correct UI control to fit the interaction, and not based on it's appearance. The correct control for the appropriate task is also really important for accessibility, you can then use other tools such as copy, spacing, alignment, borders and backgrounds to create hierarchy, visual relationships.

The OHs recording is available here and the password is available in the #help-design-systems Slack channel