feat(button): add separator in button sets

[emyarod]

Ref #5638

This PR adds a separator between buttons (in button sets only) with a new $button-separator token

Changelog

New

• ButtonSet wrapper component
• $button-separator token for button sets
• support for vertically stacked button set orientation

Changed

• refactor styles and selectors to allow for sets to contain more than two buttons

Testing / Reviewing

Confirm the separators appear correct and for button sets only

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 2eb2e97

https://deploy-preview-6608--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 2eb2e97

https://deploy-preview-6608--carbon-components-react.netlify.app

[laurenmrice]

We can get rid of the gray 20 rule at the end of the last button. Otherwise everything looks great!

[emyarod]

would we want to just create a ButtonSet wrapper component to help create button sets? instead of relying on users adding the bx--btn-set class to the container div?

[joshblack]

@emyarod I think that makes sense, maybe a ButtonGroup component? And folks could specify direction (row, column), or I guess pass in a stacked prop?

Group comes up only because that's what I remember seeing in docs, let me know if sets is a better term for these (especially since we have that class already in code)

[emyarod]

yeah exactly I was thinking of something like ButtonSet since that's the name of the story and the class names in code

[laurenmrice]

Secondary button in button sets: The focus is slightly off and should follow this spec.

---

Primary button in dark themes for button sets and button stories: For focus we should be using a transparent 1px space instead of gray, but I am noticing this may be a Button bug in general.

[emyarod]

the focus issue should be resolved now, and I will problems that are inherited from the base button styles separately since they are not directly related to the current PR!

[laurenmrice]

When the Secondary button receives focus, we need the focus to be on top of the rule separator between the buttons. Right now it looks like the focus is getting cut off because it is behind the rule.

---

For the stacked set of buttons, we do not need to include the top rule on the secondary button.

[laurenmrice]

-The stacked secondary button on focus still is getting overlapped by the rule separator.

---

-The token being using for the rule separator needs to be Gray 20 #e0e0e0 for the White theme and and Gray 10 theme. It looks like it is using Gray 100 right now.

[laurenmrice]

Looks great !! thank you 🙌🏻