Skip to content

Improve element stacking in modals on tablet and mobile #35733

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
mdperez86 merged 4 commits into from
Nov 30, 2022
Merged

Improve element stacking in modals on tablet and mobile #35733

mdperez86 merged 4 commits into from
Nov 30, 2022

Conversation

@mdperez86
Copy link
Contributor

@mdperez86 mdperez86 commented Nov 25, 2022

All Submissions:

Changes proposed in this Pull Request:

Closes #35565

  • This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

  1. Got to Products -> Add New (MVP) page
  2. Under Attributes section click Add first attribute button
  3. The Add attribute modal should be shown
  4. When on mobile screen the table's header should be hidden, the attribute and values field have labels and are stacked in rows while the trash icon remains on the right with 8px margin right.

image

  1. When on tablet screen the table's header should be hidden, the attribute and values field have labels and are stacked in rows while the trash icon remains on the right with 8px margin right.

image

  1. When on desktop screen the table's header should be shown, the attribute and values field don't have labels and are stacked in columns as well as the trash icon that has 8px margin right.

image

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 created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@mdperez86 mdperez86 self-assigned this Nov 25, 2022
@github-actions github-actions bot added focus: react admin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 25, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 25, 2022 •
edited
Loading

Test Results Summary

Commit SHA: 6cf5521

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202611m 8s
E2E Tests186006019215m 21s
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.

louwie17
louwie17 previously approved these changes Nov 29, 2022
View reviewed changes
Copy link
Contributor

@louwie17 louwie17 left a comment

Choose a reason for hiding this comment

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

Tested well, and code looks good! I did leave one minor suggestion, but not quite necessary in my opinion.

plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx
};

const attributeLabel = __( 'Attribute', 'woocommerce' );
const valueLabel = __( 'Values', 'woocommerce' );
Copy link
Contributor

@louwie17 louwie17 Nov 29, 2022

Choose a reason for hiding this comment

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

Nice catch!

plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss
@include breakpoint('<782px') {
position: relative;
grid-template-columns: 1fr;
padding-right: 42px;
Copy link
Contributor

@louwie17 louwie17 Nov 29, 2022

Choose a reason for hiding this comment

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

Would it be worth adding a comment here, mentioning this padding is for the trash-column to display correctly?

@mdperez86 mdperez86 requested a review from louwie17 November 29, 2022 18:37
nathanss
nathanss reviewed Nov 30, 2022
View reviewed changes
packages/js/internal-style-build/abstracts/_mixins.scss Outdated
word-wrap: normal !important;
}

@mixin sr-only {
Copy link
Contributor

@nathanss nathanss Nov 30, 2022

Choose a reason for hiding this comment

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

Is sr = screen reader a known abbreviation? I didn't know, I only figured it out because of the comment on line 170.

If possible I suggest renaming the mixins to screen-reader-only and not-screen-reader-only

@mdperez86 mdperez86 requested a review from nathanss November 30, 2022 14:46
nathanss
nathanss previously approved these changes Nov 30, 2022
View reviewed changes
@mdperez86 mdperez86 requested a review from nathanss November 30, 2022 15:02
@mdperez86 mdperez86 merged commit 25a7c35 into trunk Nov 30, 2022
@mdperez86 mdperez86 deleted the enhancement/35565 branch November 30, 2022 16:28
@github-actions github-actions bot added this to the 7.3.0 milestone Nov 30, 2022
@github-actions github-actions bot mentioned this pull request Jan 13, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@octaedro octaedro Awaiting requested review from octaedro

@mattsherman mattsherman Awaiting requested review from mattsherman

@joshuatf joshuatf Awaiting requested review from joshuatf

@louwie17 louwie17 Awaiting requested review from louwie17

1 more reviewer

@nathanss nathanss nathanss approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mdperez86 mdperez86

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.3.0

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Improve element stacking in modals on tablet and mobile

4 participants

@mdperez86 @louwie17 @nathanss