Refining use of Secondary button and link button

[rachael-phillips]

After speaking with @mceledonia, I've filed this issue with the goal for us to refine our component definitions around secondary buttons and link buttons. In thinking about PatternFly, the design team has moved towards more frequently using link buttons for secondary buttons. Further discussion will determine the impact beyond updating our design guidelines. cc @kybaker

[mceledonia]

Thanks Rachael, yeah for example we use it as secondary in modal. I think we can still have both a secondary button using this style and a link button style, I'd see a possible difference between the two being padding and hover state.

My thoughts are that we should commit to one or the other for secondary instead of having it as an option and using it in a secondary fashion, as that could get confusing. Have to ask, why not just use secondary? I think the reason we don't is mainly because the link button just looks/works better overall, so we should commit to either utilizing it as secondary or refining the secondary styling to something we're more happy with.

Here is a quick mock up of some possibilities there

[mcarrano]

@rachael-phillips @mceledonia While I think you make some good points, I'm reluctant to update button styling at this time because of the high impact this can have to existing PF consumers. In the short term, I'd prefer to handle through providing better design guidelines and examples. That said, I'd like to keep this open and add to our design backlog. My thinking is that we should aggregate things like this and release them together as a visual design refresh sometime in the future. This would allow us to communicate that as a major refresh that comes with multiple visual changes rather than a slow drip of changes. What do you think?

cc @LHinson @kybaker

[lboehling]

I like the first option you have posted @mceledonia. I think that using a light gray outline for the secondary button and changing the hover to a light gray bkg fill (instead of a thicker border) is a really nice way of eliminating the bulk of the current secondary action, while still maintaining the structure it provides.

[mceledonia]

@mcarrano That makes sense to me. I think more robust documentation here will help, I was asked which style to use for a secondary button in a modal and realized we hadn't fully ironed out that discrepancy yet which led to the creation of this story. I think a visual refresh would be great overall as well!

[mcarrano]

@mceledonia I created a documentation issue here: patternfly/patternfly-org#1514 Feel free to add any topics you think should be covered.

[gdoyle1]

I looked at some other design systems and most of them were using the button styling that Michael supplied above with the gray bg for secondary buttons (thanks Michael). I've documented all states in this marvel project: https://marvelapp.com/54d49i2. I also put the secondary redesign within the rest of the buttons so we can see how it fits in.

IMO link buttons should remain the same and link text will also be a separate thing, which would remain the same as well.

Let me know what you think! @mcarrano @mceledonia