Expand epics in roadmap to view hierarchy MVC

Problem

• In the roadmap view, you can currently view epics.
• But to view the details of epics in an epic (sub-epics), you have to click through.

As a User of Roadmaps,

I need to be able to see the sub-epics under an Epic,

So I can get a detailed, view of the work involved over a timeline

Proposal

Child epics are now nested under parent epics in the left column. There is also an indication of how many child epics are tied to a parent epic as a count next to the epic icon in the parent epic's row. Parent epics are solid colored while child epics inherit the parent epic's color but have an outlined styling. A user can collapse a parent epic row and the child epics will be hidden from view.

Expanded	Collapsed

Specs (for the column only): https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/%237077-expand-epics-in-roadmap-spec-previews/#artboard1

Epic bar details

• Epic bar color:
  • Parent epic: #1b69b6
  • Child epic: #ffffff with 1px #1b69b6 border
• Progress bar color:
  • Parent epic: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Child epic: Filled progress: #1b69b6 , Unfilled progress: #1b69b6 with 30% opacity.
• Icon and text color:
  • Parent epic: #ffffff
  • Child epic: #1b69b6

Epic bar hover state

• Epic bar color:
  • Parent epic: #17599c
  • Child epic: #ffffff with 1px #17599c border
• Progress bar color:
  • Parent epic: Filled progress: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Child epic: Filled progress: #17599c , Unfilled progress: #17599c with 30% opacity.
• Icon and text color:
  • Parent epic: #ffffff
  • Child epic: #17599c

Interested Customers/Prospects

• Interested Prospect
• Interested Prospect
• Interested Customer
• Interested Prospect

Previous proposal

- In the mockup below, you can just mouse over (or click) on an epic in a roadmap, and view the associated sub-epics. - The sub-epics also show their respective start and end dates based on their assigned milestones. - Further designs required for all the cases. (Milestone doesn't have start/end dates). - Related to #7076 (closed) and #6802 (closed) and should be designed together.

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.