Skip to content

Fix misaligned loading sample product's progress message #38107

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.

Sign up for GitHub

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

Jump to bottom
Merged
chihsuan merged 3 commits into from
May 8, 2023
Merged

Fix misaligned loading sample product's progress message #38107

chihsuan merged 3 commits into from
May 8, 2023

Conversation

@chihsuan
Copy link
Member

@chihsuan chihsuan commented May 4, 2023

Submission Review Guidelines:

Changes proposed in this Pull Request:

Closes #37708.

This PR fixes the misaligned loading sample product's progress message when Gutenberg plugin is enabled.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Install the latest Gutenberg
  2. Skip the Setup Wizard.
  3. In the Task List (WooCommerce > Home), click the "Add Products" task.
  4. Click "View more product types".
  5. Click "Load Sample Products".
  6. Click the "Import sample products" button.
  7. Confirm the progress message looks like below.

Screenshot 2023-05-04 at 11 07 28

@chihsuan chihsuan marked this pull request as ready for review May 4, 2023 03:11
@github-actions github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 4, 2023
@chihsuan chihsuan requested review from a team, ilyasfoo and rjchow May 4, 2023 03:11
@chihsuan chihsuan self-assigned this May 4, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2023 •
edited
Loading

Hi @ilyasfoo, @adrianduffell,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 9460567

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests26700202691m 5s
E2E Tests1870010019717m 28s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

rjchow
rjchow reviewed May 4, 2023
View reviewed changes
Copy link
Contributor

@rjchow rjchow left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Not sure if its the result of this PR but I noticed this modal's misaligned compared to the background:

image

The CSS selector seems quite risky with just +div, I wonder if that could be made more specific?

@chihsuan
Copy link
Member Author

chihsuan commented May 4, 2023 •
edited
Loading

Not sure if its the result of this PR but I noticed this modal's misaligned compared to the background:

Good catch! @rjchow It's not related to this PR. I think the modal is just aligned with the "overlay" background. Fixed it in 9460567.

The CSS selector seems quite risky with just +div, I wonder if that could be made more specific?

It doesn't have a class name and we can't add a class name to it. 😓

Screenshot 2023-05-04 at 13 14 05

@rjchow
Copy link
Contributor

rjchow commented May 4, 2023 •
edited
Loading

Not sure if its the result of this PR but I noticed this modal's misaligned compared to the background:

Good catch! @rjchow It's not related to this PR. I think the modal is just aligned with the "overlay" background. Fixed it in 9460567.

The CSS selector seems quite risky with just +div, I wonder if that could be made more specific?

It doesn't have a class name and we can't add a class name to it. 😓

Screenshot 2023-05-04 at 13 14 05

Thanks for the screenshot 😆
I think maybe we could check for it as descendent of 'woocommerce-products-load-sample-product-modal' ?

@chihsuan
Copy link
Member Author

chihsuan commented May 4, 2023

I think maybe we could check for it as descendent of 'woocommerce-products-load-sample-product-modal' ?

Yeah, we already did. 🙌

woocommerce/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss

Lines 20 to 29 in 9460567

.woocommerce-products-load-sample-product-modal {
background: transparent;
box-shadow: none;
.components-modal__header {
display: none;
}
.components-modal__content,
.components-modal__header + div {

rjchow
rjchow approved these changes May 4, 2023
View reviewed changes
Copy link
Contributor

@rjchow rjchow left a comment

Choose a reason for hiding this comment

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

Totally missed that! 🤦 Thanks!

@adrianduffell adrianduffell self-requested a review May 5, 2023 14:00
adrianduffell
adrianduffell approved these changes May 5, 2023
View reviewed changes
Copy link
Contributor

@adrianduffell adrianduffell left a comment

Choose a reason for hiding this comment

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

It tested well! Thanks @chihsuan 🚀

@chihsuan chihsuan merged commit 3f0219b into trunk May 8, 2023
@chihsuan chihsuan deleted the fix/load-sample-product-modal branch May 8, 2023 04:19
@github-actions github-actions bot added this to the 7.8.0 milestone May 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ilyasfoo ilyasfoo Awaiting requested review from ilyasfoo

2 more reviewers

@adrianduffell adrianduffell adrianduffell approved these changes

@rjchow rjchow rjchow approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@chihsuan chihsuan

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.8.0

Development

Successfully merging this pull request may close these issues.

Loading sample product's progress message is misaligned if Gutenberg plugin is enabled

4 participants

@chihsuan @rjchow @adrianduffell