Module & Theme less optimization for cross browser compatibility. #30728

pratiksangani · 2020-10-30T17:45:28Z

Description (*)

Updated core modules & theme less design with Magento default Flex layout less mixins. Reference taken from <Magento2>/lib/web/css/source/lib/_utilities.less:409 Flex layout mixins and my Magento 2 theme development experience. Using these provided mixins, the design will work on cross-browser platform properly. I've also removed some redundant code from some direct less styles, as they were already been covered by less mixins.

Related Pull Requests

N/A

Fixed Issues (if relevant)

N/A

Manual testing scenarios (*)

N/A

Questions or comments

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
All automated tests passed successfully (all builds are green)

Resolved issues:

resolves [Issue] Module & Theme less optimization for cross browser compatibility. #30729: Module & Theme less optimization for cross browser compatibility.

m2-assistant · 2020-10-30T17:45:30Z

Hi @pratiksangani. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE,
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

pratiksangani · 2020-10-30T17:45:59Z

@magento create issue

pratiksangani · 2020-10-30T17:46:19Z

@magento run all tests

pratiksangani · 2020-10-30T18:31:59Z

@ihor-sviziev Will you please proceed this PR?

ihor-sviziev · 2020-10-31T17:03:04Z

@magento run all tests

ihor-sviziev

Hi @pratiksangani,
Could you fix failing static tests?

mrtuvn · 2020-11-02T16:48:46Z

app/design/adminhtml/Magento/backend/Magento_Customer/web/css/source/_module.less

-        align-items: flex-start;
-        display: flex;
+        .lib-vendor-box-align(flex-start);
+        .lib-vendor-prefix-display(flex);
        float: left;


default param .lib-vendor-prefix-display() is flex so you don't need to more specific except you want to try inline flex such as .lib-vendor-prefix-display(inline-flex)

mrtuvn · 2020-11-02T16:50:31Z

app/design/adminhtml/Magento/backend/web/css/source/_actions.less

@@ -438,8 +438,6 @@ button {
        &._parent {
            .lib-vendor-prefix-display(flex);
            .lib-vendor-prefix-flex-direction(row);
-            display: flex;
-            flex-direction: row;



we don't have to specific flex in here when call .lib-vendor-prefix

And the rest changes fine with me

magento-engcom-team · 2020-11-03T17:22:56Z

Hi @ihor-sviziev, thank you for the review.
ENGCOM-8416 has been created to process this Pull Request

digiltd · 2020-11-10T13:05:33Z

Is there still a need to prefix all the flex stuff these days?

Granted there will be some cases where IE11 or Safari installed before 2015 needs to be supported, though if you are building for those browsers, flexbox prefixes are the least of your concerns :)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox#Status_in_browsers

ihor-sviziev · 2020-11-10T16:23:52Z

@digiltd good point!
@pratiksangani could you explain which compatibility you would like to fix? Seems like we safely could remove these vendor prefixes

digiltd · 2020-11-11T09:03:59Z

@ihor-sviziev I think appearance still warrants a prefix, though only -webkit- and -moz- as Edge and IE use the -webkit- prefix

https://caniuse.com/css-appearance

ihor-sviziev

Hi @pratiksangani,
Could you revert all changes and leave the only changes for appearance?

ihor-sviziev · 2020-12-07T15:23:19Z

@pratiksangani I am closing this PR now due to inactivity.
Please reopen and update if you wish to continue.
Thank you for the collaboration!

m2-assistant · 2020-12-07T15:23:22Z

Hi @pratiksangani, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

Module & Theme less optimization for cross browser compatibility.

11f3a3e

ghost added the Progress: pending review label Oct 30, 2020

m2-assistant bot mentioned this pull request Oct 30, 2020

[Issue] Module & Theme less optimization for cross browser compatibility. #30729

Closed

4 tasks

magento-engcom-team added Area: Design/Frontend Area: Frontend Component: LoginAsCustomerAdminUi Component: MediaGalleryUi Release Line: 2.4 labels Oct 30, 2020

Module & Theme less optimization for cross browser compatibility#2

622217a

ihor-sviziev self-assigned this Oct 31, 2020

ghost added Progress: review and removed Progress: pending review labels Oct 31, 2020

ihor-sviziev approved these changes Oct 31, 2020

View reviewed changes

ghost added Progress: ready for testing and removed Progress: review labels Oct 31, 2020

ihor-sviziev requested changes Nov 2, 2020

View reviewed changes

ghost added Progress: needs update and removed Progress: ready for testing labels Nov 2, 2020

mrtuvn requested changes Nov 2, 2020

View reviewed changes

ghost assigned mrtuvn Nov 2, 2020

ghost added Progress: review and removed Progress: needs update labels Nov 2, 2020

ihor-sviziev added the Progress: needs update label Nov 3, 2020

ghost removed the Progress: review label Nov 3, 2020

sidolov added the Priority: P3 May be fixed according to the position in the backlog. label Nov 4, 2020

m2-community-project bot added Progress: review Severity: S4 Affects aesthetics, professional look and feel, “quality” or “usability”. and removed Progress: needs update labels Nov 4, 2020

ihor-sviziev added the Progress: needs update label Nov 5, 2020

m2-community-project bot removed the Progress: review label Nov 5, 2020

ihor-sviziev requested changes Nov 17, 2020

View reviewed changes

ihor-sviziev closed this Dec 7, 2020

m2-community-project bot removed the Progress: needs update label Dec 7, 2020

Module & Theme less optimization for cross browser compatibility. #30728

Module & Theme less optimization for cross browser compatibility. #30728

Uh oh!

Conversation

pratiksangani commented Oct 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Questions or comments

Contribution checklist (*)

Resolved issues:

Uh oh!

m2-assistant bot commented Oct 30, 2020

Uh oh!

pratiksangani commented Oct 30, 2020

Uh oh!

pratiksangani commented Oct 30, 2020

Uh oh!

pratiksangani commented Oct 30, 2020

Uh oh!

ihor-sviziev commented Oct 31, 2020

Uh oh!

ihor-sviziev left a comment

Choose a reason for hiding this comment

Uh oh!

mrtuvn Nov 2, 2020

Choose a reason for hiding this comment

Uh oh!

mrtuvn Nov 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mrtuvn Nov 2, 2020

Choose a reason for hiding this comment

Uh oh!

magento-engcom-team commented Nov 3, 2020

Uh oh!

digiltd commented Nov 10, 2020

Uh oh!

ihor-sviziev commented Nov 10, 2020

Uh oh!

digiltd commented Nov 11, 2020

Uh oh!

ihor-sviziev left a comment

Choose a reason for hiding this comment

Uh oh!

ihor-sviziev commented Dec 7, 2020

Uh oh!

m2-assistant bot commented Dec 7, 2020

Uh oh!

Uh oh!

pratiksangani commented Oct 30, 2020 •

edited

Loading

mrtuvn Nov 2, 2020 •

edited

Loading