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

Update Active Filters "remove filter" icon to use Icon component (https://github.com/woocommerce/woocommerce-blocks/pull/7035) 

* Update "remove filter" icon to use Icon component.

To be consistent with the button icon used on the Chips view, this
replaces the native svg element used in the List view with the same
Icon component from core.

* Add proper margin to active filters by price list.

There is currently no top margin when the active filters contain a price
filter in the list view. This is because the filters only contain a
range and do not render a child list.

This update will target that price filter item and add a top margin that
is consistent with the other active filters.
This commit is contained in:
Daniel W. Robert 2022-09-09 11:06:42 -04:00 committed by GitHub
parent 05630a0352
commit 32bebd381e
2 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
View File

@ -127,6 +127,10 @@
max-width: 200px;
}
}
> .wc-block-active-filters__list-item .wc-block-active-filters__list-item-name {
margin: 9px 0 0;
}
}
.wc-block-active-filters__list-item-type {
@ -151,9 +155,12 @@
}
.wc-block-active-filters__list-item-remove {
background: transparent;
@include font-size(smaller);
background: $gray-200;
border: 0;
border-radius: 25px;
appearance: none;
padding: 0;
height: 16px;
width: 16px;
line-height: 16px;
@ -161,8 +168,13 @@
margin: 0 0.5em 0 0;
color: currentColor;
&:hover {
color: $gray-600;
&:hover,
&:focus {
background: $gray-600;
.wc-block-components-chip__remove-icon {
fill: #fff;
}
}
&:disabled {

37
plugins/woocommerce-blocks/assets/js/blocks/active-filters/utils.tsx
View File

@ -7,6 +7,7 @@ import { RemovableChip } from '@woocommerce/base-components/chip';
import Label from '@woocommerce/base-components/label';
import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
import { changeUrl } from '@woocommerce/utils';
import { Icon, closeSmall } from '@wordpress/icons';
/**
* Format a min/max price range to display.
@ -108,39 +109,11 @@ export const renderRemovableListItem = ( {
className="wc-block-active-filters__list-item-remove"
onClick={ removeCallback }
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="8"
cy="8"
rx="8"
ry="8"
transform="rotate(-180 8 8)"
fill="currentColor"
fillOpacity="0.7"
<Icon
className="wc-block-components-chip__remove-icon"
icon={ closeSmall }
size={ 16 }
/>
<rect
x="10.636"
y="3.94983"
width="2"
height="9.9466"
transform="rotate(45 10.636 3.94983)"
fill="white"
/>
<rect
x="12.0503"
y="11.0209"
width="2"
height="9.9466"
transform="rotate(135 12.0503 11.0209)"
fill="white"
/>
</svg>
<Label screenReaderLabel={ removeText } />
</button>
{ prefixedName }