Add standard CSS component classes for forms.

Review Request #10831 — Created Jan. 19, 2020 and submitted — Latest diff uploaded

Information

Review Board
release-4.0.x

Reviewers

This adds a new set of CSS component classes for defining forms in a
standard way. This consists of:

  • rb-c-form: The CSS class for <form> elements, providing modifiers
    for standard alignment, functions for controlling alignment, and
    classes for an action area (for buttons).

  • rb-c-form-fieldset: The CSS class for <fieldset> elements,
    providing modifiers for collapsed fieldsets and classes for
    descriptive and field content areas.

  • rb-c-form-row: The CSS class for a row of fields in a form.

  • rb-c-form-field: The CSS class for a field, providing standard
    styling for labels, inputs, errors, and help text, as well as
    modifiers for controlling some basic parts of the display.

It also introduces new namespaces for variables and methods, helping
other pieces of UI adopt the same styling used in forms, and to help
specialize form display. Older definitions in defs.less now make use
of these variables.

There's a few small improvements to other stylesheets to help
incorporate a form and display it correctly on mobile. For instance,
to display properly, we recommend a page using a form to use
<body class="is-content-flush-on-mobile"> and
<div class="page-content-box -is-content-flush">, and this led to a
fix needed in rb-c-content-header to display the header correctly.
The recommendations are documented in the rb-c-form component.

Upcoming changes to the administration UI will make use of these new
classes, replacing the older Django classes that used to comprise the
admin UI change forms.

Made use of all these styles in an upcoming change for the administration
UI. Tested on mobile and desktop mode.

Diff Revision 2 (Latest)

orig
1
2

Commits

First Last Summary ID Author
Add standard CSS component classes for forms.
This adds a new set of CSS component classes for defining forms in a standard way. This consists of: * `rb-c-form`: The CSS class for `<form>` elements, providing modifiers for standard alignment, functions for controlling alignment, and classes for an action area (for buttons). * `rb-c-form-fieldset`: The CSS class for `<fieldset>` elements, providing modifiers for collapsed fieldsets and classes for descriptive and field content areas. * `rb-c-form-row`: The CSS class for a row of fields in a form. * `rb-c-form-field`: The CSS class for a field, providing standard styling for labels, inputs, errors, and help text, as well as modifiers for controlling some basic parts of the display. It also introduces new namespaces for variables and methods, helping other pieces of UI adopt the same styling used in forms, and to help specialize form display. Older definitions in `defs.less` now make use of these variables. There's a few small improvements to other stylesheets to help incorporate a form and display it correctly on mobile. For instance, to display properly, we recommend a page using a form to use `<body class="is-content-flush-on-mobile">` and `<div class="page-content-box -is-content-flush">`, and this led to a fix needed in `rb-c-content-header` to display the header correctly. The recommendations are documented in the `rb-c-form` component. Upcoming changes to the administration UI will make use of these new classes, replacing the older Django classes that used to comprise the admin UI change forms.
401ff88a76f3abe002b2128ba7dfb16634b9ab6b Christian Hammond
reviewboard/static/rb/css/defs.less
reviewboard/static/rb/css/mixins/style.less
reviewboard/static/rb/css/ui/colors.less
reviewboard/static/rb/css/ui/content-header.less
reviewboard/static/rb/css/ui/forms.less
Loading...