• 
      

    Update the Unified Draft Banner for light and dark modes.

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

    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.

    Summary ID
    Update the Unified Draft Banner for light and dark modes.
    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 still work to do for the embedded diff navigation pane, and the Review menu needs updates for mobile (we shipped it broken).
    cf68accd08e14e218b26202a5eecf2d55c9f04a4

    Description From Last Updated

    This active color seems very bright and highly saturated, and I find it difficult to read the text.

    daviddavid

    This needs docs.

    daviddavid
    maubin
    1. Nice.

    2. 
        
    david
    1. 
        
    2. Show all issues

      This active color seems very bright and highly saturated, and I find it difficult to read the text.

      1. We can adjust it later then. The goal is to go with the Primary Accent colors on interactive controls where possible, to keep styling consistent and to allow customization in a universal way (changing the CSS variables in a parent).

        This color is controlled in Ink, and is used for all MenuViews, so I can explore it there.

        (It's also basically the macOS color for menu items.)

      2. Addressing this over at /r/13744/.

    3. Show all issues

      This needs docs.

    4. 
        
    chipx86
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-7.x (fd384a5)