-
-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Re-Design Filters: select new icons to indicate filter state #1837
Comments
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) 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 |
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 ): |
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 Active Icon State (filled filter icon) : Filter/Sorting applied: Filter Alt #F9FAFB |
Approved by stakeholders: 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: Filter Alt Unfilled Active Icon State (filled filter icon) : Filter/Sorting applied: Filter Alt |
Added the icons to the new prototype in #1885 |
Dependency
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:
Here are some suggestions for icons to use:
Action Items
Resources
The text was updated successfully, but these errors were encountered: