Add common styling for tabular fields for review requests.
Review Request #10385 — Created Jan. 17, 2019 and submitted
This introduces new styles for representing tabular data on a review
request in a field, along the lines of the Issue Summary Table. This
will allow us to provide consistency with some of the new bits of
tabular data we're introducing (the commits list, primarily).
The styles support displaying filtering tabs (like the issue states) and
other filtering widgets above the table. It's up to consumers to
actually hook any of this up, though.
This is the first new set of styles that make use of a proposed internal
standard for improving the organization of both the LessCSS rules and
CSS class names. Each of the CSS classes has a namespaced name, starting
rb-c-review-request-field-tabular, which indicates 1) that it's
a Review Board CSS class and 2) that it's a component (
classes within that use this prefix to ensure we don't run into any
namespace collisions within the product or with extensions.
On top of this, we use a
-modifier-nameformat for CSS classes that
affect the presentation/behavior of a style, helping differentiate these
sorts of modifier rules from standard, independent rules.
LessCSS variables are also now namespaced and stored along with the new
rules in a new file. The namespacing gives us a cleaner way of defining
and organizing variables. Splitting these off into a new file helps us
organize the rules, which shouldn't have much of a penalty with the
modern way we generate and bundle files.
Upcoming changes will move the Issue Summary Table and Commit List to
use these styles as a base.
Tested this along with an upcoming change that makes use of the new
styling. This was tested with all functionality provided by the style,
in desktop and mobile modes.
Tweaked styles slightly to make it easier to customize parts.
Revision 2 (+522)
Checks run (2 succeeded)
- Split off tabs into its own component (/r/10387).
- Made use of the new color schemes for the decorative color definitions.
- Made imports absolute from the include path.
- Added some more CSS classes for parts of the component.
- Replaced some hard-coded values in favor of variables and math.
- Fixed a bunch of bad alignment defaults.
Revision 3 (+348)