[x] Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Changes proposed in this Pull Request:
When the Link payment option is enabled under the Stripe Gateway, the icon is placed absolutely based on the window. Unfortunately, the alignment of this button isn't always bang on -- I think (especially in the modal checkout) this is because the JavaScript adding the styles for it isn't always firing at the best time.
This PR overrides the styles and absolutely positions them inside of any Woo input element that may contain them, for greater accuracy.
(When the Link icon appears in the input, it doesn't do anything on click; this will be handled separately!)
How to test the changes in this Pull Request:
Under WooCommerce > Payments > Stripe, enable the new non-legacy checkout experience, and enable Link as an express payment option:
Run a checkout using the modal checkout, and note the appearance of the Link button in the Email field. Sometimes it's just slightly offset in the input; other times (like for me if you hit Continue and Back), it will be super mis-aligned. You can also try submitting the form without filling anything out -- the shift from the error messages will also break the placement:
Apply this PR and run npm run build.
Repeat step 2 a couple times, including clicking Continue and Back a few times, and confirm the button is always placed inside of the input:
Other information:
[x] Have you added an explanation of what your changes do and why you'd like us to include them?
[ ] Have you written new tests for your changes, as applicable?
[ ] Have you successfully ran tests with your changes locally?
laurelfulford
commented
1 week ago
All Submissions:
Changes proposed in this Pull Request:
When the Link payment option is enabled under the Stripe Gateway, the icon is placed absolutely based on the window. Unfortunately, the alignment of this button isn't always bang on -- I think (especially in the modal checkout) this is because the JavaScript adding the styles for it isn't always firing at the best time.
This PR overrides the styles and absolutely positions them inside of any Woo input element that may contain them, for greater accuracy.
This PR can be tested with https://github.com/Automattic/newspack-theme/pull/2407 to make sure the Link button doesn't disappear when you hover over it.
(When the Link icon appears in the input, it doesn't do anything on click; this will be handled separately!)
How to test the changes in this Pull Request:
npm run build.Other information: