Description
This issue is automatically created based on existing pull request: #30453: Fix missing escape less calc
Description (*)
Magento 2.4-develop
We've escaped the content in the calc, this way the calc in the css output file will be correctly. Previously magento will return wrong calc value
Less: width: calc(100% - 20px);
Before fix
.block-reorder .product-item-name { float: left; width: calc(80%); }
Less: width: calc(~'100% - 20px');
After fix
.block-reorder .product-item-name { float: left; width: calc(100% - 20px); }
If less code contain variable escape will a little bit difference
Instead write like this: width: calc(100% - @indent__l);
We should write like this
width: ~'calc(100% - @{indent__l})';
or width: calc(~'100% -' @{indent__l});
Related Pull Requests
Fixed Issues (if relevant)
- Fixes magento/magento2#<issue_number>
Manual testing scenarios (*)
Case 1.
- Go to order creation page in admin panel;
- Find class admin__payment-method-wrapper , admin__field-control (theme backend)
- Make sure the final calc shows the correct value in output CSS
Actual Result: ✖️ .admin__payment-method-wrapper {width: calc(47%);}
Expected Result: ✔️ .admin__payment-method-wrapper {width: calc(50% - 3rem);}
Case 2
- Go to Storefront (Recently Ordered block);
- Find class .block-reorder .product-item-name (theme luma)
- Make sure the final calc show correct value in output css
Actual Result: ✖️ .block-reorder .product-item-name {width: calc(80%);}
Expected Result: ✔️ .block-reorder .product-item-name {width: calc(100% - 20px);}
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)
Metadata
Metadata
Assignees
Labels
Type
Projects
Status