Skip to content

Only show epic lane header shadow when it overlaps

Chad Lavimoniere requested to merge 273779-epic-lanes-shadow into master

What does this MR do and why?

Add an IntersectionObserver to track sticky-positioned epic lane header and apply a shadow to it only when it is overlapping lane content.

MR acceptance checklist

Screenshots or screen recordings

Before After
gdk.test_3000_groups_flightjs_-_boards_group_by_epic gdk.test_3000_groups_flightjs_-boards_group_by_epic__1
gdk.test_3000_groups_flightjs_-boards_group_by_epic__3 gdk.test_3000_groups_flightjs_-boards_group_by_epic__2

Video of scrolling vertically:

epic_lane_headers

Video of scrolling horizontally:

Screen_Recording_2024-03-01_at_19.48.48

How to set up and validate locally

  1. Check out this branch locally
  2. Navigate to an issue board in an EE enabled customer (Flightjs should be by default)
  3. If the board isn't already, group by epic. Assign some epics to issues if necessary to make sure there will be epic lanes.
  4. Expand the "Issues with no epic assigned" section to make sure that the page can be scrolled
  5. Scroll. You will see that for each epic lane, the epic lane title has sticky position and will stay pinned to the top of the scrollable area when the epic lane scrolls out of view. You should see that as this happens, a shadow is applied to the epic title header while it overlaps the content of the epic lane.
  6. Add enough lists that you can also scroll horizontally, then scroll horizontally. You'll see that the epic lane header buttons and text remain in view.

Related to #273779 and #424397 (closed)

Edited by Chad Lavimoniere

Merge request reports