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.