Skip to content

Commit

Permalink
[IndexFilters] Prototype search beside filters on one line
Browse files Browse the repository at this point in the history
  • Loading branch information
@chloerice
chloerice committed Sep 27, 2024
1 parent 653c46b commit 34edac9
Show file tree
Hide file tree
Showing 23 changed files with 420 additions and 678 deletions.
51 changes: 20 additions & 31 deletions polaris-react/playground/OrdersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,7 @@ function OrdersIndexTableWithFilters(
'order desc',
]);

const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Default);
const {mode, setMode} = useSetIndexFiltersMode();

const preProcessText = (input: string) => {
// Insert a space between numbers and letters if they are adjacent
Expand Down Expand Up @@ -555,24 +555,6 @@ function OrdersIndexTableWithFilters(
fulfillmentStatusSet,
);

// if (
// matchesQueryValue &&
// matchesPaymentStatus &&
// matchesFulfillmentStatus &&
// matchesStatus
// ) {
// console.log(
// `
// nextFilters: `,
// nextFilters,
// `
// matchesQueryValue: ${matchesQueryValue},
// matchesPaymentStatus: ${matchesPaymentStatus},
// matchesFulfillmentStatus: ${matchesFulfillmentStatus},
// matchesStatus: ${matchesStatus}
// `,
// );
// }
setLoading(false);
return (
matchesQueryValue &&
Expand Down Expand Up @@ -764,12 +746,6 @@ function OrdersIndexTableWithFilters(
// ---- Filters

const filters: FilterInterface[] = [
{
key: 'queryValue',
label: handlers.queryValue.label,
hidden: true,
filter: null,
},
{
key: 'paymentStatus',
value: paymentStatus,
Expand Down Expand Up @@ -833,7 +809,6 @@ function OrdersIndexTableWithFilters(
const appliedFilters: AppliedFilterInterface[] = [];

Object.entries({
queryValue,
status,
paymentStatus,
fulfillmentStatus,
Expand Down Expand Up @@ -873,16 +848,32 @@ function OrdersIndexTableWithFilters(
}
};

const appliedFiltersWithQuery = [
...appliedFilters,
{
key: 'queryValue',
value: queryValue,
unsavedChanges:
queryValue && selectedView === 0
? true
: queryValue &&
queryValue !==
savedViewFilters[selectedView]?.find(
({key}) => key === 'queryValue',
)?.value,
},
];

const hasUnsavedSortChange =
(selectedView === 0 && sortSelected[0] !== 'order desc') ||
sortSelected[0] !== savedSortSelected[selectedView];

const hasUnsavedFilterChange =
(selectedView === 0 && appliedFilters.length > 0) ||
(selectedView === 0 && appliedFiltersWithQuery.length > 0) ||
(!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
(appliedFilters.length === 0 &&
(appliedFiltersWithQuery.length === 0 &&
savedViewFilters[selectedView]?.length > 0) ||
!appliedFilters.every(appliedFilterMatchesSavedFilter);
!appliedFiltersWithQuery.every(appliedFilterMatchesSavedFilter);

const hasUnsavedChanges = hasUnsavedSortChange || hasUnsavedFilterChange;

Expand Down Expand Up @@ -914,7 +905,6 @@ function OrdersIndexTableWithFilters(
}

setQueryValue('');
setMode(IndexFiltersMode.Default);
setSelectedView(view);
setLoading(true);
handleResetToSavedFilters(view);
Expand Down Expand Up @@ -1032,7 +1022,6 @@ function OrdersIndexTableWithFilters(
};

const handleSaveViewAs = async (index: number, name: string) => {
setMode(IndexFiltersMode.Default);
setViewNames((names) => [...names, name]);
setSelectedView(index);
const nextFilters = getFiltersToSave();
Expand Down
100 changes: 66 additions & 34 deletions polaris-react/src/components/Filters/Filters.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,58 +19,90 @@
flex: 1;
}

.FiltersWrapper {
border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
height: 53px;
overflow: hidden;
.FiltersInner {
max-width: 90%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
padding-inline: var(--p-space-100);

@media (--p-breakpoints-sm-down) {
background: var(--p-color-bg-surface);
> :first-child {
padding-left: var(--p-space-100);
}
}

@media (--p-breakpoints-md-up) {
height: auto;
overflow: visible;
.hideQueryField .FiltersInner {
flex: 1;
padding: var(--p-space-300);
}

.SearchFieldWrapper {
position: relative;
padding: var(--p-space-150) var(--p-space-100) var(--p-space-150) 0;

&::after {
content: '';
z-index: var(--p-z-index-1);
position: absolute;
top: 0;
right: calc(-1 * var(--p-space-300));
width: var(--p-width-200);
height: 100%;
pointer-events: none;
/* stylelint-disable-next-line polaris/color/function-disallowed-list -- Overflow shadow for applied filters */
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--p-color-bg-surface)
);
}
}

.hideQueryField .FiltersWrapper {
.FilterActionWrapper {
position: relative;
display: flex;
align-items: center;
}
gap: var(--p-space-100);

.FiltersInner {
overflow: auto;
white-space: nowrap;
padding: var(--p-space-300) var(--p-space-200) var(--p-space-500);
&::before {
content: '';
z-index: var(--p-z-index-1);
position: absolute;
top: 0;
left: calc(-1 * var(--p-space-200));
width: var(--p-width-200);
height: 100%;
pointer-events: none;
/* stylelint-disable-next-line polaris/color/function-disallowed-list -- Overflow shadow for applied filters */
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--p-color-bg-surface)
);
}
}

.hideQueryField .FiltersInner {
.AppliedFilters {
flex: 1;
padding: var(--p-space-300);
}

@media (--p-breakpoints-md-up) {
.FiltersInner {
overflow: visible;
flex-wrap: wrap;
gap: var(--p-space-200);
/* stylelint-disable-next-line -- No 6px space token */
padding: 0.375rem var(--p-space-200);
}
display: flex;
align-items: center;
gap: var(--p-space-100);
flex-wrap: nowrap;
min-height: 40px;

.hideQueryField .FiltersInner {
flex: 1;
/* stylelint-disable-next-line -- No 6px space token */
padding: 0.375rem var(--p-space-200);
> :last-child {
margin-right: var(--p-space-100);
}
}

.AddFilter {
background: var(--p-color-bg-surface);
border-radius: var(--p-border-radius-200);
border: var(--p-color-border) dashed var(--p-border-width-025);
padding: 0 var(--p-space-200) 0 var(--p-space-300);
padding: 0 var(--p-space-300) 0 var(--p-space-200);
margin-left: var(--p-space-100);
height: 28px;
cursor: pointer;
display: flex;
Expand All @@ -86,8 +118,7 @@

@media (--p-breakpoints-md-up) {
height: 24px;
/* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
padding: 0 0.375rem 0 var(--p-space-200);
padding: 0 var(--p-space-200) 0 var(--p-space-100);
}

&:hover,
Expand Down Expand Up @@ -201,6 +232,7 @@

.FiltersStickyArea {
position: relative;
width: 100%;
display: flex;
gap: var(--p-space-100);
flex-wrap: nowrap;
Expand Down
Loading

0 comments on commit 34edac9

Please sign in to comment.