Add tests and styling for betterbuttons port

[bergice]

Fixes #436

[unclecheese]

Really nice job on the Behat tests. Thank you!

Just a quick point on the javascript. As you've changed it, it has the potential to break other people's code, and I'm pretty sure it's not necessary.

[ScopeyNZ]

How do we feel about getting some instant tooltips on these buttons? Not everyone's familiar with betterbuttons 🙂

Looks beautiful but it does look like it differs a bit from the designs

[sachajudd]

Hey, I've had a quick look at this and noticed it doesn't quite match the designs.

Current:

• Missing background behind the arrows.

A few options for the icon:

• The icon could be done in CSS since the icon is currently not in the icon set.
• We could use the close icon and rotate it 45 degrees.
• Use font-icon-plus-circled and change the icon background to green.
• Leave as is and replace the icon when we update the icon set.

Styleguide (click the preview link): https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/asset/components/5b5e610563c7ad0012bc21fb

[sachajudd]

Great idea @ScopeyNZ 🙂 see updated Styleguide for tooltips.

[bergice]

@sachajudd

Missing background behind the arrows.

This is using our current button styling, we may want to discuss if we want this changed across all buttons to be consistent and possibly added to a separate issue, but I'm leaving this as is for now.

We could use the close icon and rotate it 45 degrees.

I tried this, and it works great, but I'm also worried about consistency here. This button is equivalent to the one shown on on the grid field so ideally they should be matching. I do think this new design looks slightly better, so maybe we can change the gridfield one to match the new one.

@ScopeyNZ

How do we feel about getting some instant tooltips on these buttons? Not everyone's familiar with betterbuttons 🙂

I'll see if I can add this to FormAction's.

[sachajudd]

We have designed better buttons to work within the CMS with these new custom styles. We haven’t added any buttons without text yet in the CMS so because it's a new pattern we'd rather it look more cleaner rather than consistent. We hope to start using these styles throughout the CMS more often in the future.