Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 6cb49bc

Browse files
albarinalbarin
authored
Add Apply button placeholders to filters and adjust title margins (#7077)
* Adjust filter titles margins * Show the Apply button placeholder and adjust title margins * Add placeholder for the Apply button on filter by price * Add placeholder for the Apply button on filter by attr * Update stock filter snapshot * Move the apply button placeholder to inside the FilterSubmitButton component * Fix the placeholder button height * Fix apply button on editor * Change loading class to be is-loading
1 parent 9bec813 commit 6cb49bc

File tree

13 files changed

+140
-89
lines changed

13 files changed

+140
-89
lines changed

‎assets/js/base/components/filter-placeholder/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
border-radius: em(26px);
55
box-shadow: none;
66
min-width: 80px;
7+
margin-top: $gap-small;
8+
margin-bottom: $gap-small;
79
max-width: max-content !important;
810

911
&::after {
@@ -12,6 +14,7 @@
1214

1315
.wc-block-stock-filter__title,
1416
.wc-block-price-filter__title,
17+
.wc-block-active-filters__title,
1518
.wc-block-attribute-filter__title {
1619
margin: 0;
1720
height: 1em;

‎assets/js/base/components/filter-submit-button/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import './style.scss';
1212

1313
interface FilterSubmitButtonProps {
1414
className?: string;
15+
isLoading?: boolean;
1516
disabled?: boolean;
1617
label?: string;
1718
onClick: () => void;
@@ -20,6 +21,7 @@ interface FilterSubmitButtonProps {
2021

2122
const FilterSubmitButton = ( {
2223
className,
24+
isLoading,
2325
disabled,
2426
/* translators: Submit button text for filters. */
2527
label = __( 'Apply', 'woo-gutenberg-products-block' ),
@@ -33,6 +35,7 @@ const FilterSubmitButton = ( {
3335
'wp-block-button__link',
3436
'wc-block-filter-submit-button',
3537
'wc-block-components-filter-submit-button',
38+
{ 'is-loading': isLoading },
3639
className
3740
) }
3841
disabled={ disabled }

‎assets/js/base/components/filter-submit-button/style.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,13 @@
33
display: block;
44
margin-left: auto;
55
white-space: nowrap;
6+
7+
&.is-loading {
8+
@include placeholder();
9+
margin-top: $gap;
10+
width: max-content;
11+
box-shadow: none;
12+
border-radius: 0;
13+
line-height: initial;
14+
}
615
}

‎assets/js/base/components/price-slider/index.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -471,24 +471,29 @@ const PriceSlider = ( {
471471
/>
472472
</div>
473473
) }
474-
{ ! isUpdating && (
474+
{
475475
<div className="wc-block-components-price-slider__actions">
476-
{ ( minPrice !== minConstraint ||
477-
maxPrice !== maxConstraint ) && (
478-
<FilterResetButton
479-
onClick={ () => {
480-
onChange( [ minConstraint, maxConstraint ] );
481-
debouncedUpdateQuery();
482-
} }
483-
screenReaderLabel={ __(
484-
'Reset price filter',
485-
'woo-gutenberg-products-block'
486-
) }
487-
/>
488-
) }
476+
{ ! isUpdating &&
477+
( minPrice !== minConstraint ||
478+
maxPrice !== maxConstraint ) && (
479+
<FilterResetButton
480+
onClick={ () => {
481+
onChange( [
482+
minConstraint,
483+
maxConstraint,
484+
] );
485+
debouncedUpdateQuery();
486+
} }
487+
screenReaderLabel={ __(
488+
'Reset price filter',
489+
'woo-gutenberg-products-block'
490+
) }
491+
/>
492+
) }
489493
{ showFilterButton && (
490494
<FilterSubmitButton
491495
className="wc-block-price-filter__button wc-block-components-price-slider__button"
496+
isLoading={ isUpdating }
492497
disabled={ isLoading || ! hasValidConstraints }
493498
onClick={ onSubmit }
494499
screenReaderLabel={ __(
@@ -498,7 +503,7 @@ const PriceSlider = ( {
498503
/>
499504
) }
500505
</div>
501-
) }
506+
}
502507
</div>
503508
);
504509
};

‎assets/js/base/components/price-slider/style.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,11 @@
2323
@include thumbFocus;
2424
}
2525
}
26+
2627
@mixin thumbFocus {
2728
background: $gray-900;
2829
}
30+
2931
/* stylelint-enable */
3032
@mixin track {
3133
cursor: default;
@@ -35,6 +37,7 @@
3537
-moz-appearance: none;
3638
appearance: none;
3739
}
40+
3841
@mixin reset {
3942
margin: 0;
4043
/* Use !important to prevent theme input styles from breaking the component.
@@ -166,23 +169,28 @@
166169
&::-webkit-slider-runnable-track {
167170
@include track;
168171
}
172+
169173
&::-webkit-slider-thumb {
170174
@include thumb;
171175
margin: -5px 0 0 0;
172176
}
177+
173178
&::-webkit-slider-progress {
174179
@include reset;
175180
}
176181

177182
&::-moz-focus-outer {
178183
border: 0;
179184
}
185+
180186
&::-moz-range-track {
181187
@include track;
182188
}
189+
183190
&::-moz-range-progress {
184191
@include reset;
185192
}
193+
186194
&::-moz-range-thumb {
187195
@include thumb;
188196
}
@@ -195,9 +203,11 @@
195203
&::-webkit-slider-thumb {
196204
@include thumbFocus;
197205
}
206+
198207
&::-moz-range-thumb {
199208
@include thumbFocus;
200209
}
210+
201211
&::-ms-thumb {
202212
@include thumbFocus;
203213
}
@@ -210,10 +220,12 @@
210220
margin-left: -2px;
211221
background-position-x: left;
212222
}
223+
213224
&::-moz-range-thumb {
214225
background-position-x: left;
215226
transform: translate(-2px, 2px);
216227
}
228+
217229
&::-ms-thumb {
218230
background-position-x: left;
219231
}
@@ -226,10 +238,12 @@
226238
background-position-x: right;
227239
margin-left: 2px;
228240
}
241+
229242
&::-moz-range-thumb {
230243
background-position-x: right;
231244
transform: translate(2px, 2px);
232245
}
246+
233247
&::-ms-thumb {
234248
background-position-x: right;
235249
}
@@ -270,16 +284,20 @@
270284
/*remove default tick marks*/
271285
color: transparent;
272286
}
287+
273288
&::-ms-fill-lower {
274289
background: #e1e1e1;
275290
box-shadow: 0 0 0 1px inset #b8b8b8;
276291
}
292+
277293
&::-ms-fill-upper {
278294
background: transparent;
279295
}
296+
280297
&::-ms-tooltip {
281298
display: none;
282299
}
300+
283301
&::-ms-thumb {
284302
transform: translate(1px, 0);
285303
pointer-events: auto;
@@ -290,6 +308,7 @@
290308
background: #e1e1e1;
291309
box-shadow: 0 0 0 1px inset #b8b8b8;
292310
}
311+
293312
&::-ms-fill-lower {
294313
background: transparent;
295314
}
@@ -345,9 +364,11 @@
345364
&::-webkit-slider-thumb {
346365
filter: none;
347366
}
367+
348368
&::-moz-range-thumb {
349369
filter: none;
350370
}
371+
351372
&::-ms-thumb {
352373
filter: none;
353374
}

‎assets/js/blocks/active-filters/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515
}
1616

17-
.wc-block-active-filters__title {
17+
> .wc-block-active-filters__title {
1818
margin-top: $gap-small;
1919
margin-bottom: $gap-small;
2020
}

‎assets/js/blocks/attribute-filter/block.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ const AttributeFilterBlock = ( {
543543
key={ remountKey }
544544
className={ classnames( borderProps.className, {
545545
'single-selection': ! multiple,
546-
'show-loading-state': isLoading,
546+
'is-loading': isLoading,
547547
} ) }
548548
style={ {
549549
...borderProps.style,
@@ -669,9 +669,10 @@ const AttributeFilterBlock = ( {
669669
) }
670670
/>
671671
) }
672-
{ blockAttributes.showFilterButton && ! isLoading && (
672+
{ blockAttributes.showFilterButton && (
673673
<FilterSubmitButton
674674
className="wc-block-attribute-filter__button"
675+
isLoading={ isLoading }
675676
disabled={
676677
termsLoading ||
677678
countsLoading ||

‎assets/js/blocks/attribute-filter/checkbox-filter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ const CheckboxFilter = ( {
2626
if ( isLoading ) {
2727
return (
2828
<>
29-
<span className="show-loading-state"></span>
30-
<span className="show-loading-state"></span>
29+
<span className="is-loading"></span>
30+
<span className="is-loading"></span>
3131
</>
3232
);
3333
}

‎assets/js/blocks/attribute-filter/style.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
text-transform: inherit;
1313
}
1414

15-
.wc-block-attribute-filter__title {
15+
> .wc-block-attribute-filter__title {
1616
margin-top: $gap-small;
1717
margin-bottom: $gap-small;
1818
}
@@ -23,13 +23,12 @@
2323
border-radius: inherit;
2424
border-color: inherit;
2525

26-
.show-loading-state {
26+
.is-loading {
2727
@include placeholder();
2828
box-shadow: none;
2929
border-radius: 0;
30-
margin-bottom: $gap;
31-
margin-top: $gap;
3230
height: 1em;
31+
margin-top: $gap;
3332
}
3433

3534
&.style-dropdown {
@@ -73,12 +72,12 @@
7372
width: 0;
7473
height: max-content;
7574

76-
&:not(.show-loading-state) {
75+
&:not(.is-loading) {
7776
border: 1px solid $gray-700 !important;
7877
border-radius: 4px;
7978
}
8079

81-
&.show-loading-state {
80+
&.is-loading {
8281
border-radius: em(4px);
8382
}
8483
}
@@ -187,4 +186,7 @@
187186
.wc-block-attribute-filter__button.wc-block-attribute-filter__button {
188187
padding: em($gap-smaller) em($gap);
189188
@include font-size(small);
189+
height: max-content;
190+
line-height: normal;
191+
width: max-content;
190192
}

‎assets/js/blocks/price-filter/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
text-transform: inherit;
1313
}
1414

15-
.wc-block-price-filter__title {
15+
> .wc-block-price-filter__title {
1616
margin-top: $gap-small;
1717
margin-bottom: $gap-small;
1818
}

0 commit comments

Comments
 (0)