• 
      

    Add new styling options and fixes for rb-c-review-request-field-tabular.

    Review Request #11607 — Created May 20, 2021 and updated

    Information

    Review Board
    release-4.0.x

    Reviewers

    This introduces a couple of new CSS modifier flags to
    rb-c-review-request-field-tabular:

    • -is-loading: Prepares the field to appear blank except for a
      consumer-provided spinner or other loading indicator.

    • -is-vertical-on-mobile: Sets the field to show a row per cell for
      the table when in mobile mode.

    The latter used to be the default, but now must be opt-in. It can also
    be set by a specialization of the component in LessCSS using
    #rb-ns-review-requests.fields.tabular.set-vertical-on-mobile()

    To allow specializations to also modify behavior styling in mobile mode,
    #rb-ns-review-requests.fields.tabular.on-mobile-mode() was also added.
    This kicks mobile mode in a bit sooner (at a greater width) than the old
    styles did.

    There are also fixes for background colors when in mobile mode, and for
    undoing any min-width/max-width settings from a specialization.

    Currently, only the issue summary table uses this field. It's been
    updated to explicitly turn on vertical mode, retaining existing
    behavior.

    Tested the new features with both the issue summary table and with an
    in-development restyle of some fields. Everything worked and looked
    correct on desktop and mobile.

    Summary ID
    Add new styling options and fixes for rb-c-review-request-field-tabular.
    This introduces a couple of new CSS modifier flags to `rb-c-review-request-field-tabular`: * `-is-loading`: Prepares the field to appear blank except for a consumer-provided spinner or other loading indicator. * `-is-vertical-on-mobile`: Sets the field to show a row per cell for the table when in mobile mode. The latter used to be the default, but now must be opt-in. It can also be set by a specialization of the component in LessCSS using `#rb-ns-review-requests.fields.tabular.set-vertical-on-mobile()` To allow specializations to also modify behavior styling in mobile mode, `#rb-ns-review-requests.fields.tabular.on-mobile-mode()` was also added. This kicks mobile mode in a bit sooner (at a greater width) than the old styles did. There are also fixes for background colors when in mobile mode, and for undoing any `min-width`/`max-width` settings from a specialization. Currently, only the issue summary table uses this field. It's been updated to explicitly turn on vertical mode, retaining existing behavior.
    4bf20bd055b3c320262942e567df32b4cdc0d234
    Checks run (2 succeeded)
    flake8 passed.
    JSHint passed.
    david
    1. Ship It!
    2.