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 radio button dot alignment in "Create shipping label" #2303

Merged
merged 4 commits into from
Feb 5, 2021

Conversation

waclawjacek
Copy link
Contributor

@waclawjacek waclawjacek commented Jan 19, 2021

Description

There was a change introduced in @wordpress/base-styles to support high contrast mode on Windows that the styles in WCS&T are not compatible with.

How to reproduce:

  1. Clone both the WooCommerce and WooCommerce Admin repos.
  2. Compile WooCommerce:
    • git checkout 4.8.0 && npm install && composer install && npm run build
  3. Compile WooCommerce Admin using the commit where @wordpress/base-styles was upgraded:
    • git checkout c27e266051d4fc72b1e7fb87b2c4ac365d629cef && composer install && npm install && npm run build
  4. Copy the compiled problematic WC Admin stylesheet to WC:
    • cp woocommerce-admin/dist/app/style.css woocommerce/packages/woocommerce-admin/dist/app/style.css
  5. The radio button is off-center.
  6. Compile WC Admin from the previous commit:
    • git checkout HEAD~1 && npm install && npm run build
  7. Copy the compiled WC Admin stylesheet to WC:
    • cp woocommerce-admin/dist/app/style.css woocommerce/packages/woocommerce-admin/dist/app/style.css
  8. The radio button is OK.

This PR fixes the off-center dots in the Create shipping label modal and improves styles in high contrast mode on Windows.

I have tested the solution on WooCommerce 4.7.0, 4.8.0, and the current master (5.0.0-dev).

Related issue(s)

Fixes #2279

Steps to reproduce & screenshots/GIFs

All screenshots were taken in Firefox on Windows 10.

Before:

Before

Before in high contrast mode:

Before - high contrast mode

After:

After

After in high contrast mode:

After - high contrast mode

Checklist

  • unit tests
  • changelog.txt entry added

Due to an update in @wordpress/base-styles used by WooCommerce Admin,
the dots in WCS&T's radio buttons were no longer centered:
WordPress/gutenberg#23706

This is now fixed and support for high contrast mode in Windows
is added in alignment with the aforementioned PR.
Copy link
Contributor

@superdav42 superdav42 left a comment

Choose a reason for hiding this comment

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

Tested changes on old and new WC and WC Admin and it looks good to me.

@frosso frosso merged commit ff0e135 into develop Feb 5, 2021
@frosso frosso deleted the fix/2279-radio-button-dot-alignment branch February 5, 2021 14:34
@frosso frosso mentioned this pull request Feb 5, 2021
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.

Display issue for checked radio button on Rates Step
3 participants