Toggle components

[cchaos]

This PR creates three different components:

1. EuiToggle: A generic toggling component that just overlays a checkbox (or radio) on top of the child supplied and listens for changes on this input.
2. EuiButtonToggle: Since supplying a standard EuiButton to the EuiToggle component doesn't allow for pointer events on the actual button, this component adds some extra styles to simulate the same behavior but based on the pointer events on the input instead.

3. EuiButtonGroup: A group of EuiButtonToggles that can either allow only one selection or multiple. It also has some extra specific styles as well.

Accessibility

Since each toggle is essentially just a checkbox (or radio), it requires a label which is added to the input via aria-label and this is what is read by the voiceover.

I also had to add tabIndex="-1" to the <button> element so that tabbing doesn't jump from input to button which doubles up on label reading.

Browser checks

• Mac ,Chrome
• Mac, FF
• Mac, Safari
• Windows 8, Edge

Fixes #293 #841

[chandlerprall]

Curious why you overlayed the children with the input instead of wrapping it with a label tied to the hidden input (similar to https://codepen.io/CreativeJuiz/pen/BiHzp)?

That would keep the pointer events on the children themselves, and as a label's permitted content is phrasing, I think all of the elements we'd want to wrap are valid children.

[cchaos]

I was following the convention of our EuiSwitch

[cchaos]

And even further, wouldn't that require re-stying a whole new element (<label>) to look like a EuiButton? The current way allows us to use the EuiButton directly.

[snide]

This is rad. Very quick notes on functionality (since it all looks great stylistically)

You probably want to provide some warning about accessibility on EuiToggle docs if you want to keep it that simple. I could see a lot of people copy / pasting that and forgetting to add focus states for the input. Don't know that we need to add a default state there (we could always focus ring), or just provide a callout that says... "Hey, don't forget to..."

Do you think we'll need the other size for button groups? I see you're forcing it to the small size, but flipping that value it still looks like it works ok. Should we make small the default, rather than a force? I'm mostly thinking about people putting these as filter toggles next to inputs. Don't feel strongly about it, guessing you prolly thought about that part of it a bit.

[cchaos]

The EuiToggle is just supposed to be a helper and not really come with any styles, but I can understand the focus states. However, it'll get really hard to remove this focus ring for particular times they want custom focus states (like the EuiButtonToggle). I'll just add a callout and also point them to the EuiButtonToggle for most out-of-the-box use cases.

I thought about the sizing thing too, and yeah I can go ahead and change that to just be a default.

[snide]

Can you explain this one with some comments.

[cchaos]

done

[snide]

Clever

[chandlerprall]

LGreatTM!