Add new CSS component classes for buttons.

Review Request #1872 — Created March 3, 2020 and updated — Latest diff uploaded

guest6078
Review Board
a221e4a...
hjj
For a long time, we've had a basic set of classes for styling buttons,
called `.btn`. This allowed for a consistent style, with support for
"primary" (default) and "danger" (ones that invoke a destructive
operation) states. We've since built upon this, adding "segmented"
buttons (something that looks like one button but has multiple clickable
areas inside), and "split buttons" (a segmented button with a drop-down
menu of buttons).

These were a bit hacked together, and had all sorts of old junk in it
for old versions of IE, workarounds for old styling issues in Firefox,
and were just not very clean or organized. It was sort of annoying to
build upon these or modify them.

This change introduces new replacement classes for buttons (including
the variants). These use our modern component standard, consistent color
definitions, and include documentation (with ARIA attribute
requirements).

The old `.btn` class is replaced by `.rb-c-button`, which includes
modifiers for `-is-primary`, `-is-danger`, and `-is-disabled`.

The old `.btn-segmented` add-on class is replaced by
`.rb-c-button-group`, which contains `.rb-c-button` children, and can
use horizontal (default) or vertical (with `-is-vertical`) layouts.

The old `.split-btn` class is replaced by `.rb-c-menu-button`, which
makes use of `.rb-c-button-group` and `.rb-c-menu`. It can display a
standard menu or a button-based menu (when mixing `.rb-c-button-group`
into `.rb-c-menu`).

There are some small style differences. Namely, the button shadows and
text shadows have been removed. These weren't very noticeable, and
weren't worth ekeping around. Some of the older styling hacks for older
browsers have also been removed.

The change also tweaks the color definitions just a bit, moving some of
the lower-valued definitions for red higher-up so that we have more room
to expand the color palette. It also adds new blue and red colors, used
in the primary and danger buttons.

An upcoming change will update the JavaScript for the menu button to use
the new classes.

Testing Done:
Made use of this in some upcoming changes. Verified the button appearance
was correct in all cases, including menu buttons and button groups.

Tested the ARIA tree when the recommended attributes were set for each
button type.

Tested the backwards-compatible classes, making sure they had the
correct styles.

Reviewed at https://reviews.reviewboard.org/r/10904/


Loading...