Re-Design Filters: select new icons to indicate filter state

[NilakshiS]

Overview

We need to some icons to visually inform users about which filters are active or selected. But the iconography from previous designs has been replaced by Material UI icons, so new icons are needed to indicate Filter states.

Details

The previous design for filters uses the following default and hover icons for the Filter.

However the old icons have been replaced by Material UI icons and the style guide currently uses the MdFilterAlt icon

From Material UI icons, select appropriate icons for the different possible states of the filter:

• Default icon state (Filter/Sorting not yet applied)
• Hover icon state
• Filter Active icon state(Filter/Sorting applied)

Here are some suggestions for icons to use:

• From Dev:

  We might also need an icon to indicate that a filter is not applied to the column - Maybe MdFilterAltOff?

  • FilterAltOff
  • 
• From Product:

  Product thinks it should use filled and unfilled

  • 

Action Items

• Select an icon for each of the following states, add more if needed:
  • Default icon state (Filter/Sorting not yet applied)
  • Hover icon state
  • Filter Active icon state(Filter/Sorting applied)
• Update the Figma Designs and Prototype to use the new icons.
• Review with Product, Dev and Research and iterate if needed based on feedback.
• Update the style guide to add the new design.
• Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• List of Material UI Icons
• An example of how filters are displayed in Google Sheets
• My Projects page https://tdm-dev.azurewebsites.net/projects
• Design Issue for filters Design Mockup: Redesign the My Projects Filtering UI #1578
• Link to Figma file
• Link to the Figma Prototype for filtering UI

[marlenamellody]

In the current design of the "my projects" page, the filter icon has been replaced by Material UI icons and there's no visual change to indicate filter states when a filter is added or selected:

Suggestion: (Reference: google sheets)
After reviewing options with the design team, we decided to use filled/unfilled versions of the same icon to represent possible states of the filter.

Default State (unfilled filter icon): Filter/Sorting not applied: Filter Alt Unfilled

Hover State (unfilled filter icon with background color): positioning cursor over icon without selecting it:

Active Icon State (filled filter icon) : Filter/Sorting applied: Filter Alt

Blocker: need to determine background color for hover state icon

[NilakshiS]

Feedback received in the Stakeholder Prep meeting (09/19/24):

Provide icons with suitable foreground and background colors to fit the dark blue background of the table headers on the dev site.

Suggestions for hover state background color (examples from Google Sheets when column background color is set to #002E6D ):

• an unfilled icon with light background (Hover icon state):
  
• filled icon with light color (Active icon state):
  

[marlenamellody]

Progress: Identified icons and suitable foreground and background colors to fit the dark blue background of the table headers.

Default State (unfilled filter icon): Filter/Sorting not applied: Filter Alt Unfilled: #F9FAFB

Hover State (unfilled filter icon with background color): positioning cursor over icon without selecting it: Filter Alt Unfilled
icon color : #002E6D with background color: #F9FAFB with corner radius 2.

Active Icon State (filled filter icon) : Filter/Sorting applied: Filter Alt #F9FAFB

Figma Prototype