Skip to content
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

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

Merged
merged 2 commits into from
Sep 28, 2020
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e81d9a
magento/partners-magento2b2b#284: Blank Theme multiselect arrows are …
Sep 14, 2020
b08738f
Merge branch '2.4-develop' into 284_Blank_Theme_multiselect_arrows_ar…
joctabio Sep 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 158 additions & 0 deletions app/design/frontend/Magento/blank/Magento_B2b/web/css/source/actions/_actions-select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

//
// Actions -> Action select
// _____________________________________________

//
// Variables
// _____________________________________________

@color-blue-pure: #007bdb;

@action__height: 3.2rem;
@action__width: 3.2rem;

// Triangle marker
@button-marker-triangle__height: .5rem;
@button-marker-triangle__width: .8rem;

@button__border-color: @color-gray68;

@action__border-color: @color-gray68;
@action__active__border-color: @action__border-color;
@action__hover__border-color: @action__border-color;

@action-select__disabled__color: @text__color;
@action-select__z-index: @z-index-5;

@field-control__box-shadow: 0 0 3px 1px @color-blue3;
@field-control__active__border-color: @color-blue-pure;
@field-control__hover__border-color: @action__hover__border-color;

@_dropdown__padding-right: @action__height;
@_triangle__height: @button-marker-triangle__height;
@_triangle__width: @button-marker-triangle__width;

// Action select have the same visual styles and functionality as native <select>
.admin__action-group-wrap {
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

@_action-select__border-color: @button__border-color;
@_action-select__active__border-color: @action__active__border-color;
@_action-select-toggle__size: @action__height;

display: inline-block;
position: relative;

.action-select {
.lib-text-overflow();

background-color: @color-white;
font-weight: @font-weight__regular;
text-align: left;

&:hover {
border-color: @color-gray68;

&:before {
border-color: @field-control__hover__border-color;
}
}

// Toggle action
&:extend(.abs-icon-add all);

&:before {
align-items: center;
content: @icon-down;
display: flex;
font-size: 24px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@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?

Copy link
Contributor

@rganin rganin Sep 24, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

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

justify-content: space-around;
line-height: 1;
position: absolute;
right: 0;
width: @action__width;
}

&._active {
&:before {
content: @icon-up;
}
}

&[disabled] {
color: @action-select__disabled__color;
}

&._mage-error {
border: 1px solid @form-element-validation__border-error;
}
}

&._focus {
.action-select {
&._mage-error {
border: 1px solid @form-element-validation__border-error;
}
}
}

&._active {
z-index: @action-select__z-index;

.action-select {
&:before {
content: @icon-up;
}
}

.action-menu {
.lib-css(box-shadow, @field-control__box-shadow);
}
}

.action-menu {
border: 1px solid @action__border-color;
display: none;
max-height: 45rem;
overflow-y: auto;

&._active {
display: block;
}

._disabled {
&:hover {
background: @color-white;
}

.action-menu-item {
cursor: default;
opacity: .5;
}
}
}

.action-menu-items {
left: 0;
position: absolute;
right: 0;
top: 100%;

> .action-menu {
min-width: 100%;
position: static;

.action-submenu {
position: absolute;
right: -100%;
}
}
}

.validate-select-field {
.lib-visually-hidden();
}
}