fix(Collapse): stop collapse icon from wrapping under button text

[speed-rmn]

Before submitting a pull request, please make sure the following is done:

I have done all of the following:

• Added a top level class to all my components '.anchor-[COMPONENT NAME]'.
• Used conventional commits for all work.
• Tested my solution on Mobile & Tablet.
• Wrote unit tests for states and all behavior (npm test) and passed coverage thresholds.
• Updated snapshots for all permutations (npm test -- -u).
• Accounted for hover, focus, blur, visited, & error states because they are not edge cases.
• Created TODOs for known edge cases.
• Documented all of my changes (inline & doc site).
• Made sure that all accessibility errors are resolved.
• Added stories with knobs for all possible configurations.
• De-linted and ran prettier (npm run pretty) on my code.
• Added name to OWNERS file for all new components
• If adding a new component, add its export to the rollup config
• package.json version is bumped (if necessary)

---

Outline your feature or bug-fix below

Because the floated button icon came after the button text, if the icon needed to wrap, it would wrap under the text. The solution is either to move the floated icon to be the first child of the button or to go with a flex-based approach. Making the parent button a flexbox allows the icon to come second, which is more intuitive, and the default align-items: stretch rule means that all of the vertical space beneath the icon will be reserved, so button text will never wrap under the icon. Additional tweaks were made to appearance and background-color, because in browsers other than Chrome a default "buttonFace" color (grey) was still showing through on this control.

Some docs were also updated for clarity or formatting purposes.

An issue with isOpen was identified in CollapseGroup with a TODO.

[brandonlilly]

Nice 👍

[speed-rmn]

Can't push new commits or force push squashed commits. Created #195 to fix linting issue.