Experimental Design [Filter List Component - Secure Messaging]

[jerobertso]

What

This component is used to filter through the list of messages on an inbox. The filter has an input field with a button, and then the filter can expand to reveal a couple additional fields like the date field and the category dropdown menu. Additionally, there is an informational drop-down that is optional to the component, but is listed within the examples below.

Purpose

This component is used to filter the list of messages within the folder it is on, it adjusts the page that it is being viewed on.

Usage

A user would use this component to more easily find a particular message within a larger list. They would type in a keyword that relates to the message or filter using one of the filters in the expandable portion. This would repopulate the page with the results.

Behavior

The user can input anything in the first input field. The date field works the same as the current date field in the design system and the Category field is a drop down. Basically, the component has form components that work the same as they currently do, they are just within the larger filter component.

Examples

Expanded in Inbox: Mobile | Desktop Collapsed in Inbox: Mobile | Desktop Post Filter List View: Mobile | Desktop

Accessibility

Has been run by accessibility.

Guidance

This was a design initially proposed by Matt Dingee in the Midpoint review for Messages as it moves from MHV to VA.gov

Research (optional)

Originally this was tested as a search and that did not do well, so per the guidance of Matt Dingee and the research we changed to this filter component.

Code (optional)

N/A

Next steps

Asynchronous review requested.

[jerobertso]

@caw310 not exactly sure how else to tag you for this ticket.

[caw310]

@jerobertso , feedback will be added to this ticket.

[humancompanion-usds]

@kfink24 - Did this filter design make it into Secure Messaging? If so, can we get an update on what it looks like in production and would someone from the team be able to bring this to Design System Council?

[underpaid1ntern]

Hi @humancompanion-usds , here are some images from staging. Something to note is that we're working on migrating v1 components to v3 so we currently have a bug where the accordion that holds the "additional filters" is displaying w/ a white background.

Desktop:

Mobile:

Some things to note:

1. We're currently looking at ways to minimize its footprint, esp on mobile since it pushes messages down almost 2 viewports at 320px resolution
2. We currently have a conditionally revealed "Clear filters" button which we're actively working on redesigning that interaction since it's not WCAG compliant for how to handle conditionally revealed content
3. Our custom date picker technically is not WCAG compliant either so we need to rethink how that element works

Here is an example of the conditionally revealed date picker. Once "custom" is selected, the "start date" and "end date" fields are revealed.

[babsdenney]

There is a request in the #platform-design-system to have guidance for

• When to use a pagination vs. a long list pattern
• How many list items per page

[underpaid1ntern]

Hi, some updates:

• We're taking this component through the Collaboration Cycle
• We've updated the design and also are suggesting to put it into an accordion since it takes up a lot of room, especially on mobile... and our research has shown that it's only used about 10% of the time.

[benbrasso-agile6]

Has there been a DSC meeting on this pattern/component yet? Would be interested in attending, as Appointments are getting ready to create (or add to) a filter ED component. Figma file.

[underpaid1ntern]

@benbrasso-agile6 , not yet - will be sure to invite you when there is one!

[benbrasso-agile6]

Thanks; I'm working on a draft for, basically, the same pattern. Will share in Slack so we can knowledge share and compare. I should have it up today for review, comments, etc.