Button Edge States

[aaronshekey]

This is a new pull request split from #84, now without the brand-color exploration commits.

A number of button changes here, mostly focused on little edge-case polish.

Changes

Left: Old
Right: New

1. Focused states are important. I think we should maintain the focused border regardless of hover states.
   
2. Selected buttons should still have a hover state since you can still interact with them.
   
3. Focused buttons within the button groups are now the highest in the z-order as opposed to being overlapped by the button to the right.
   

Issues

These issues are beyond the scope of Primer, but they should be noted.

1. By showing the focused state, we're exposing some inconsistent button implementation throughout github.com. Some buttons receive focus when pressed, others not.
2. By having a hover state on .selected buttons, the dropdown select menus don't receive a hover event because mouse events are inhibited by a blocking overlay div.

[mdo]

Do we need &:active:focus as well?

[mdo]

By having a hover state on .selected buttons, the dropdown select menus don't receive a hover event because mouse events are inhibited by a blocking overlay div.

Have an example of this?

[aaronshekey]

By having a hover state on .selected buttons, the dropdown select menus don't receive a hover event because mouse events are inhibited by a blocking overlay div.

[mdo]

Ohhhh yeah, the .modal-backdrop or whatever it's called. Makes sense—thanks for the gif!

This'll work into a v2.1 release, so it'll be a few days at least before it's out. Is that cool @aaronshekey or do you need this sooner?

[aaronshekey]

I'm in no rush on these. My fear is that while these styles are good for a consistent experience across buttons, we don't consistently implement them across github.com. In an effort to make these more proper, we might (in the short term) introduce some jank. Hmm.

[mdo]

<3