Summary

Add common styling for tabular fields for review requests.

Review Request #10385 — Created Jan. 17, 2019 and submitted Jan. 23, 2019, 6:40 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

~~10387~~

Blocks

10386

Reviewers

Groups

reviewboard

People

Description

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

with rb-c-review-request-field-tabular, which indicates 1) that it's

a Review Board CSS class and 2) that it's a component (c). All

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-name format 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.

Testing Done

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.

Commits

Summary	ID
Add common styling for tabular fields for review requests. 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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.	a2d757407e71b63f40589b2542cb59b2cffe525d

Summary

Add common styling for tabular fields for review requests.

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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.

a2d757407e71b63f40589b2542cb59b2cffe525d

flake8 passed.

JSHint passed.

Change Summary:

Tweaked styles slightly to make it easier to customize parts.

Commits:

	Summary	ID
	Add common styling for tabular fields for review requests. 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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.	ea52bf4b9460290fe356f7e63e855607b891e14b
	Add common styling for tabular fields for review requests. 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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.	1befac8da91ff93a402780b63fd418056d2a500f

Diff:

Revision 2 (+522)

Show changes

	reviewboard/staticbundles.py
	reviewboard/static/rb/css/ui/review-request/fields/tabular.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

```
Ship It!
```

Change Summary:


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.

Commits:

	Summary	ID
	Add common styling for tabular fields for review requests. 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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.	1befac8da91ff93a402780b63fd418056d2a500f
	Add common styling for tabular fields for review requests. 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 with `rb-c-review-request-field-tabular`, which indicates 1) that it's a Review Board CSS class and 2) that it's a component (`c`). All 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-name` format 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.	a2d757407e71b63f40589b2542cb59b2cffe525d

Depends On:

~~10387 - Add CSS for tab components and color schemes.~~

Diff:

Revision 3 (+348)

Show changes

	reviewboard/staticbundles.py
	reviewboard/static/rb/css/ui/review-request/fields/tabular.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-4.0.x (03f2c44)