• 
      

    Add new CSS component classes for buttons.

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

    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.