Epic issue list and related issue list design - New elements
Follow up of https://gitlab.com/gitlab-org/gitlab-ee/issues/7600, with some new UI elements:
- Confidentiality
- Milestone
- Due date
- Weight
- Assignees
This is for both epic issue list and related issues.
Design
- Implement designs from gitlab-design#83 (closed)
- Breakpoint
>1200px
- Breakpoint
>992px
- Breakpoint
>768px
- Breakpoint
>0px
- Items, states, and tooltips
-
☝ Note that the issue list design spec has multiple implementation notes that also apply to other states and designs.
- Breakpoint
- The list layout acts like a table. If there is no milestone or due date or assignee, the column is not shown. If a field is present on one of the issues, but not on another, it should be shown as “empty”.
- The epic issue list and the related issue list should have the same designs. In both cases, the issues are draggable (i.e. the list is manually sortable).
- Information to display:
- Status (open/closed)
- We've changed the closed issue status icon: a circle with a dash. We also need to change this icon in the mobile view of an issue detail page. We believe this is the only additional place to change the icon but we should search the codebase for any other instances.
- Path and ID
- Confidentiality
- Title (link to the issue)
- Milestone
- Due date
- Weight
- Assignees
- Status (open/closed)
Update
After evaluating our approach to achieve given designs, we decided to do a small alteration where Issue ID will come after issue title in all screen sizes. Also, PoC was first implemented in this CodePen example for easier iteration and review between frontend and UX, and then was ported over to the MR once we had acceptable layout.
Screenshots
Mobile | Tablet / Mobile Landscape | Medium Desktop | Large Desktop |
---|---|---|---|
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.