• 
      

    Convert the review request field changes to modern CSS components.

    Review Request #13907 — Created May 29, 2024 and submitted — Latest diff uploaded

    Information

    Review Board
    release-7.x

    Reviewers

    The lists of changed fields on a "review request changed" box was
    ancient, with spacing and font size inconsistencies, mobile issues, no
    accessibility affordances, and some regressions with recent styling
    changes.

    This has been redone, as a sort of first pass that we can build upon in
    the future. We now have two new components we can use:

    • rb-c-review-request-changed-fields: The container for the entire
      list of changed fields in the entry box, managing overall layout and
      the styling for inner value types.

    • rb-c-review-request-changed-value: An old/new diff display for a
      single simple field value, such as Branch, Summary, or Depends On.

    The rb-c-review-request-changed-fields component is a definition list
    consisting of field names and their value changes. It uses CSS grid to
    do the layout, in a responsive manner. Subgrids are employed when
    supported by the browser in order to help all fields line up correctly
    (without it, we use a minimum width to achieve a similar effect).

    There's now one of these lists instead of many, which can help with
    navigating using assistive technologies. We also make use of ARIA labels
    throughout this.

    rb-c-review-request-changed-value works as the old field changes did
    before, but is slightly polished in that it's now less boxy, employing a
    soft rounded border.

    The changed fields component optimistically aligns the labels and values
    with a baseline. This works great for the changed value component and
    other simple text-based value representations. However, in an effort to
    properly align things, special rules for certain value components are
    added. This gives us alignment for diffed text displays, file attachment
    thumbnails, and the commits list.

    Field changes were made to aid in this and to help with consistency:

    • File attachments now have a parent container that we can set to be a
      flexbox.
    • Status now says "Completed" instead of "Closed (submitted)".

    Some fields (namely file attachment captions) still need a lot of love,
    but that's for another release.

    The overall presentation, while resembling what we had before, is now
    much more polished, and will be easier to work with going forward.

    Tested in Chrome and Firefox in light and dark modes.

    Tested with and without subgrid support (by altering the name checked
    by @support), and on mobile. Verified the presentation was correct
    in each case.

    Tested every field type in all the above cases.


    Commits

    Files