UI changes to Admin Reports
- Kara Michelle Liu
- Felicia Mizgorski
We need to update the look of the filters in order to accommodate all the new student information.
Filters
User Story
As an admin who uses multiple filters to customize my search results, I need to be able to easily find the search fields that I need to select to review the correct data.
UI
Please update the color to gray 400 and sizing to 13px in accordance with the figma slides.
Acceptance Criteria
The text inside the drop down is 13px (20px line height) and gray 400.
Filter Selection/removal
User Story
As an admin who uses multiple filters to customize my search results, I need a quick visual of my selections so that I am sure I included all of the demographic data needed for my search.
UI
User clicks on the drop down filter(s) and makes selections.
To de-select a filter item, the user clicks on the x inside the blue chip.
Alternatively, to de-select or replace an item the user makes an additional selection for the drop down filter(s) at the top.
To clear all of the filter items, the user clicks on Clear All.
Acceptance Criteria
All filters are single-select.
Given a selection is made from a drop down filter, the filter heading will turn blue. (See image: Selections Made)
Given a selection is made from a drop down filter, a blue chip is created and shows the item chosen. (See image: Selections Made)
Given the x is selected on a blue chip, the filter criteria is removed.
Given Clear all is selected, all filters are restored to an unselected state.
Filter Dropdown menus:
Filters
User Story
As an admin who uses multiple filters to customize my search results, I need to be able to easily read the options for each filter.
UI
Please scale down the font size to 13px (20px line height)
Acceptance Criteria
The text inside the drop down is 13px (20px line height).