Add dividers between items within the Hierarchy & Linked widgets

Problem to solve

Users have a difficult time seeing clear delineation between items within the Child & Linked widgets.

See internal feedback

I am not sure if it's the density or missing borders between each item, but I have a much harder time scanning through the list of child items on the work item view compared to the legacy view

Legacy Epic Work Item
Screenshot_2024-08-14_at_09.47.57 Screenshot_2024-08-14_at_09.47.54

Proposal with borders and with more padding:

With border With border + more padding
Screenshot_2024-08-14_at_09.50.04 Screenshot_2024-08-14_at_09.50.32

Agree with the above feedback, without the lines delineating each separate issue, it's harder for your eye to separate and scan them.

It was easier for eyes to see distinct issues on the old design than on the new one because they had more padding + divider line

Screenshot_2024-08-16_at_12.00.40

And somehow, the new view fits fewer issues on the same space 🤔

Proposal

Include dividers between items within the Child items and Linked items widgets.

  • Use $gray-50 as the divider color between items
  • Include 4px spacing between items and the divider
  • On the Linked items widget, remove the borders between relationship types (Blocked, Blocking, etc)
    • Instead of borders, increase the spacing between these sections to 24px

Design resources

Edited by Nick Brandt