Add new CSS component classes for buttons.
Review Request #10904 — Created Feb. 16, 2020 and submitted
For a long time, we've had a basic set of classes for styling buttons,
.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
.btnclass is replaced by
.rb-c-button, which includes
.btn-segmentedadd-on class is replaced by
.rb-c-button-group, which contains
.rb-c-buttonchildren, and can
use horizontal (default) or vertical (with
.split-btnclass is replaced by
makes use of
.rb-c-menu. It can display a
standard menu or a button-based menu (when mixing
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.
the new classes.
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
Tested the backwards-compatible classes, making sure they had the