USWDS - Button group: align unstyled buttons

[amyleadem]

Description

Closes: #4327

Preview link: Button group stories

Problem

When used inside a button group component, the unstyled button type aligns at the top of the group element.

Before:

Solution

Because the button group is built with flexbox, we can center the button's vertical alignment. This should consistently produce the desired alignment inside button groups.

After:

Testing

1. Open the button group stories and use web inspector to replace the default usa-button-group html with the sample markup below.
2. Note the centered vertical alignment of the unstyled Bar button

It is also worth thinking through if centered vertical alignment would cause unintended ill-effects.

<ul class="usa-button-group">
  <li class="usa-button-group__item">
    <a href="javascript:void(0);" class="usa-button">Back</a>
  </li>
  <li class="usa-button-group__item">
    <button class="usa-button">Default</button>
  </li>
  <li class="usa-button-group__item">
    <button class="usa-button usa-button--hover">Hover</button>
  </li>
  <li class="usa-button-group__item">
    <button class="usa-button usa-button--active">Active</button>
  </li>
  <li class="usa-button-group__item">
    <button class="usa-button usa-focus">Focus</button>
  </li>
   <li class="usa-button-group__item">
    <button class="usa-button usa-button--disabled">Disabled</button>
  </li>
  <li class="usa-button-group__item">
    <button class="usa-button usa-button--unstyled">Bar</button>
  </li>
</ul>

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.