Work item comments and threads UX cleanup
Background
In !108764 (merged) threads were implemented in work items behind the work_items_mvc feature flag. Improving the layout of a few UI elements will help improve readability and overall polish.
Original designs: #378955 (closed)
Opportunities
1. Increase space below comment when replies present
The space below the comment body is currently only 4px. In Issue comments this space is 12px; in the design proposal it is 8px between comment body and replies button, but without replies having a visible container by default, resulting in 16px total except when replies is hovered.
As we're following the issuable Replies format at the moment we should use the same padding as used on issuables (12px total between comment body and replies header). It looks like today the work item comment inherits the 8px padding but part of that is overlapping the replies button.
| Comparison | Inspector (work item) |
|---|---|
 |
 |
2. Align reply author with avatar
For other notes the avatar and author are aligned, but not currently for replies. This is likely a result of there not being actions present here yet, but if those will not be added before this is GA we should ensure the alignment can be set with or without actions present.
3. Maintain consistent editor placement when switching edit modes
Moved to #393975 (closed)
The container for adding/editing a comment changes position when switching Markdown/Rich text modes, with Rich Text maintaining the original placement of the "Add comment" container and Markdown moving down slightly.
4. Better handle responsive breakdown in comment header
Currently the actions break to a second line, which is less preferable to the author breaking to a second line (see design).
This may be resolved by !110074 (merged) if merged, which addresses this same problem on current issuable comments.
5. Pasting a link in the comment box adds a line break
Moved to #393975 (closed)
6. Replies alignment and spacing
Replies are not aligned with the parent comment on the x-axis, and have more than intended spacing between them.
| Current | Intended | Notes |
|---|---|---|
 |
 |
4px extra spacing |
 |
 |
Space between replies is 36px (8+12+12+4); should be 24px. |
7. Expand threads by default and don't activate reply on expand
Threads should be expanded by default, matching the current issue experience. As we collapse by default for "resolved", this will help convey that threads are not resolved (even though task threads cannot yet be resolved, this pattern may be recognized by MR users).
Additionally when threads are expanded from the collapsed state the reply box is immediately active and focused. This should be the case when clicking the reply action (the comment icon), but not from just expanded the thread.
8. Author links in threads are not properly linked
In the collapsed state of threads, the author is shown as a link but does not link to the profile, instead to #. This should link to the profile as in existing threads. Avatars should also be linked to profiles.
9. Make error alert sticky to be visible on create/update/delete comment error
Currently, we have an alert displayed on the top of the work item page when any error happens. This does not work well with long discussion threads - when we have a create note error, the user cannot see the error alert. We should make the alert sticky to be visible on any scroll position.
10. Make add comment/add reply appear as inputs rather than buttons
Moved to #393976 (closed)
Mirroring the "Add reply" state on issuables, the collapsed state of the input should appear as though it was a text box without a hover state and with a text cursor on hover.
| Current | Expected |
|---|---|
|
|
(but leave as Sans font, given the rich text editor as default) |
