Add new CSS component classes for buttons.

Review Request #10904 — Created Feb. 16, 2020 and submitted

Information

Review Board
release-4.0.x
20b5998...

Reviewers

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.

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.


david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (a221e4a)
Loading...