Skip to content
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

fix: correct Link icon placement #1958

Merged
merged 1 commit into from
Nov 14, 2024
Merged

Conversation

laurelfulford
Copy link
Contributor

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 Automattic/newspack-theme#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:

  1. Under WooCommerce > Payments > Stripe, enable the new non-legacy checkout experience, and enable Link as an express payment option:

CleanShot 2024-11-14 at 11 27 52

  1. 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:

image

  1. Apply this PR and run npm run build.
  2. 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:

CleanShot 2024-11-14 at 11 33 49

Other information:

  • 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?

Copy link
Contributor

@chickenn00dle chickenn00dle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@laurelfulford
Copy link
Contributor Author

🥳

@laurelfulford laurelfulford merged commit 01d3df6 into epic/ras-acc Nov 14, 2024
10 checks passed
@laurelfulford laurelfulford deleted the fix/link-icon-placement branch November 14, 2024 21:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants