Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Ensure consistent spacing for checkout input fields #5699

Closed
nielslange opened this issue Feb 2, 2022 · 1 comment
Closed

Ensure consistent spacing for checkout input fields #5699

nielslange opened this issue Feb 2, 2022 · 1 comment
Assignees
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team.

Comments

@nielslange
Copy link
Member

Describe the bug

In #5633, we adjusted the spacing of the Create an account? checkbox below the email address input field. While testing the release, I noticed that this fix caused a regression bug. When displaying the Create an account? checkbox, the email address input field gets pushed down. This problem is caused by:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/360827baff0b00d6852882225ecfc8d5b071c75a/assets/js/base/components/text-input/style.scss#L113-L115

Once the Create an account? checkbox is visible, the email address input field is no longer the only child and instead of margin-top: 0 this element is using margin-top: 1.5em.

To reproduce

  1. Go to WP Admin » WooCommerce » Settings » Account & Privacy.
  2. Activate the option Allow customers to create an account during checkout in the section Account creation.
  3. Create a test page and add the checkout block to it.
  4. Click on the email address input field.
  5. Activate the option Allow shoppers to sign up for a user account during checkout in the section Account options in the sidebar.
  6. See that the email address input field gets pushed down as soon as the Create an account? checkbox becomes visible.

Screen recording

Screen Capture on 2022-02-02 at 14-07-43

Expected behavior

When adding the Create an account? checkbox, the spacing of the email address input field should remain untouched.

@nielslange nielslange added type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Feb 2, 2022
@tarunvijwani
Copy link

I'd like to work on this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team.
Projects
None yet
Development

No branches or pull requests

2 participants