Conditional Filters

[Khushli]

Project 1 - Account Insights (console)

Wanted to share the designs for conditional filters, we haven't found similar usecase for other Twilio products so we created our own keeping the Paste guidelines.

Project 2 - Twizzy (internal tool)

Again, building filters using the disclosure component for filtering search data. Looking to get feedback on if we can use Paste to build this or any other suggestions to improve this experience.

[nkrantz]

Hi @Khushli! Just want to let you know that we've seen your post and we're discussing feedback as a team. @gloriliale is on Helper Duty and will respond with an update here soon. Thanks!

[gloriliale]

@Khushli so glad you got to discuss this w/ the design team! For reference, here's some conclusions:

• The implementation of the Project 1 - Accounts Insights (console) conditional filters seems to work fine. We should eventually include this example in the Filter pattern in the future when those docs are up.

• The Project 2 - Twizzy (internal tool) implementation of using the disclosure component for collecting multiple filters works. We suggested adding a number badge in the disclosures that house multiple options that could be selected to indicate how many filters were applied when the disclosure was closed

Thanks!

[katieporter]

Hey @Khushli, I know we owe you a couple of answers regarding the Truncate component and the nested Checkboxes, too.

On the middle truncation, the Truncate component cannot do that out of the box, so we'd recommend truncating the end of the string unless you've uncovered a customer need for truncation in the center of the string. If you have, definitely let us know and we can chat about adding that functionality to the component.

On the checkboxes, I've just shared your designs with the team (apologies for the delay) and will get back to you with recommendations on how to build those nested checkboxes in an accessible way.

[katieporter]

Hey @Khushli - I've finally got some info for you on your nested checkboxes.

It is possible to compose what you've got in your designs in an accessible way (see these docs). If you or your engineering partners need guidance from us when you get to implementation, please don't hesitate to reach out.

For the carets that expand/collapse the nested checkbox items, only clicking the icon itself will be able to expand/collapse the list, because clicking the checkbox label will check/uncheck the box. You'll want to make that expand/collapse icon a button (you can use our new secondary icon button). Also, I'd recommend using the ChevronDisclosureCollapsed and ChevronDisclosureExpanded icons for that button—we generally use the other chevron icon that you've used in your mocks to indicate that a UI element will pop out (such as a secondary menu, a dropdown, etc.).

Let me know if that all makes sense or if you have any other questions!

[Khushli]

Thank you all for all the helpful feedback. I will be coming to the OH once again to review all the updates I've made including how I've built multi-selection of account SIDs in a combobox without using pills.

[loreina]

Hi @Khushli - just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video (it includes timestamps for each topic), and the password is posted in the #help-design-system channel.

To summarize some of our conversation:

• SIDs can be categorized by selected and the default list
• Success icon can be placed next to a selected SID, and removing the icon when a SID is deselected
• Using "..." to indicate the last page in the Pagination should be fine, but to explore with some user testing
• A chevron icon works to indicate a filter group that opens/closes

Thanks again for coming to office hours!