Skip to content

Allow users to gain more context about an epic within the epic board

2021-05-18

For this issue to be completed, the Ancestors component needs to be added to the epic board sidebar.

Problem to solve

When facilitating planning at scale across many teams or groups within my organization, I want a high level view of how my epics are moving through a workflow, so that I can track and report on the progress of features and initiatives.

How might we allow users to view more context and quickly edit an individual epic within their board?

User experience goal

Users can quickly learn more about an epic in their board and change values like due date etc.

Proposal

Implement a sidebar similar to the issue sidebar on issue boards for MVC. See the design tab for all iterations and ideation.

Bare MVC iteration More fleshed out iteration
Iteration_1_epic_board_sidebar Iteration_2_b

Figma: https://www.figma.com/file/BGUo9MG09v2ZlQjnPynALr/231401-Allow-users-to-gain-more-context-about-an-epic-within-the-epic-board?node-id=1%3A45039

Epic sidebar drawer, including:

  • 🟡 Iteration 1: Ability to open and close "Epic details" drawer

    • Stretch styling: Enlarge header/title to ui/h2/04 base. This was intended but never included in the component I believe.
    • Stretch styling: Change background of all these drawers to $gray-10
    • Stretch styling: I reduced the width of the drawer here to 288 px to display content, esp dropdowns, without a bunch of added width. 🤔 Maybe we can play with this a bit @fguibert
    • Stretch styling: Edit buttons should be tertiary. I placed the 12px instead of 16px from top of the div here to account for the slight alignment wonkiness when using these buttons inline with text.

  • 🟡 Iteration 1: Epic title (wraps to next line if long) - Stretch styling: Allow editing (since the awesome Florie already did this). Increase text box height on Edit to 64px for all title editing since most epic and especially issue titles are quite long.

  • 🟡 Iteration 1: Identifier (this is part of title ✅ )

  • 🟡 Iteration 1: Start date - Stretch styling: The selected date type (the option that is selected, for example Inherited: #### - #### should be $gray-900 similar to other sidebar items with a selected value

  • 🟡 Iteration 1: Due date - Stretch styling: The selected date type (the option that is selected, for example Inherited: #### - #### should be $gray-900 similar to other sidebar items with a selected value

  • 🟡 Iteration 1: Labels

  • 🟡 Iteration 1 or 2: Confidentiality - Stretch styling: Move this under Labels and above Ancestors in all sidebar views

  • 🟡 Iteration 1 or 2: Ancestors

  • 🟡 Iteration 1 or 2: Toggle to turn notifications on and off

  • 🟡 Iteration 1 or 2: Add a to do & remove a to do

  • 🟡 Iteration 3: Add participants to issue and epic sidebars in board cc @fguibert @cdybenko

  • The selected epic has a active/focus state similar to the current issue board

Documentation

Availability & Testing

What does success look like, and how can we measure that?

We could track how often users are clicking into an epic to view more information or edit values.

Edited by Donald Cook