Skip to content

Fix minor UX issues with "group by" within Iteration Report

Problems

There are a few minor UX nitpicks with grouping by label with an iteration report.

  • Scroll positioning jumping to top of page upon keydown within the filter dropdown
  • Options in the filter drop down not showing consistently
  • Some pagination wonkiness
** These notes were a part of the original issue but have since been resolved ** - No way to easily remove a label grouping - Opportunity to provide faster feedback to the end user about applied groupings

I recorded a quick video to talk demo them -- https://www.loom.com/share/5243f91ef0524433a454c8c17c0dd39e

Additional problems

Proposal

  • Scroll positioning jumping to top of page upon keydown within the filter dropdown

    • when the user begins typing into the search field, the page immediately scrolls to the top. Wherever the user has scrolled to at the time that they enter search criteria, that placement should remain

  • Options in the filter drop down not showing consistently

    • The styling isn't correct for the dropdown. It should be consistent with the styling found in the Labels of the right sidebar. The link text is blue as well as the checkmark. In the right sidebar, it appears this is resolved by the color:inherit being inherited from the right sidebar styles.
    • There's also a .gl-white-space-nowrap being applied to the components that seems to be causing the content not to wrap within the dropdown.
    • Lastly, the icon box shrinks when the label title is long which I believe is due to the parent a being a flex container. Adding flex-shrink:0 to .dropdown-label-box should resolve that. This also needs to be done on the sidebar dropdown.

  • Some pagination wonkiness

    • When the Prev and Next screens are selected in the pagination for each label group, the preloader shows briefly as they are loaded in which is causing a visual jump in the placement of the loaders. I'm guessing some bounce will always happen as the heights of the 5 items displayed will likely always vary to some degree, but can we do a min-height to simulate and attempt to reduce that bounce a bit? Open to other suggestions!
Edited by Holly Reynolds