Modification - Button styles and hierarchy

[alexcanning]

Type of request
Modification

Component, pattern or foundation?
Component

Nature of request
Updates to existing buttons to:

• Rationalise existing styles
• Change solid white buttons so they can work across more background colours
• Introduce primary and secondary naming hierarchy to make it clearer about which ones should be used, and when
• Update focus states so that they are accessible and work across a broad range of backgrounds

Button states will be updated accordingly.

[elenagarrone]

I'm a bit confused by those designs 😄

1. You have grouped them in primary and secondary and then sub-grouped them into blue and white -> remember we cannot use colour for naming so how do you call the blue/white?
2. is the "white" version for both primary and secondary the one that will be working with all the other background colours?
3. is the smaller size of the button still a thing? I can't see it in the designs 🤔

Might be easier to get on a call @alexcanning ?

[alexcanning]

1. You're absolutely right - would light and dark be acceptable? That's how we've distinguished similar colour options in the past and would work for white labelling
2. The primary button has a light and dark variant, as does the secondary button. Will make this clearer in the documentation.
3. The 32px button is still a thing, but not shown here because of historical lazy reasons 😄

[elenagarrone]

Thanks 👍 sounds good ✅

[elenagarrone]

I've discussed the implementation with @st3fun1 and we have agreed on how to approach the new designs from a dev point of view.

Here are some notes for anyone interested:

• add primary-dark, primary-light, secondary-dark and secondary-light to ButtonVariants
• write message in notes to say that solid-primary, outline-primary, outline-secondary, reverse-primary and reverse-secondary are deprecated and will be removed in the next major release
• keep the existing stories but suffix them with (deprecated)
• update the table in the notes file with the new variants - keep the old ones but list them as "deprecated"
• the light variants should use opacity (or the rgba colours specified in the designs) for the different states so that they can work with different backgrounds
• keep a small transition when changing state (as it is at the moment)
• update all references of old variants to new one (update test app too to show the new variants)
• the stories for the light variants should be set to have a default background of Super Blue

We will try to update the focus within this work but if it ends up a complete re-work of how we manage focus we might decide to move that into a separate piece of work.

Just as an FYI @st3fun1 will be start working on this in the next few days.

[elenagarrone]

Released in v7.5.0.