IFS Proto Side by Side: Includes filter separate above

Shopify · Oct 1, 2024 · 7a8c5ef · 7a8c5ef
1 parent 557a7f2
commit 7a8c5ef
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/polaris-react/src/components/Filters/Filters.module.css b/polaris-react/src/components/Filters/Filters.module.css
@@ -20,7 +20,7 @@
 }
 
 .FiltersInner {
-  max-width: 90%;
+  /* max-width: 90%; */
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -85,7 +85,6 @@
 }
 
 .AppliedFilters {
-  flex: 1;
   display: flex;
   align-items: center;
   gap: var(--p-space-100);

diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx
@@ -93,20 +93,12 @@ export function Filters({
       queryField={queryFieldMarkup}
       disableFilters={disableFilters}
       onAddFilterClick={onAddFilterClick}
+      hideQueryField={hideQueryField}
       closeOnChildOverlayClick={closeOnChildOverlayClick}
     >
       {children}
     </FiltersBar>
   );
 
-  return (
-    <div
-      className={classNames(
-        styles.Filters,
-        hideQueryField && styles.hideQueryField,
-      )}
-    >
-      {filtersMarkup}
-    </div>
-  );
+  return <div className={classNames(styles.Filters)}>{filtersMarkup}</div>;
 }
diff --git a/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx b/polaris-react/src/components/Filters/components/FiltersBar/FiltersBar.tsx
@@ -3,6 +3,7 @@ import React, {useState, useRef, useEffect} from 'react';
 import {PlusIcon} from '@shopify/polaris-icons';
 import type {TransitionStatus} from 'react-transition-group';
 
+import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
 import {useOnValueChange} from '../../../../utilities/use-on-value-change';
 import {Popover} from '../../../Popover';
@@ -49,6 +50,7 @@ export function FiltersBar({
   filters,
   appliedFilters,
   disabled,
+  hideQueryField,
   queryField,
   disableFilters,
   onAddFilterClick,
@@ -185,7 +187,7 @@ export function FiltersBar({
       hint
       vertical={false}
       scrollbarWidth="none"
-      className={styles.AppliedFilters}
+      className={classNames(styles.AppliedFilters)}
     >
       {pinnedFilters.map(({key: filterKey, ...pinnedFilter}) => {
         const appliedFilter = appliedFilters?.find(
@@ -240,23 +242,38 @@ export function FiltersBar({
     </div>
   ) : null;
 
+  const searchFieldMarkup = hideQueryField ? null : (
+    <div className={styles.SearchFieldWrapper}>{queryField}</div>
+  );
+
   const filterMarkup = (
     <div className={styles.FiltersInner} aria-live="polite">
       {pinnedFiltersMarkup}
       <div className={styles.FilterActionWrapper}>{addButton}</div>
     </div>
   );
 
+  const searchAndFilterMarkup = searchFieldMarkup ? (
+    <InlineStack wrap={false} align="start" blockAlign="center">
+      {searchFieldMarkup}
+      {filterMarkup}
+    </InlineStack>
+  ) : (
+    filterMarkup
+  );
+
   return (
-    <Box paddingInline="200" borderColor="border" borderBlockEndWidth="025">
+    <Box
+      paddingInlineStart={hideQueryField ? '0' : '200'}
+      paddingInlineEnd="200"
+      borderColor="border"
+      borderBlockEndWidth="025"
+    >
       <InlineGrid
-        columns={{xs: 1, md: children ? ['twoThirds', 'oneThird'] : 1}}
+        columns={{xs: 1, md: children ? ['threeQuarters', 'oneQuarter'] : 1}}
         alignItems="center"
       >
-        <InlineStack wrap={false} align="start" blockAlign="center">
-          <div className={styles.SearchFieldWrapper}>{queryField}</div>
-          {filterMarkup}
-        </InlineStack>
+        {searchAndFilterMarkup}
         {children}
       </InlineGrid>
     </Box>

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -12,6 +12,7 @@ import {useBreakpoints} from '../../utilities/breakpoints';
 import {useIsSticky} from './hooks';
 import {
   Container,
+  SearchField,
   SortButton,
   UpdateButtons,
   EditColumnsButton,
@@ -116,7 +117,6 @@ export function IndexFilters({
   isFlushWhenSticky = false,
   canCreateNewView = true,
   onCreateNewView,
-  hideQueryField,
   closeOnChildOverlayClick,
   showEditColumnsButton,
 }: IndexFiltersProps) {
@@ -310,6 +310,14 @@ export function IndexFilters({
                     {isLoading ? <Spinner size="small" /> : null}
                   </div>
                 )}
+                <SearchField
+                  value={queryValue}
+                  placeholder={queryPlaceholder}
+                  disabled={disabled || disableQueryField}
+                  onChange={handleQueryChange}
+                  onFocus={handleQueryFocus}
+                  onClear={handleQueryClear}
+                />
                 {editColumnsMarkup}
                 {sortMarkup}
                 {mode === IndexFiltersMode.EditingColumns
@@ -322,7 +330,7 @@ export function IndexFilters({
 
         <div ref={filteringRef}>
           <Filters
-            hideQueryField={hideQueryField}
+            hideQueryField
             queryValue={queryValue}
             queryPlaceholder={queryPlaceholder}
             disabled={disabled || disableQueryField}

diff --git a/polaris-react/src/components/InlineGrid/InlineGrid.tsx b/polaris-react/src/components/InlineGrid/InlineGrid.tsx
@@ -10,7 +10,12 @@ import type {ResponsiveValue, ResponsiveProp} from '../../utilities/css';
 
 import styles from './InlineGrid.module.css';
 
-type ColumnsAlias = 'oneThird' | 'oneHalf' | 'twoThirds';
+type ColumnsAlias =
+  | 'oneThird'
+  | 'oneHalf'
+  | 'twoThirds'
+  | 'oneQuarter'
+  | 'threeQuarters';
 type ColumnsType = number | string | ColumnsAlias[];
 type Columns = ResponsiveProp<ColumnsType>;
 type Gap = ResponsiveProp<SpaceScale>;
@@ -95,6 +100,10 @@ function getColumnValue(columns?: ColumnsType) {
           return 'minmax(0, 1fr)';
         case 'twoThirds':
           return 'minmax(0, 2fr)';
+        case 'oneQuarter':
+          return 'minmax(0, 1fr)';
+        case 'threeQuarters':
+          return 'minmax(0, 3fr)';
       }
     })
     .join(' ');