Remove incorrect use important in swatches option text #30454

mrtuvn · 2020-10-12T15:11:28Z

Description (*)

Developers will not able re-define styles in swatch option text when core file defined important
Here is example

body .swatch-attribute .swatch-option.text.selected { background-color: black; }

property background-color will not able apply when core magento defined important. The last solution is use another important with high css specificity to get higher priority than magento

Related Pull Requests

Fixed Issues (if relevant)

Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

Scenario 1
Have customise styles for blank theme

Create custom style less file for reproduce approach add style to swatch option text
Path file can be app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_extend.less
In file _extend.less add style like description
ex:
body .swatch-attribute .swatch-option.text.selected { background-color: black; }
Run cache clean and deploy static content
Check frontend in details product page. Visit any configurable product have swatch option text to easier see the change
If product have swatch option text when user select swatch option the background would change to black
But it's not happen because core define important override define in _extend.less
Expected result is the background-color in _extend.less should be applied and have higher priority than default magento
Default magento is .swatch-option.text.selected {background-color: #ffffff !important} background color white will have high priority than other declare

Before change results: Background-color: black not apply, still have background color white in swatch-option selected
After change results: Background-color: black applied

Scenario 2
No customise styles
Swatch text option should show like before change

After results: remain visual same as before
Selected swatch option have background-color white

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] Remove incorrect use important in swatches option text #30496: Remove incorrect use important in swatches option text

m2-assistant · 2020-10-12T15:11:30Z

Hi @mrtuvn. 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

up

mrtuvn · 2020-10-12T15:14:11Z

app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_module.less

@@ -326,7 +326,6 @@
            margin: 2px 0;
            padding: 2px;
            position: static;
-            z-index: 1;
        }


unneccesary define z-index

ptylek

@mrtuvn Can you please add manual testing scenarios so QA can check if selected styling for swatch option text works properly after the change? Looks ok, but would wait for static tests to complete.

mrtuvn · 2020-10-13T01:57:06Z

i have updated manual testing scenarios

ptylek · 2020-10-13T06:13:28Z

@magento run Static Tests

mrtuvn · 2020-10-13T12:14:41Z

@magento run 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, Unit Tests, WebAPI Tests

mrtuvn · 2020-10-13T23:48:28Z

@magento run Semantic Version Checker

ptylek

Thanks @mrtuvn. Needs manual testing to check if selected styling for swatch option text stays the same as before change.

magento-engcom-team · 2020-10-14T06:39:42Z

Hi @ptylek, thank you for the review.
ENGCOM-8341 has been created to process this Pull Request
✳️ @ptylek, could you please add one of the following labels to the Pull Request?

Label	Description
`Auto-Tests: Covered`	All changes in Pull Request is covered by auto-tests
`Auto-Tests: Not Covered`	Changes in Pull Request requires coverage by auto-tests
`Auto-Tests: Not Required`	Changes in Pull Request does not require coverage by auto-tests

engcom-Alfa · 2020-10-15T07:55:01Z

✔️ QA Passed

Manual testing scenario:

1 .Create custom style less file for reproduce approach add style to swatch option text;
2. Path file can be app/design/frontend/Magento/blank/Magento_Swatches/web/css/source/_extend.less
3. In file _extend.less add style like description
ex:

body .swatch-attribute .swatch-option.text.selected { background-color: black; }

Run cache clean and deploy static content
Go to a category with a product on Storefront;

Before: ✖️ Background color is still white

After: ✔️ Background color is black

Scenario 2

No customise styles

After: ✔️ Selected swatch option have background-color white

Checked and on the Blank theme and everything works as expected

After: ✔️ Background color is black

engcom-Alfa · 2020-10-15T08:05:28Z

@magento create issue

…30454

m2-assistant · 2020-10-16T13:36:42Z

Hi @mrtuvn, 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.

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

magento-engcom-team added Area: Design/Frontend Release Line: 2.4 labels Oct 12, 2020

Remove incorrect use important in swatches option text

df5ae12

up

mrtuvn force-pushed the remove-incorrect-use-important-declare-swatches branch from 376964b to df5ae12 Compare October 12, 2020 15:13

mrtuvn commented Oct 12, 2020

View reviewed changes

sidolov added Priority: P4 No current plan to fix. Fixing can be deferred as a logical part of more important work. Severity: S4 Affects aesthetics, professional look and feel, “quality” or “usability”. labels Oct 12, 2020

ptylek suggested changes Oct 12, 2020

View reviewed changes

ghost assigned ptylek Oct 12, 2020

ghost added Progress: needs update and removed Progress: pending review labels Oct 12, 2020

ptylek approved these changes Oct 14, 2020

View reviewed changes

ghost added Progress: ready for testing and removed Progress: needs update labels Oct 14, 2020

ptylek added the Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests label Oct 14, 2020

engcom-Alfa self-assigned this Oct 15, 2020

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

[Issue] Remove incorrect use important in swatches option text #30496

Closed

4 tasks

engcom-Alfa added the QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope label Oct 15, 2020

ghost added Progress: testing in progress and removed Progress: ready for testing Progress: testing in progress labels Oct 15, 2020

ghost added the Progress: extended testing label Oct 15, 2020

engcom-Foxtrot self-assigned this Oct 15, 2020

ghost added Progress: accept and removed Progress: extended testing labels Oct 15, 2020

magento-engcom-team pushed a commit that referenced this pull request Oct 16, 2020

ENGCOM-8341: Remove incorrect use important in swatches option text #…

77f02f0

…30454

magento-engcom-team merged commit f0edebd into magento:2.4-develop Oct 16, 2020

mrtuvn deleted the remove-incorrect-use-important-declare-swatches branch October 24, 2020 11:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove incorrect use important in swatches option text #30454

Remove incorrect use important in swatches option text #30454

mrtuvn commented Oct 12, 2020 •

edited by m2-assistant bot

Loading

m2-assistant bot commented Oct 12, 2020

mrtuvn Oct 12, 2020

ptylek left a comment

mrtuvn commented Oct 13, 2020

ptylek commented Oct 13, 2020

mrtuvn commented Oct 13, 2020

mrtuvn commented Oct 13, 2020

ptylek left a comment

magento-engcom-team commented Oct 14, 2020

engcom-Alfa commented Oct 15, 2020 •

edited

Loading

engcom-Alfa commented Oct 15, 2020

m2-assistant bot commented Oct 16, 2020

Remove incorrect use important in swatches option text #30454

Remove incorrect use important in swatches option text #30454

Conversation

mrtuvn commented Oct 12, 2020 • edited by m2-assistant bot Loading

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Questions or comments

Contribution checklist (*)

Resolved issues:

m2-assistant bot commented Oct 12, 2020

mrtuvn Oct 12, 2020

Choose a reason for hiding this comment

ptylek left a comment

Choose a reason for hiding this comment

mrtuvn commented Oct 13, 2020

ptylek commented Oct 13, 2020

mrtuvn commented Oct 13, 2020

mrtuvn commented Oct 13, 2020

ptylek left a comment

Choose a reason for hiding this comment

magento-engcom-team commented Oct 14, 2020

engcom-Alfa commented Oct 15, 2020 • edited Loading

Scenario 2

engcom-Alfa commented Oct 15, 2020

m2-assistant bot commented Oct 16, 2020

mrtuvn commented Oct 12, 2020 •

edited by m2-assistant bot

Loading

engcom-Alfa commented Oct 15, 2020 •

edited

Loading