[B2B] 284 - Blank Theme multiselect arrows are too small #30028

joctabio · 2020-09-14T11:46:00Z

Description (*)

Fix new multi-select arrow down icon size for blank theme in Approval Rules page.

Fixed Issues

magento/partners-magento2b2b#284: Blank Theme multiselect arrows are too small

Manual testing scenarios (*)

Login as company admin account in storefront
Go to My Account > Approval Rules
Click Add New Rule
Note fixed icon size for multi-select dropdown for Specific roles option

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)

m2-assistant · 2020-09-14T11:46:03Z

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

nuzil

Hi @joctabio those changes are coming from B2B version.
I believe that same issue can popup also on community cause its a UI element. But please do not create Magento_B2b folder for fixing it. Better provide general fix for such UI element independent from Magento edition

joctabio · 2020-09-15T07:18:49Z

Hi @joctabio those changes are coming from B2B version.
I believe that same issue can popup also on community cause its a UI element. But please do not create Magento_B2b folder for fixing it. Better provide general fix for such UI element independent from Magento edition

Issue: https://github.com/magento/partners-magento2b2b/issues/284

@joanhe @danmooney2 what do you think would be the better approach on this one?

joanhe · 2020-09-16T14:44:05Z

@nuzil The problem component was introduced in the last B2B release. It is only available in B2B. The related theme issue should be addressed in B2B scope.

…too small - Fix arrow down icon size of new multi-select

…e_too_small

joctabio · 2020-09-16T15:31:20Z

@magento run all tests

rganin · 2020-09-17T14:47:00Z

@joanhe the blank theme design folder of CE repo contains designs for EE modules, like Rma or GiftCardAccount. There are no restrictions on adding non-public modules design content to CE. Do you know are there any specific restrictions for B2B edition?

rganin · 2020-09-17T14:47:16Z

Otherwise it looks ok:

joanhe · 2020-09-17T14:49:35Z

@joanhe the blank theme design folder of CE repo contains designs for EE modules, like Rma or GiftCardAccount. There are no restrictions on adding non-public design content to CE. Do you know are there any specific restrictions for B2B edition?

@rganin I don't think there is restriction.

rganin · 2020-09-17T15:11:10Z

@nuzil as @joanhe mentioned this component is introduced in Magento_B2b module so this is correct location for theme design overrides and there are no any restrictions on new module creation. Do you still have any concerns on this fix or we can move forward?

nuzil · 2020-09-21T09:32:54Z

@magento give me test instance

magento-deployment-service · 2020-09-21T09:32:56Z

Hi @nuzil. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2020-09-21T09:38:18Z

Hi @nuzil, here is your Magento Instance: https://287e93edcc683850dc54a619653b8b82.instances.magento-community.engineering
Admin access: https://287e93edcc683850dc54a619653b8b82.instances.magento-community.engineering/admin_81dc
Login: 9fd38bee
Password: 5bae22de4c4a

nuzil · 2020-09-21T13:06:06Z

app/design/frontend/Magento/blank/Magento_B2b/web/css/source/actions/_actions-select.less

+@_triangle__width: @button-marker-triangle__width;
+
+//  Action select have the same visual styles and functionality as native <select>
+.admin__action-group-wrap {


I am not sure its correct. How this selector is going to fix Frontend styles?
Sorry I cannot reproduce it really on my instance, maybe you can give some overview.

nuzil · 2020-09-21T13:07:07Z

@rganin btw on your screenshot is still not ok :-)

joctabio · 2020-09-21T13:48:51Z

app/design/frontend/Magento/blank/Magento_B2b/web/css/source/actions/_actions-select.less

+            align-items: center;
+            content: @icon-down;
+            display: flex;
+            font-size: 24px;


@nuzil as you can see, I have set it to 24px to make it work specifically for the Blank theme since it has a significantly smaller font-icon asset for the arrow down.

In (B2B repo, 1.2-develop):
app/code/Magento/B2b/view/frontend/web/css/source/actions/_actions-select.less the icon is set to 10px which applies to any theme but only works perfectly for Luma.

Thats clear, thanks, but I mean this CSS selector is located in Admin:
" .admin__action-group-wrap {" or?

@nuzil yes, the selector is targeting elements with admin__ prefixed class names as seen in the main module B2B 1.2-develop: app/code/Magento/B2b/view/frontend/web/css/source/actions/_actions-select.less.

If you are recommending to refactor the CSS selector that was used in the storefront, then that would result in refactoring the template file as well which is located at:
B2B 1.2-develop: app/code/Magento/B2b/view/frontend/web/template/form/element/ui-group.html that has all the existing admin__ prefixed class names.

@joanhe @rganin do you think this is still in scope with the issue and should we refactor the template file?

@joctabio @nuzil discussed this with UI team members, @eug123 : This prefix does not have a functional purpose and is just a refactoring leftover that has not been eliminated due to priority changes. It exists in backend styles and has migrated to storefront with components like app/code/Magento/CheckoutAddressSearch/view/frontend/web/template/ui-select.html, the subject one and some other. It is also used in some frontend styles, like app/design/frontend/Magento/luma/web/css/source/_forms.less and others.

Blind removal is unapplicable here, some styles are common for storefront and backend and located in base, also there is a non-zero probability of having style conflicts after prefix removal. This should be done in a separate story with comprehensive UI testing.

I suggest to leave it as is like in the mentioned template for now.

nuzil

Ok. Unfortnatelly I cannot check the UI myself, so UI tests are required. But code looks fine for me

magento-engcom-team · 2020-09-25T10:58:34Z

Hi @nuzil, thank you for the review.
ENGCOM-8272 has been created to process this Pull Request
✳️ @nuzil, 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

m2-assistant · 2020-09-28T18:33:58Z

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

joctabio added Area: Frontend partners-contribution Pull Request is created by Magento Partner Area: Design/Frontend PAP Partners acceleration program project: B2B PAP B2B Team 1 labels Sep 14, 2020

ghost added this to Pending Review in Pull Requests Dashboard Sep 14, 2020

ghost added the Progress: pending review label Sep 14, 2020

magento-engcom-team added the Release Line: 2.4 label Sep 14, 2020

nuzil requested changes Sep 14, 2020

View reviewed changes

ghost moved this from Pending Review to Changes Requested in Pull Requests Dashboard Sep 14, 2020

ghost assigned nuzil Sep 14, 2020

ghost added Progress: needs update and removed Progress: pending review labels Sep 14, 2020

magento/partners-magento2b2b#284: Blank Theme multiselect arrows are …

9e81d9a

…too small - Fix arrow down icon size of new multi-select

joctabio force-pushed the 284_Blank_Theme_multiselect_arrows_are_too_small branch from f0d1578 to 9e81d9a Compare September 16, 2020 15:30

Merge branch '2.4-develop' into 284_Blank_Theme_multiselect_arrows_ar…

b08738f

…e_too_small

joanhe moved this from Changes Requested to Pending Review in Pull Requests Dashboard Sep 17, 2020

ghost added Progress: pending review and removed Progress: needs update labels Sep 17, 2020

rganin self-requested a review September 17, 2020 14:30

rganin moved this from Pending Review to Review in Progress in Pull Requests Dashboard Sep 17, 2020

ghost added Progress: review and removed Progress: pending review labels Sep 17, 2020

rganin approved these changes Sep 17, 2020

View reviewed changes

rganin moved this from Review in Progress to Ready for Testing in Pull Requests Dashboard Sep 17, 2020

ghost moved this from Ready for Testing to Review in Progress in Pull Requests Dashboard Sep 17, 2020

ghost assigned rganin Sep 17, 2020

nuzil reviewed Sep 21, 2020

View reviewed changes

joctabio commented Sep 21, 2020

View reviewed changes

nuzil approved these changes Sep 25, 2020

View reviewed changes

ghost moved this from Review in Progress to Ready for Testing in Pull Requests Dashboard Sep 25, 2020

ghost added Progress: ready for testing and removed Progress: review labels Sep 25, 2020

joanhe moved this from Ready for Testing to Merge in Progress in Pull Requests Dashboard Sep 28, 2020

ghost moved this from Merge in Progress to Ready for Testing in Pull Requests Dashboard Sep 28, 2020

joanhe unassigned nuzil Sep 28, 2020

magento-engcom-team merged commit adc9b18 into 2.4-develop Sep 28, 2020

sidolov moved this from Ready for Testing to Recently Merged in Pull Requests Dashboard Oct 1, 2020

ghost moved this from Recently Merged to Ready for Testing in Pull Requests Dashboard Oct 1, 2020

sidolov removed this from Ready for Testing in Pull Requests Dashboard Oct 1, 2020

okorshenko deleted the 284_Blank_Theme_multiselect_arrows_are_too_small branch February 9, 2021 15:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[B2B] 284 - Blank Theme multiselect arrows are too small #30028

[B2B] 284 - Blank Theme multiselect arrows are too small #30028

joctabio commented Sep 14, 2020

m2-assistant bot commented Sep 14, 2020

nuzil left a comment

joctabio commented Sep 15, 2020

joanhe commented Sep 16, 2020 •

edited

Loading

joctabio commented Sep 16, 2020

rganin commented Sep 17, 2020 •

edited

Loading

rganin commented Sep 17, 2020

joanhe commented Sep 17, 2020

rganin commented Sep 17, 2020

nuzil commented Sep 21, 2020

magento-deployment-service bot commented Sep 21, 2020

magento-deployment-service bot commented Sep 21, 2020

nuzil Sep 21, 2020

nuzil commented Sep 21, 2020

joctabio Sep 21, 2020

nuzil Sep 21, 2020

joctabio Sep 23, 2020

rganin Sep 24, 2020 •

edited

Loading

nuzil left a comment

magento-engcom-team commented Sep 25, 2020

m2-assistant bot commented Sep 28, 2020

[B2B] 284 - Blank Theme multiselect arrows are too small #30028

[B2B] 284 - Blank Theme multiselect arrows are too small #30028

Conversation

joctabio commented Sep 14, 2020

Description (*)

Fixed Issues

Manual testing scenarios (*)

Contribution checklist (*)

m2-assistant bot commented Sep 14, 2020

nuzil left a comment

Choose a reason for hiding this comment

joctabio commented Sep 15, 2020

joanhe commented Sep 16, 2020 • edited Loading

joctabio commented Sep 16, 2020

rganin commented Sep 17, 2020 • edited Loading

rganin commented Sep 17, 2020

joanhe commented Sep 17, 2020

rganin commented Sep 17, 2020

nuzil commented Sep 21, 2020

magento-deployment-service bot commented Sep 21, 2020

magento-deployment-service bot commented Sep 21, 2020

nuzil Sep 21, 2020

Choose a reason for hiding this comment

nuzil commented Sep 21, 2020

joctabio Sep 21, 2020

Choose a reason for hiding this comment

nuzil Sep 21, 2020

Choose a reason for hiding this comment

joctabio Sep 23, 2020

Choose a reason for hiding this comment

rganin Sep 24, 2020 • edited Loading

Choose a reason for hiding this comment

nuzil left a comment

Choose a reason for hiding this comment

magento-engcom-team commented Sep 25, 2020

m2-assistant bot commented Sep 28, 2020

joanhe commented Sep 16, 2020 •

edited

Loading

rganin commented Sep 17, 2020 •

edited

Loading

rganin Sep 24, 2020 •

edited

Loading