-
Notifications
You must be signed in to change notification settings - Fork 69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add: test instructions icon animation #9290
Conversation
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
Size Change: +486 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
b6359fe
to
9a19c9d
Compare
@@ -39,6 +39,6 @@ public function __construct( $token_service ) { | |||
* @return string | |||
*/ | |||
public function get_testing_instructions() { | |||
return __( '<strong>Test mode:</strong> use the test account number <number>000123456</number><button></button>. Other payment methods may redirect to a Stripe test page to authorize payment. More test card numbers are listed <a>here</a>.', 'woocommerce-payments' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I needed to change the markup being generated.
Before: button and test number were two separate elements.
Now: button wraps the test number, to make the click target bigger.
0058e29
to
0e9c6ea
Compare
@@ -9,25 +9,46 @@ | |||
border: none !important; | |||
// some themes might override the color on all `button`s - whose selector has higher specificity and our class selector. | |||
background-color: transparent !important; | |||
padding: 3px; | |||
font-weight: normal; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the markup changed, the styles needed to change as well.
Before, the button
element didn't have any text, so we didn't really care what it looked like.
Now, we need to ensure the text within the button
element plays nice across different themes and browsers.
So I reset the padding
, changed the font-size
and font-weight
, ensured the cursor
was set to pointer
(I dunno why, but it wasn't before by default), and text color and background color matched the surrounding text.
I tested this across different themes, but I'm only somewhat concerned about compatibility.
This is only applied when the plugin is in test mode, so in production the whole instructions set is not going to be visible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I left a couple questions, but this works well as is! Looks good on the various themes mentioned and works well with keyboard navigation. Thanks @frosso!
Fixes #9399
Changes proposed in this Pull Request
Adding a little animation on hover, click, success of the clickable payment method icon - as discussed here: pfHfG4-gT-p2#comment-238
I needed to change the markup being generated:
Demo on blocks and cart checkout:
Also tested on a bunch of other theme variations (TT4, Storefront, TT3, TT2 - blocks & shortcode checkout):
Testing instructions
npm run changelog
to add a changelog file, choosepatch
to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge