Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update `filter by stock` skeleton design (https://github.com/woocommerce/woocommerce-blocks/pull/6996) 

* Update filter by stock skeleton design

* Show skeleton only when is loading, otherwise it will show the loading state also after clicking on an option
This commit is contained in:
Alba Rincón 2022-08-30 09:32:30 +02:00 committed by GitHub
parent d6d94ae622
commit 1e488287ed
2 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx
View File

@ -26,6 +26,7 @@ import { decodeEntities } from '@wordpress/html-entities';
import { isBoolean, objectHasProp } from '@woocommerce/types'; import { isBoolean, objectHasProp } from '@woocommerce/types';
import { addQueryArgs, removeQueryArgs } from '@wordpress/url'; import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
import { changeUrl, PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils'; import { changeUrl, PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils';
import classnames from 'classnames';
/** /**
* Internal dependencies * Internal dependencies
@ -339,14 +340,11 @@ const StockStatusFilterBlock = ( {
[ checked, displayedOptions ] [ checked, displayedOptions ]
); );
if ( displayedOptions.length === 0 ) {
return null;
}
const TagName = const TagName =
`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements; `h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
const isLoading = const isLoading =
! blockAttributes.isPreview && ! STOCK_STATUS_OPTIONS.current; ( ! blockAttributes.isPreview && ! STOCK_STATUS_OPTIONS.current ) ||
displayedOptions.length === 0;
const isDisabled = ! blockAttributes.isPreview && filteredCountsLoading; const isDisabled = ! blockAttributes.isPreview && filteredCountsLoading;
const hasFilterableProducts = getSettingWithCoercion( const hasFilterableProducts = getSettingWithCoercion(
@ -362,11 +360,19 @@ const StockStatusFilterBlock = ( {
return ( return (
<> <>
{ ! isEditor && blockAttributes.heading && ( { ! isEditor && blockAttributes.heading && (
<TagName className="wc-block-stock-filter__title"> <TagName
className={ classnames( 'wc-block-stock-filter__title', {
'show-loading-state': isLoading,
} ) }
>
{ blockAttributes.heading } { blockAttributes.heading }
</TagName> </TagName>
) } ) }
<div className="wc-block-stock-filter"> <div
className={ classnames( 'wc-block-stock-filter', {
'show-loading-state': isLoading,
} ) }
>
<CheckboxList <CheckboxList
className={ 'wc-block-stock-filter-list' } className={ 'wc-block-stock-filter-list' }
options={ displayedOptions } options={ displayedOptions }
@ -375,27 +381,29 @@ const StockStatusFilterBlock = ( {
isLoading={ isLoading } isLoading={ isLoading }
isDisabled={ isDisabled } isDisabled={ isDisabled }
/> />
<div className="wc-block-stock-filter__actions"> { ! isLoading && (
{ checked.length > 0 && ( <div className="wc-block-stock-filter__actions">
<FilterResetButton { checked.length > 0 && (
onClick={ () => { <FilterResetButton
setChecked( [] ); onClick={ () => {
onSubmit( [] ); setChecked( [] );
} } onSubmit( [] );
screenReaderLabel={ __( } }
'Reset stock filter', screenReaderLabel={ __(
'woo-gutenberg-products-block' 'Reset stock filter',
) } 'woo-gutenberg-products-block'
/> ) }
) } />
{ blockAttributes.showFilterButton && ( ) }
<FilterSubmitButton { blockAttributes.showFilterButton && (
className="wc-block-stock-filter__button" <FilterSubmitButton
disabled={ isLoading || isDisabled } className="wc-block-stock-filter__button"
onClick={ () => onSubmit( checked ) } disabled={ isLoading || isDisabled }
/> onClick={ () => onSubmit( checked ) }
) } />
</div> ) }
</div>
) }
</div> </div>
</> </>
); );

16
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss
View File

@ -9,7 +9,23 @@
} }
} }
.wc-block-stock-filter__title {
&.show-loading-state {
@include placeholder();
background-color: $gray-400 !important;
border-radius: em(26px);
box-shadow: none;
width: max-content;
}
}
.wc-block-stock-filter { .wc-block-stock-filter {
&.show-loading-state {
@include placeholder();
box-shadow: none;
border-radius: em(4px) !important;
}
margin-bottom: $gap-large; margin-bottom: $gap-large;
.wc-block-stock-filter-list { .wc-block-stock-filter-list {