Fix : Secondary Button Transition

[Vrishabhsk]

What? + How?

• Modify box-shadow style for components-button.is-secondary to allow transition delay to be applied
• Reference used to fix it : Ref-1 & Ref-2

Why?

• Button: Transition doesn't work for secondary variation #66007
• Transitions don't work between insets and outsets

This transition works for the primary/tertiary variations but not the secondary variation.

Screenshots or screencast

• Original

Screen.Recording.2024-10-11.at.12.40.23.PM.mov

• Fixed

Screen.Recording.2024-10-11.at.12.40.42.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

$black looks a bit unnatural to me. Below I temporarily changed the transition-delay from 0.1s to 1s to better demonstrate the focus outline transition:

bb9e5e8df17b2391d04079c2665a1fb1.mp4

currentColor feels smoother to me:

ed2a180abd2433547a2d272cefab3767.mp4

[Vrishabhsk]

Thanks @t-hamano

• currentColor does fit in better, and increasing the delay does point out the flaw in using $black
• I have modified the PR accordingly : 0147438
• Also, do you want me to implement the same for the feature image button as mentioned here : #65299

Let me know. Thanks

[tyxla]

Secondary button transition looks good, thanks for fixing it @Vrishabhsk! 🙌

Before we ship it, could you please add a CHANGELOG entry?

[tyxla]

Also, do you want me to implement the same for the feature image button as mentioned here : #65299

That would be great, thank you! Ideally, that button should just inherit the styles and transitions from the default secondary button. That might mean some style overrides could be cleaned up.

Feel free to address it in another PR, of course.

[tyxla]

LGTM 👍 ✅

Thanks for the fix @Vrishabhsk 🚀