Skip to content

Board header options and configuration buttons

Chad Lavimoniere requested to merge 450757-board-header-button-rearrangement-2 into master

What does this MR do and why?

Moves board options to a dropdown and changes the board configuration edit button.

Note that this is part of a larger scope of work to change the layout of the board header. !149760 (merged) must be merged first.

See design at https://www.figma.com/proto/E97ewgAP2u7CiPSziOEmXs/Work-Items-%E2%80%93-Boards?page-id=7:152163&type=design&node-id=4321-38271&viewport=2723,-10607,1&t=i2zYyQOTzbYOotR2-1&scaling=min-zoom&starting-point-node-id=4321:38271&show-proto-sidebar=1

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Note that the Create list button will be removed in !149760 (merged) before this MR is merged.

Before After

gdk.test_3000_flightjs_Flight_-_boards_assignee_username=root (13).png
gdk.test_3000_flightjs_Flight_-_boards_assignee_username=root (14).png gdk.test_3000_flightjs_Flight_-_boards_assignee_username=root (15).png

Responsive sizes

Note that the Create list button will be removed in !149760 (merged) before this MR is merged.

Size Appearance
xs (<576px) gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char>_</span></span>-boards_assignee_username_root__12
sm (>=576px) gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char>_</span></span>-boards_assignee_username_root__11
md (>=768px) gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char>_</span></span>-boards_assignee_username_root__10
lg (>=992px) gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char>_</span></span>-boards_assignee_username_root__9
xl (>=1200px) gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char>_</span></span>-boards_assignee_username_root__8

How to set up and validate locally

  1. Check out this branch locally
  2. Visit an issue board
    1. You will see that the show labels, group by, and edit board items are no longer present in the board header; instead, there will be two icon buttons, one with a preferences icon and the tooltip View options and another with the settings icon and the tooltip Edit board.
  3. Click the "View options" button
    1. You will see a dropdown with two options: Show labels and Epic swimlanes.
    2. Click Show labels.
      1. If the option was previously turned on, then it will now turn off.
      2. The change in option will take effect on the board (i.e., labels either will stop showing or will start showing, depending on the starting state)
      3. The dropdown will not automatically close.
    3. Click Epic swimlanes
      1. If the option was previously turned on, then it will now turn off.
      2. The change in option will take effect on the board (i.e., Epic swimlanes either will stop showing or will start showing, depending on the starting state)
      3. The dropdown will not automatically close.
    4. Click away from the dropdown to close it.
  4. Click the "Edit board" option
    1. The "Edit board" modal will open.

Related to #450757, #444717

Edited by Chad Lavimoniere

Merge request reports