New Button Style / Combo Button (button group with dropdown)

[derek-boman]

Overview

Not sure the best way to implement this but wanted to open the discussion. Currently in Insight we have Button Groups like those shown below. This is a pattern I can see us using a lot in new widgets designs. (1) Does it make sense to standardize/componentize they way this is implemented?

(2) One variation of how I see this being used is when one action catches 90% of use cases and other possible actions are used less often. In this case the primary action is always presented while other options are accessible via a dropdown (triggered from the second button in the group).

Example: Mailchimp

Example: Google Calendar

Mockup Example: Cash Flow

I'll open a related issue for a simple dropdown menu component that I think we'll also use frequently.

@bsbeeks thoughts from you or your team?

[rachelpipkin]

I'm going to take a stab at the Button Group. @derek-boman, I'm assuming that all the buttons will need to be the same type?

[derek-boman]

@iheartrachie: not sure what you mean by the same type. If you're asking if you can have a button group with a secondary button on the left and a primary button on the right, the answer is no. They need to all be the same.

[rachelpipkin]

@derek-boman I got the primaryOutline type working, moving to base now. Should neutral buttons be outlined in a similar fashion on hover?

[derek-boman]

neutral and base need some styling work from how we currently have them. the new guidelines are in the style guide. See buttons page: https://app.frontify.com/d/KHQZnlj1XMIO/web-patterns

[derek-boman]

@iheartrachie has addressed half of this issue in the PR preferences above. The other half is in this issue: #185

[rachelpipkin]

I'll take the second of this (the dropdown) because I want to use it somewhere.

[rachelpipkin]

The second half of this is being addressed in #185 so I'm going to close this issue.