Skip to content

Commit

Permalink
Merge main into next
Browse files Browse the repository at this point in the history
  • Loading branch information
sophschneider committed Sep 19, 2023
2 parents db0cff4 + be6914d commit b06e187
Show file tree
Hide file tree
Showing 9 changed files with 942 additions and 14 deletions.
6 changes: 6 additions & 0 deletions .changeset/hip-gorillas-sparkle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': minor
'@shopify/polaris-tokens': minor
---

Updated semantic `color` tokens
5 changes: 5 additions & 0 deletions .changeset/three-trains-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': minor
---

Fixed a bug in `Filters` where changes to the `appliedFilters` prop were not being handled
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,8 @@ describe('<ActionList />', () => {
<ActionList
allowFiltering
items={[
{content: 'Item 1'},
{content: 'Item 2'},
{content: 'Item 3'},
{content: 'Item 4'},
{content: 'Item 5'},
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/ButtonGroup/ButtonGroup.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
position: relative;
margin-top: 0;
margin-left: 0;
line-height: normal;
line-height: 1;

&:not(:first-child) {
margin-left: calc(-1 * var(--p-space-025));
Expand Down
40 changes: 31 additions & 9 deletions polaris-react/src/components/Filters/Filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export function Filters({
const i18n = useI18n();
const {mdDown} = useBreakpoints();
const [popoverActive, setPopoverActive] = useState(false);
const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
const hasMounted = useRef(false);

useEffect(() => {
Expand All @@ -155,23 +156,44 @@ export function Filters({
const appliedFilterKeys = appliedFilters?.map(({key}) => key);

const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
({pinned, key}) => {
const isPinnedOrApplied =
Boolean(pinned) || appliedFilterKeys?.includes(key);
return isPinnedOrApplied;
},
);
const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
({pinned, key}) =>
(Boolean(pinned) || appliedFilterKeys?.includes(key)) &&
// Filters that are pinned in local state display at the end of our list
!localPinnedFilters.find((filterKey) => filterKey === key),
);

const pinnedFilters = localPinnedFilters
useEffect(() => {
const allAppliedFilterKeysInLocalPinnedFilters = appliedFilterKeys?.every(
(value) => localPinnedFilters.includes(value),
);

if (!allAppliedFilterKeysInLocalPinnedFilters) {
setLocalPinnedFilters((currentLocalPinnedFilters: string[]): string[] => {
const newPinnedFilters =
appliedFilterKeys?.filter(
(filterKey) =>
!currentLocalPinnedFilters.find(
(currentFilterKey) => currentFilterKey === filterKey,
),
) || [];

return [...currentLocalPinnedFilters, ...newPinnedFilters];
});
}
}, [appliedFilterKeys, localPinnedFilters]);

const pinnedFiltersFromLocalState = localPinnedFilters
.map((key) => filters.find((filter) => filter.key === key))
.reduce<FilterInterface[]>(
(acc, filter) => (filter ? [...acc, filter] : acc),
[],
);

const pinnedFilters = [
...pinnedFiltersFromPropsAndAppliedFilters,
...pinnedFiltersFromLocalState,
];

const onFilterClick =
({key, onAction}: FilterInterface) =>
() => {
Expand Down
27 changes: 27 additions & 0 deletions polaris-react/src/components/Filters/tests/Filters.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,33 @@ describe('<Filters />', () => {
});
});

it('correctly adds the applied filters when updated via props', () => {
const appliedFilters = [
{
...defaultProps.filters[2],
label: 'Value is Baz',
value: ['Baz'],
onRemove: jest.fn(),
},
];
const wrapper = mountWithApp(
<Filters {...defaultProps} appliedFilters={[]} />,
);

expect(wrapper).not.toContainReactComponent(FilterPill, {
selected: true,
});

wrapper.setProps({
appliedFilters,
});

expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
label: 'Value is Baz',
selected: true,
});
});

it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
const scrollSpy = jest.fn();
HTMLElement.prototype.scroll = scrollSpy;
Expand Down
Loading

0 comments on commit b06e187

Please sign in to comment.