[MGNLUI-8516] Styling filters fields Created: 03/Nov/23  Updated: 02/Feb/24  Resolved: 02/Feb/24

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.3.0, 6.3

Type: Task Priority: Low
Reporter: Laura Delnevo Assignee: Sang Ngo Huu
Resolution: Done Votes: 0
Labels: searchx
Remaining Estimate: 0d
Time Spent: 4d 2h 40m
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2023-11-06 at 18.26.21.png    
Issue Links:
dependency
depends upon MGNLUI-8524 Provide filter implementation for wor... Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Documentation update required:
Yes
Date of First Response:
Epic Link: SearchX 1. In-App search & Top Nav
Work Started:
Approved:
Yes

 Description   

There's 2 filter dropdown styles:

  • Static multi-selection checkbox
    • This one should be used where there's a small list of filters (about 8 max, depending on the screen size)
    • On mouse hovering the content turns green and on select the checkbox gets filled
    • Once an option is selected, it should move to the top of the list Discussing alternative solutions with FE team 
  • Scrollable multi-selection checkbox
    • This one should be used where there's a long list of filters (more than 8 options, depending on the screen size)
    • The user can type to search within the list  
    • On mouse hovering the background turns grey content turns green and on select the checkbox gets filled
    • Once an option is selected, it should move to the top of the list  

The add filter button dropdown list looks and behaves slightly different from the filters above:

  • On mouse hovering the content turns green
  • Once an option gets select the filter gets added to the filter bar but the dropdown remains open to enable the user to add as many filters as he needs. The dropdown will disappear when the the user clicks outside of it.

 

Designer notes: I left 2 options in the attachments and figma file. The option at the bottom i13b is the preferred one, but from previous conversations I got the impression that was not feasible with OOTB vaadin components. sang.ngo please confirm so I can clean up.


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