[🎨 Design] Work Items - Ancestor Widgets
Summary
This is the design issue to capture UX for the work items Ancestor widget and the Parent widget.
Proposal
There will be 2 separate "widgets" – one to provide navigation of the complete hierarchy/ancestry, and the other for editing the direct parent of the work item.
Ancestor Widget
This is above the work item Title
, and is to provide information into the complete ancestry along with navigation to each level.
-
When no parent is assigned, the ancestor widget is not displayed (as there is no ancestry) -
The ancestor widget should match the attached designs, which is based on our button component but is unique in order to help indicate a path/hierarchy for the items (this is a new component) -
Include the work item type icon
along with theTitle
of each level within the ancestry -
By default, show as many levels of the ancestry as possible within the limits of the screen width (do not allow wrapping). When needed, truncate the levels and display those within a dropdown accessible from an ellipsis button (seen here) -
When truncation is needed, display the root parent (top level) and immediate parent, truncating the levels in the middle. If space allows for additional levels being exposed, those closest to the immediate parent should be exposed. See this recording for desired behavior -
On mobile/ xs
breakpoint, only expose the immediate parent and include all other levels within the ellipsis menu (as space is limited)
-
-
Truncate the Title
of individual levels to a max of ~48 characters
or button width of320px/20rem
, whichever method is preferred by engineering (seen here) -
When hovering over exposed levels, display a popover that includes additional details of the item (seen here) -
Include a tooltip when hovering over the ellipsis button when the ancestry is truncated (seen here)
Parent Widget
This is located along with the other sidebar attributes that are editable, and is where a user can modify the assigned parent.
-
Use an empty state similar to Issues/Epics today, with "None" being the default/empty value. -
On selecting "Edit", a dropdown should be exposed to the user to assign the parent (seen here) -
When a parent is assigned/set for a work item, the read only state (not in edit mode) should be a link to the parent item (seen here)
Edited by Nick Brandt