[MGNLUI-8638] Styling improvements for In-App filters dropdowns Created: 20/Dec/23  Updated: 05/Feb/24

Status: Open
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Low
Reporter: Laura Delnevo Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: searchx
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2023-12-20 at 20.51.52.png    
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: SearchX 1. In-App search & Top Nav

 Description   

ACs

  • All dropdowns mouse hover state to change the background colour from white to light grey instead of the text colour from black to green
  • Add some distance between the dropdown and the filter button as per design file, 8px
  • Make the checkbox smaller and centred with the text as per design file
  • All dropdowns (except the add filter one) to allow multi-selection and therefore contain a checkbox
  • All dropdowns to be 192px wide as default
    • When there's a long text item the dropdown width to follow the longest item allowing for a 24px margin
    • The dropdown should never be wider than 288px, if a text option is longer than that, ellipses should be used
  • Add empty state for filter dropdowns (e.g: Tag filter)
  • If the dropdown list is longer than 8 items, use the scrolling/searchable dropdown. When equal or less than 8 items, use static dropdown – this is currently not working across all filters
  • Update scrolling/searchable dropdown footer to be green and bigger as per design file
  • As per figma review #4 update – Option to be grey just when mouse hovering, not to start – is still missing.
  • Update selected filter style to improve UX with NEW design
    • Dynamic number to be always visible (even after ellipses) and in a different colour
    • Tooltip on mouse hovering the filter that indicates all the filter options that are selected


 Comments   
Comment by Patricia Rodrigues [ 05/Feb/24 ]

I have added my comments to the description and crossed the ones that are already done to avoid confusion.

Generated at Mon Feb 12 09:56:59 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.