Fix: Add button styles to notice actions without url. Allow custom classes on notice actions.

[jorgefilipecosta]

Fixes: #13009

This PR applies the following changes:

• Currently, if a notice action did not contained a URL the button was totally unstyled. Now we apply default button styles.
• Although the documentation said actions: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function., we accepted actions with both an URL and an onClick event creating a normal link with programmatic actions which is not recommended because of a11y reasons as raised by @afercia. Now we accept only one of the properties if an URL exist onClick is ignored.
• We now allow the use of custom classes, so, for example, one can have a programmatic action that is rendered on the dom using a button but make it look like a link by adding the is-link class.

How has this been tested?

I executed the following code on the console:

wp.data.dispatch('core/notices').createNotice( 'error', 'Normal onClick Action', { actions: [ {label: 'Action', onClick: () => { alert( 'learn' ) } } ] } );

wp.data.dispatch('core/notices').createNotice( 'error', 'Link style onClick Action', { actions: [ {label: 'Action', onClick: () => { alert( 'learn' ) }, className: 'is-link' } ] } );

wp.data.dispatch('core/notices').createNotice( 'error', 'Normal link', { actions: [ {label: 'Link', url:"http://www.wordpress.org" } ] } );

I observed the following notices were displayed:

[afercia]

unset is not supported by IE11: maybe try initial (baseline) or remove it all together?

[jorgefilipecosta]

Hi @afercia thank you for looking into this PR and suggesting alternatives. I used your fist suggestion and now vertical-align is set to 'initial'. Removing the rule all together would make buttons inside notices not aligned with the notice content.

[jasmussen]

Nice work! Here's a GIF_

I'm not sure how this is compared ot master, it's very likely a vast improvement. If it is, probably good to get it in. However there are a couple of little visual glitches that could use polish if you have time:

1. the 2nd notice is taller than the others, because the "link button" is as tall as a button but doesn't appear to be. You can see it when you hover, and the link hover style shows how tall the button is.
2. The link hover style in the 2nd notice is off. It shows aspect of the button styles bleeding through it seems. The active or focus style of the 1st link is also showing a background.
3. The 3rd notice is very close — but the height of the button style makes the close button offset. This might very well be the same issue as 1, and it might not be something we want to fix, not sure.

Yeah maybe don't "fix" 3:

The X should be in the top right corner for more than 1 line of text, so it's probably correct as it is.

But still worth fixing the CSS bleed in the button that's styled as a link. Or maybe not? I know @aduth has some ideas for either retiring or changing the "is-link" style.

[jorgefilipecosta]

Hi @jasmussen I tried to address #1 and #2 issues.
Here is a screenshot of how it looks now:

[jasmussen]

Lovely, ship it!

At some point we should (I might take a stab) resurrect the CSS improvements from #12301, that were unrelated to legacy notices. That would fix the overlap in your screenshot.

[jasmussen]

I'm mobile at the moment but will try and test/actually approve the PR as soon as I can.

[jasmussen]

Looks good! Nice work:

[aduth]

We now allow the use of custom classes, so, for example, one can have a programmatic action that is rendered on the dom using a button but make it look like a link by adding the is-link class.

Extending this way seems like something which should be done through a property / prop, not by adding the class directly. To this point, I'm not sure we should be changing the behavior depending on whether a custom class is provided.

[jorgefilipecosta]

Hi @aduth, I updated the code right now we don't change the behavior when a custom class is added. But developers can still remove default classes by setting
noDefaultClasses to true.

The following code produces the same result as shown on the screens before.

wp.data.dispatch('core/notices').createNotice( 'error', 'Normal onClick Action', { actions: [ {label: 'Action', onClick: () => { alert( 'learn' ) } } ] } );

wp.data.dispatch('core/notices').createNotice( 'error', 'Link style onClick Action', { actions: [ {label: 'Action', onClick: () => { alert( 'learn' ) }, className: 'is-link', noDefaultClasses: true } ] } );

wp.data.dispatch('core/notices').createNotice( 'error', 'Normal link', { actions: [ {label: 'Link', url:"http://www.wordpress.org" } ] } );