Update the Unified Draft Banner for light and dark modes.

Review Request #13730 — Created April 15, 2024 and submitted — Latest diff uploaded

Information

Review Board
release-7.x

Reviewers

The Unified Draft Banner now works correctly in both light and dark
modes. When on dark mode, we use a cool grey background instead of the
green background (as there is no dark green that really looks good).
When on light mode, the UI looks as it did before.

All the menus (draft mode, publish button, and Review menu) now use
Ink.MenuView, giving us a degree of consistency. We modify
Ink.MenuView's CSS variables to style the draft mode menu
appropriately, and also reference them for styling the top-level menu
items that open them.

The Review menu controller item now has an open effect, just like the
draft mode controller item did. This was missing before, but has been
added for consistency. We also no longer attempt to shift it around
using negative margins (which can have adverse effects on layout), but
rather shift the menu itself.

We use flexbox in more parts of the UI to help align things, which is
necessary for the newer drop-down handle icons from Ink (which are a
different size and don't have a baseline to align against).

There's also a fix for the initial state of the banner when there's
no draft. An assumption was made in onRender() that rendered would
be set in Spina, but that flag was set prematurely in prior releases.
The fix in Spina had therefore regressed the banner. We now issue a
force-update of state, telling it to ignore the rendered flag
initially.

There's still work to do for the embedded diff navigation pane, and the
Review menu needs updates for mobile (we shipped it broken).

Tested on light and dark modes on mobile and desktop.

Verified that mode switching, publish options, and review menu options
all worked.

Unit tests pass.


Commits

Files