Buttons: addHoverStyle, addFocusStyle, addActiveStyle default props have no effect

[afercia]

Continuing the investigation on button while attempting to build a test page for buttons, see #631 ,I've noticed that after the changes in d63570b the default props for the buttons hover, focus, and active styles don't have any effect.

Previously, these styles used the colors from the color palette. Now, they use colors from the props, with some default values set as defaultProps. However, these defaultProps are set on the wrapping styling functions: they're not component so props won't work there.

See for example

yoast-components/composites/Plugin/Shared/components/Button.js

Line 99 in 11dd35f

export function addHoverStyle( component ) {

where props is undefined within that function.

Instead, these default props should be set on the Button component itself, or any other component that makes use of addHoverStyle(), addFocusStyle(), and addActiveStyle(). See for example the YoastButton which makes use of props in its addButtonStyles() function, but the textColor is set to the component itself:

yoast-components/composites/Plugin/Shared/components/YoastButton.js

Line 137 in 11dd35f

textColor: PropTypes.string,

As a consequence, all buttons that are intended to rely on the default props, don't display any style change for the hover, focus, and active states. For example, the "Edit snippet" button is supposed to change the following styles when hovered:

• color (it works because it uses a color from $colors)
• background (doesn't work, it's a prop)
• border (doesn't work, it's a prop)

This is how it looks like on hover:

And this is how it's supposed to look like:

Note: this applies also to the LinkButton component, it should set the default props to BaseLinkButton.

Needs #649

[afercia]

Moving to queue / dev because it needs to be fixed to properly implement #627