woocommerce/plugins/woocommerce-blocks/assets/js/blocks/shared/styles/style.scss

17 lines
577 B
SCSS
Raw Normal View History

Add dropdown version of Filter by Rating (https://github.com/woocommerce/woocommerce-blocks/pull/7771) * Rename the setting section to match Filter by Attribute * Add Display Style toggle to the block settings * Set list as a default value of displayStyle for Filter by Rating * Add dropdown variant of Filter by Rating * Extend the Editor settings with selectType: single or multiple * Adjust the styles of a FormTokenField to other dropdown * Align Editor settings order and wording between Filter by Attribute and Rating * Fix the issue with cut off corners of dropdown borders * Provide translated screen reader messages and placeholder * Revert the label property, which is necessary to display checkbox list * Make classname for Rating component optional and remove styling in Filter by Rating * Cover the case when filter with zero products needs string methods for comparison * Handle Typescript errors and add ts-ignore annotations when necessary * Remove explicit key prop assignment in Rating component * Remove leftover property in type definition * Refactor JSX element extension with custom properties to more robust way with object copy * Filter by rating tests (https://github.com/woocommerce/woocommerce-blocks/pull/7845) * Filter by Rating tests: - List single - List multiple - Dropdown single - Dropdown multiple * Adjust the font-size of Filter by Rating dropdown to the rest of the filters * Fix E2E tests after the Editor settings label has been changed * Improve sorting in Filter by Rating dropdown With this change the order of options is always descending: in the chips, suggestions, active filters and URL * Change the name of the filter blocks in the test files * Prevent single dropdown input to overflow the wrapper The issue is fixed in three filters, hence a new shared styles file is created at the path assets/js/blocks/shared/styles/style.css * Remove the unused styles of active options in Filter by Rating Chosen options in Filter by Rating list have been bolded. That was the only filter that was doing it. Class was removed, but not the styles themselves which became obsolete. Removing the leftover styles then * Change the approach of shared styles to fix the dropdown issue in filters Instead of using direct classes, rewrite it to mixin and include in the filters * Fix the Filter by Rating with Products block The problem was with the Products block, that there was incorrect initial value of product ratings query * Align the logic of getting the filters from URL for Filter by Rating with Filter by Stock Co-authored-by: Luigi Teschio <gigitux@gmail.com>
2022-12-13 08:12:03 +00:00
// Fix related to https://github.com/woocommerce/woocommerce-blocks/issues/7882
// and similar one, where input overlaps with the wrapper border.
// Related only to single selection dropdown with already chosen option.
@mixin includeFormTokenFieldFix {
.single-selection {
.components-form-token-field__token + input[type="text"].components-form-token-field__input {
opacity: 0;
}
.components-form-token-field__input-container.is-active {
.components-form-token-field__token + input[type="text"].components-form-token-field__input {
opacity: 1;
}
}
}
}