Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-8516

Styling filters fields

    XMLWordPrintable

Details

    • Task
    • Resolution: Done
    • Low
    • 6.3.0, 6.3
    • None
    • None

    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.

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                sang.ngo Sang Ngo Huu
                ldelnevo Laura Delnevo
                Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:
                  Work Started:

                  Checklists

                    Task DoR

                    Time Tracking

                      Estimated:
                      Original Estimate - Not Specified
                      Not Specified
                      Remaining:
                      Remaining Estimate - 0d
                      0d
                      Logged:
                      Time Spent - 4d 2h 40m
                      4d 2h 40m