Refactor React Button

[anicholls]

Background

As our button component has grown, it has become increasingly complex. It has reached a point where any changes or improvements are extremely hard to make. Bug fixes often turn into a game of whackamole - where changing a style in one place for one use case can ripple into other use cases. There also has been a lot of discussion about separating the inner workings of IconButton from the regular button.

In order to support theming within button, we will likely require this refactor.

I'm not sure exactly what this refactor should look like yet, but I will update this issue as I do more research/exploration. To start, we will need to add a static states table to ensure no regressions are introduced by the updates.

Notes

• Dropdown button should only allow variants primary and secondary
• Dropdown button should not allow icon and dataLabel
• Delete button should not allow icon or dataLabel
• Small buttons should not allow icon or dataLabel
• We should update the button build script to babel 7
• Move IconButtonToggleGroup into a separate module called SegmentedControls and add support for text

Questions

• Should we have a separate component for different variants? It's hard to enforce illegal prop combinations when everything is unified (i.e. <Button>, <HighlightButton>, etc.)
• Should small buttons allow for icons and data text? If not, are these just hidden at this size? Should there be a small dropdown button? Right now we show icons for small text buttons but not other small buttons.
• Should IconButton be a separate module? - no

[anicholls]

closed by #471