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

Styling improvements for In-App filters dropdowns

    XMLWordPrintable

Details

    • Task
    • Resolution: Unresolved
    • Low
    • None
    • None
    • None

    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

      Checklists

        Acceptance criteria

        Attachments

          Activity

            People

              Unassigned Unassigned
              ldelnevo Laura Delnevo
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:

                Checklists

                  Task DoR