Add isDestructive style to Button

[ArnaudBan]

Description

Fixes #18674.

Add style for button component with the isDestructive props. I follow the figma design find on the issue #18674

How has this been tested?

This is just adding style, not removing any. A did test by looking a the new style on my local instalation

Screenshots

isDestructive :

isDestructive hover :

isDestructive focus :

isDestructive active :

isDestructive disabled :

Types of changes

Add CSS Style

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ArnaudBan]

I don't understand how my change make the Travis CI test fail

[youknowriad]

@ArnaudBan the test failure is unrelated, don't worry about it.

Do you think you can add an example to the storybook buttons story? (run locally by doing npm run storybook:dev

[ArnaudBan]

@youknowriad Yes i can try that. I will update this PR when it's done. Thank you.

[jasmussen]

This is a new color, which is fine, but we should change the variable contents instead of adding a new color, that way all elements that reference $alert-red will benefit from the change, and the color will be consistent.

This picture shows the existing $alert-red in the top left corner, the new color you added in the bottom, and a suggestion on the right.

The existing alert red is a little soft. Your new color is better, but I wonder if there's a 3rd option, which I suggested on the right, it's a bit between them and with higher saturation. What do you think? That new color is #CC1818

[jasmussen]

Nicely commented. I think we should use a single space instead of a tab between the asterisk and comment, i.e. * Destructive....

[jasmussen]

These should all leverage the same $alert-red variable.

[jasmussen]

This is a darker version of your red:

It's a good call for the hover, however we should probably use some SCSS smarts so we can reuse the variable. You could, for example, use color: darken($alert-red, 20%);.

[jasmussen]

What a wonderful PR, thank you! Things are looking generally good, and I left a few comments to use some variables instead. Let me know if that works for you!

[enriquesanchez]

I'm having trouble with my dev environment and I can't, at the moment, test this PR. However, looking at the screenshot, it looks like in the isDestructuve hover state, the background stays the same color.

@jasmussen I'm wondering if this should follow the WP component guidelines in Figma? Where the background gets sligthly darker.

[jasmussen]

@jasmussen I'm wondering if this should follow the WP component guidelines in Figma? Where the background gets sligthly darker.

Sounds good to me!

[ArnaudBan]

@jasmussen Thank you for kind remark. I update the PR with le use of SASS variable and a change the $alert-red variable value.

I also add a story for the Button component showing the isDestructive variante as @youknowriad suggest

[ocean90]

The new styles will break current buttons with isLink and isDestructive props:

Added a story in cf4fb78.

[ArnaudBan]

Thank you @ocean90 i had missed that my PR had broken the destructive link Button

[youknowriad]

@jasmussen would you mind doing a final check here when you have time?

[jasmussen]

This is what I see:

Looks good, compared to secondary buttons too:

Looking at the code, though, it repeated some styles that I believe it could inherit from .components-button, so I pushed a small tweak to reduce the code (a2a7a37), and it still looks good.

Note that I didn't find anywhere in our block editor that currently uses this button style — so I inspected it into the save draft button. But the result should be the same.

[ArnaudBan]

@youknowriad Everything looks good to me. Can we think about mergin this Pull Request now ?

[youknowriad]

Sorry for missing this @ArnaudBan do you think you can rebase the PR?

[ArnaudBan]

@youknowriad I rebase and had to make some changes because variable color add been updated ( seem that you are now using css variable )
Everythings still look fine for me in StoryBook

[youknowriad]

Thanks. This is looking good.