Filtering

Filters are a set of components that filter the items of a list or table.

Filtering components could contain a list of the filters, tags displaying the selected filters, the list of results, a count of items displayed, pagination, a “sort by” dropdown, and a search field to further narrow down results.

How filtering works

Choosing multiple items in the same set is additive.

For example, if I choose “Roads” and “Bridges” in the “Type” set, the results will show list items that are either “Roads” or “Bridges” or both – not just both.

Choosing items in different sets is subtractive.

For example, if I choose “Roads” in “Type” and “Complete” in “Status”, the results will show list items that are both “Roads” AND “Complete” – not items that are “Roads” or “Complete”.

Filter list items become disabled when their results become 0.

As filters get applied, some items will have 0 results available in that set of list items. As those get zeroed out, they become disabled, so the user doesn’t end up with a selection that returns no results.

For example, if I chose "Roads" in "Type" and there are no "Fish passages" that are also tagged "Roads", the "Fish passages" number updates to 0 and becomes disabled.

Selecting a filter option adds a tag to the list of results.

Selecting a filter immediately applies the filter to the list of results on all screen sizes. When a filter is applied, the tag for that filter gets added to the top of the list, indicating to users that the filter is on.

Single-select filtering

Some pages have multiple sets of filters but should only be filtered by one set at a time. An example of this is Cameras. The filter sets are 'mode' and 'collections' but choosing 'Airports' and 'Best views' might not return any results - so we opted for a link styling over a checkbox or dropdown styling.

Use this styling when only a single selection at a time is recommended.

List of filters

Anatomy

The list of filters has multiple sets of filters with a title for each set. Sets can have a "view x more" link and a search field.

Interactions

The filters only display the first handful (somewhere between four and six) of filters in each set in order to give the users a succinct preview and make for a more accessible list.

The precise number shown is vague in order to let each page template show the right count for those specific filter sets and to reduce the possibility of just hiding one in each of the sets.

For example, if a filter list has a set with five items and a set with 24 items, showing five before collapsing the remaining 19 is fine.

But if another page has a filter set with six items, and one with 24 items, we don't want just one hidden in the first list - so this page template can have six showing before collapsing the others.

Just keep in mind what is best for that page template and the filter options that a

Responsive

On small screen sizes, the filter list collapsed into a fly out menu that opens up from a Filters button. The list scrolls and has a “Reset all filters” button at the bottom of the list to allow mobile users to quickly remove all filters. The menu has a “Done” button at the bottom that closes the filter fly out menu.

Inspect list of filters in brand styles in Figma

List of results

Anatomy

The list of results will always have a count of the results and a count of how many are currently being displayed in the list. Pagination shows at the bottom of the list and is currently set to show 10 results at a time. Before the list of results is also the ability to search by keyword to filter down the results (optional), a list of tags showing currently applied filters, and the sorting dropdown to re-order the list in various ways. Each data set will have different sorting options.

Specs

• Search bar

  • Label font-size/line-height: base2/base4 (does not scale up or down as browser changes size)

  • Label margin bottom: 6px

  • Search bar width/height: 100%/32px

  • Margin-bottom: 24px

• Count, "sort by" & field

  • font-size/line-height: base2/base4 (does not scale up or down as browser changes size)

  • Field width/height: 168px x 32px

  • Margin bottom: 8px

  • Horizontal-rule at bottom: 1px solid gray 20

• Cards

  • Drop shadow: list item card

  • Card padding: 16px

  • Space between lines: 4px

  • Margin between cards: 16px

  • Visit each Page Type for specific type treatments used in the cards.

• Tags

  • Space between tags: 8px

  • Tag padding: 2px 4px

  • Font-size: body smallest

Interactions

Clicking on the tags will remove that filter from the query and change the results to not have that filter applied.

Inspect list of results in brand styles in Figma

Maps

Some data sets with filtering have maps plotting the data. The map display and the filter list should be as integrated as possible – so when you adjust the filters or the map, the other adapts to that result set as well.

Technical feasibility of this is to be determined.