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

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

chipx86
Review Board
release-4.0.x
reviewboard

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
Add new styling options and fixes for rb-c-review-request-field-tabular.
Checks run (2 succeeded)
flake8 passed.
JSHint passed.
david
  1. Ship It!
  2. 
      
Loading...