[馃帹 Design] Work Items - Create design management widget
Summary
As part of the migration to using work items for epics and issues, we need to create a design management widget. The design widget will be available to issue
work item types and we will use this opportunity to make designs available to epics
as well.
This is the design issue to determine a minimal MVC of design management on work items.
Special Notes
- Please consider the highly voted for request to disable design management in the design if possible and problems with hovering in this issue.
- Please consider the cleanup mentioned in this issue and close the issue if you will address with this design.
- Please consider the suggestion in this issue about placing of the design toolbar. Once considered, please update the issue commenting on the direction elected.
- Noting (also mentioned in parent epic) that we will conduct validation to determine if design management should be its own work item type. Once a decision is made, we will improve upon this minimal MVC.
- Please consider the needs mentioned in this issue.
Proposal
- Design in Figma
- Clickable prototype (click into a design)
There are a variety of suggested changes to the current design management widget as we recreate it for work items. These changes are grouped below based on which context they relate to. Functionality not mentioned here would have the expectation that it remains the same as the current state widget.
Estimated weight: X
Empty State 聽 - Instead of the current full-width dashed drop area empty state, display an "Add design" button in line with the reactions buttons (we will be handling the empty state for Child & Linked items similar in the future). (see design)
- Clicking/tapping the button will behave the same as the current "click to upload" link.
- This new "Add design" button will continue to persist even after a design has been added.
Estimated weight: X
Designs Widget (displayed once a design has been added) 聽 - Remove the "Upload designs" button from the widget.
- Add the ability to collapse this widget, similar to the Child & Linked widgets.
- Reduce the padding between the design thumbnails to 1rem (16px).
- Change the design titles underneath the thumbnails to use the
small
font size (12px), and regular /400
font weight. - Change the design title area to be
32px
height instead of 38px. - Update the hover state of the thumbnails to have a darker (
$gray-400
)2px
border rather than underlining the thumbnail title.
Estimated weight: X
Drag & Drop 聽 When the design widget is shown:
- Treat the entire design management widget content area as the drop target.
- Today users can drag on top of specific designs, but this requires a user to ensure what they are dragging is the same name or it errors out. Yet, if you click to upload or drag to the dotted placeholder area and the title is the same as an existing design, it still overwrites it. Therefore, there is no need to be able to drag on top of specific designs and we can have one single (large) droppable area.
- When dragging over any part of the widget content area, indicate that the image is droppable (see design).
When the design widget is not shown (empty state):
- TBD (most likely breaking this out as a separate follow-up issue)
Estimated weight: X
Designs Modal 聽 Main Image area changes
- Use an opaque background (
$gray-10
) instead of the transparent dark gray overlay behind the images - Remove the "Reset" button on the zoom controls and in it's place include a text indicator of the current zoom level of the image
- When clicking on an existing dot/discussion thread on the image, highlight and anchor to the corresponding thread in the discussion/comments drawer, while also dimming the other discussion dots on the image (today, we do this for the reverse only 鈥撀燾licking on a comment will highlight the comment and dim the other discussion dots).
- For expected behavior, click on the
1
dot/discussion on this page of the prototype
- For expected behavior, click on the
image title
and controls/actions are currently)
Top header area updates (where the - Move the Issue (or work item) title to the top header area, before the
image title
- Update the layout of the top header area
- The top header will now go full width, rather than just over the image area
- The Close ("x") button will now be on the right side, similar to other modals
- Change the "Add a to do"/"Mark as done" button to an icon button (similar to on the work item detail page)
- Truncate the Issue (or work item) title and image title when needed
Discussion sidebar (now drawer)
- Change the current discussions sidebar to be a drawer that starts directly underneath the top header area
- The drawer will always be open by default when opening the Design Management modal
- Add a button in the top header area to toggle the drawer closed/opened
-
When the drawer is closed (no longer in comment/discussion mode)...
- Hide the discussion dots on the image
- Clicking on the image will not start a thread
- Remove the Issue/work item path
- Remove the Participants section
- Add a header above the threads/discussions indicating how many (unresolved) threads exist
- Update the empty state of the discussion drawer (see design)
- Update the description field
- When empty, just show an "Add a description" button (no heading)
- When filled, show the heading with an Edit (icon only) button in line
- Include a line bread (horizontal rule) between the description area and the threads/discussion area
- Introduce "Collapse replies" functionality to threads that are not resolved (we offer this functionality on threads that have been resolved today in design management)
Edited by Nick Brandt