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

[Experimental] Utilize WP generated class names to style interactivity stock filter block. #44073

Merged
merged 2 commits into from Jan 26, 2024
Merged

[Experimental] Utilize WP generated class names to style interactivity stock filter block. #44073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2ef6b6
Remove unique classes, remove unused styles, also from CheckboxList.
samueljseay Jan 25, 2024
cad2980
Add changefile(s) from automation for the following project(s): wooco…
invalid-email-address Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 3 additions & 7 deletions ...ins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx
View file
Open in desktop
Expand Up @@ -80,13 +80,9 @@ const Edit = ( props: BlockEditProps< BlockProps > ) => {
<Inspector { ...props } />
<Disabled>
<div
className={ classnames(
'wc-block-stock-filter',
`style-${ displayStyle }`,
{
'is-loading': false,
}
) }
className={ classnames( `style-${ displayStyle }`, {
'is-loading': false,
} ) }
>
{ displayStyle === 'dropdown' ? (
<>
Expand Down
162 changes: 0 additions & 162 deletions ...s/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/style.scss
View file
Open in desktop
Expand Up @@ -9,168 +9,6 @@
h6 {
text-transform: inherit;
}
}

.wc-block-stock-filter {
&.is-loading {
@include placeholder();
margin-top: $gap;
box-shadow: none;
border-radius: 0;
}

margin-bottom: $gap-large;

.wc-block-stock-filter-list {
margin: 0;

li {
label {
cursor: pointer;
}

input {
cursor: pointer;
display: inline-block;
}
}
}

&.style-dropdown {
@include includeFormTokenFieldFix();
position: relative;
display: flex;
gap: $gap;
align-items: flex-start;

.wc-block-components-filter-submit-button {
height: 36px;
line-height: 1;
}

> svg {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}

.wc-blocks-components-form-token-field-wrapper {
flex-grow: 1;
max-width: unset;
width: 0;
height: max-content;

&:not(.is-loading) {
border: 1px solid $gray-700 !important;
border-radius: 4px;
}

&.is-loading {
border-radius: em(4px);
}

.components-form-token-field {
border-radius: inherit;
}
}

.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
@include reset-color();
@include reset-typography();
border: 0;
padding: $gap-smaller;
border-radius: inherit;

.components-form-token-field__input {
@include font-size(small);

&::placeholder {
color: $black;
}
}

.components-form-token-field__suggestions-list {
border: 1px solid $gray-700;
border-radius: 4px;
margin-top: $gap-smaller;
max-height: 21em;

.components-form-token-field__suggestion {
color: $black;
border: 1px solid $gray-400;
border-radius: 4px;
margin: $gap-small;
padding: $gap-small;
}
}

.components-form-token-field__token,
.components-form-token-field__suggestion {
@include font-size(small);
}
}

.wc-block-components-product-rating {
margin-bottom: 0;
}
}

.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
padding: $gap-smallest 30px $gap-smallest $gap-smaller;

.components-form-token-field__token-text {
background-color: $white;
border: 1px solid;
border-right: 0;
border-radius: 25px 0 0 25px;
padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small);
line-height: 22px;
}

> .components-form-token-field__input {
margin: em($gap-smallest) 0;
}

.components-button.components-form-token-field__remove-token {
background-color: $white;
border: 1px solid;
border-left: 0;
border-radius: 0 25px 25px 0;
padding: 1px em($gap-smallest) 0 0;

&.has-icon svg {
background-color: $gray-200;
border-radius: 25px;
}
}
}

.wc-block-stock-filter__actions {
align-items: center;
display: flex;
gap: $gap;
justify-content: flex-end;
margin-top: $gap;

// The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop.
button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
margin-left: 0;
margin-top: 0;
@include font-size(small);
}

.wc-block-stock-filter__button {
margin-top: em($gap-smaller);
padding: em($gap-smaller) em($gap);
@include font-size(small);
}
}

.editor-styles-wrapper .wc-block-stock-filter .wc-block-stock-filter__button {
margin-top: em($gap-smaller);
padding: em($gap-smaller) em($gap);
@include font-size(small);
}
30 changes: 30 additions & 0 deletions plugins/woocommerce-blocks/packages/interactivity-components/checkbox-list/style.scss
View file
Open in desktop
@@ -1,3 +1,33 @@
// Import styles we need to render the checkbox list and checkbox control.
@import "../../../packages/components/checkbox-list/style";
@import "../../../packages/components/checkbox-control/style";

.wc-block-stock-filter-list {
margin: 0;

li {
label {
cursor: pointer;
}

input {
cursor: pointer;
display: inline-block;
}
}

.wc-block-components-checkbox-list {
margin: 0;

li {
label {
cursor: pointer;
}

input {
cursor: pointer;
display: inline-block;
}
}
}
}
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/44073-dev-unify-class-naming-stock-filter
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: patch
Type: dev

[Experimental] Unify class naming in new interactivity stock filter block.
7 changes: 1 addition & 6 deletions plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterStockStatus.php
View file
Open in desktop
Expand Up @@ -136,13 +136,8 @@ protected function render( $attributes, $content, $block ) {
);

return sprintf(
'<div %1$s>
%2$s
<div class="wc-block-stock-filter__controls">%3$s</div>
<div class="wc-block-stock-filter__actions"></div>
</div>',
'<div %1$s>%2$s</div>',
$wrapper_attributes,
$content,
$this->get_stock_filter_html( $stock_status_counts, $attributes ),
);
}
Expand Down
4 changes: 2 additions & 2 deletions plugins/woocommerce/src/Blocks/InteractivityComponents/CheckboxList.php
View file
Open in desktop
Expand Up @@ -35,11 +35,11 @@ public static function render( $props ) {
<div data-wc-interactive='<?php echo esc_attr( $namespace ); ?>'>
<div data-wc-context='<?php echo esc_attr( wp_json_encode( $checkbox_list_context ) ); ?>' >
<div class="wc-block-stock-filter style-list">
<ul class="wc-block-checkbox-list wc-block-components-checkbox-list wc-block-stock-filter-list">
<ul class="wc-block-components-checkbox-list">
<?php foreach ( $items as $item ) { ?>
<?php $item['id'] = $item['id'] ?? uniqid( 'checkbox-' ); ?>
<li>
<div class="wc-block-components-checkbox wc-block-checkbox-list__checkbox">
<div class="wc-block-components-checkbox">
<label for="<?php echo esc_attr( $item['id'] ); ?>">
<input
id="<?php echo esc_attr( $item['id'] ); ?>"
Expand Down