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

Update Active Filters "remove filter" icon to use Icon component #7035

Merged
merged 2 commits into from
Sep 9, 2022
Merged

Update Active Filters "remove filter" icon to use Icon component #7035

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
1ab83d5
Update "remove filter" icon to use Icon component.
danielwrobert Aug 31, 2022
47ef7ec
Add proper margin to active filters by price list.
danielwrobert Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions assets/js/blocks/active-filters/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -151,18 +155,26 @@
}

.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;
padding: 0;
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 {
Expand Down
39 changes: 6 additions & 33 deletions assets/js/blocks/active-filters/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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"
/>
<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>
<Icon
className="wc-block-components-chip__remove-icon"
icon={ closeSmall }
size={ 16 }
/>
<Label screenReaderLabel={ removeText } />
</button>
{ prefixedName }
Expand Down