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.