[TextField | IndexFilters] Add support for autoSize TextField, and use in IndexFilters

.changeset/sweet-ears-watch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[TextField] Updated the TextField with new `autoSize` and `loading` props

polaris-react/locales/cs.json

@@ -158,7 +158,8 @@
       "clearLabel": "Vymazat {filterName}",
       "moreFiltersWithCount": "Další filtry ({count})",
       "addFilter": "Přidat filtr",
-      "clearFilters": "Vymazat vše"
+      "clearFilters": "Vymazat vše",
+      "searchInView": "v zobrazení: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "kód hlavní části",

polaris-react/locales/da.json

@@ -158,7 +158,8 @@
       "clearLabel": "Ryd {filterName}",
       "moreFiltersWithCount": "Flere filtre: ({count})",
       "addFilter": "Tilføj filter",
-      "clearFilters": "Ryd alt"
+      "clearFilters": "Ryd alt",
+      "searchInView": "i: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "body markup",

polaris-react/locales/de.json

@@ -158,7 +158,8 @@
       "clearLabel": "{filterName} löschen",
       "moreFiltersWithCount": "Weitere Filter ({count})",
       "addFilter": "Filter hinzufügen",
-      "clearFilters": "Alles löschen"
+      "clearFilters": "Alles löschen",
+      "searchInView": "in: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "Text-Markup",

polaris-react/locales/en.json

@@ -169,7 +169,8 @@
       "clear": "Clear",
       "clearLabel": "Clear {filterName}",
       "addFilter": "Add filter",
-      "clearFilters": "Clear all"
+      "clearFilters": "Clear all",
+      "searchInView": "in:{viewName}"
     },
     "FilterPill": {
       "clear": "Clear"

polaris-react/locales/es.json

@@ -158,7 +158,8 @@
       "clearLabel": "Borrar {filterName}",
       "moreFiltersWithCount": "Más filtros ({count})",
       "addFilter": "Agregar filtro",
-      "clearFilters": "Borrar todo"
+      "clearFilters": "Borrar todo",
+      "searchInView": "in:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "marcado body",

polaris-react/locales/fi.json

@@ -158,7 +158,8 @@
       "clearLabel": "Tyhjennä {filterName}",
       "moreFiltersWithCount": "Lisää suodattimia ({count})",
       "addFilter": "Lisää suodatin",
-      "clearFilters": "Tyhjennä kaikki"
+      "clearFilters": "Tyhjennä kaikki",
+      "searchInView": "kohde:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "tekstin merkintä",

polaris-react/locales/fr.json

@@ -158,7 +158,8 @@
       "clearLabel": "Effacer {filterName}",
       "moreFiltersWithCount": "Plus de filtres ({count})",
       "addFilter": "Ajouter un filtre",
-      "clearFilters": "Tout effacer"
+      "clearFilters": "Tout effacer",
+      "searchInView": "dans : {viewName}"
     },
     "Modal": {
       "iFrameTitle": "balisage du corps",

polaris-react/locales/it.json

@@ -158,7 +158,8 @@
       "clearLabel": "Rimuovi {filterName}",
       "moreFiltersWithCount": "Altri filtri ({count})",
       "addFilter": "Aggiungi filtro",
-      "clearFilters": "Cancella tutto"
+      "clearFilters": "Cancella tutto",
+      "searchInView": "in: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "markup del testo",

polaris-react/locales/ja.json

@@ -158,7 +158,8 @@
       "clearLabel": "{filterName}をクリアする",
       "moreFiltersWithCount": "詳細な絞り込み ({count})",
       "addFilter": "絞り込みを追加",
-      "clearFilters": "すべてクリア"
+      "clearFilters": "すべてクリア",
+      "searchInView": "{viewName}内"
     },
     "Modal": {
       "iFrameTitle": "body markup",

polaris-react/locales/ko.json

@@ -158,7 +158,8 @@
       "clearLabel": "{filterName} 지우기",
       "moreFiltersWithCount": "추가 필터({count}개)",
       "addFilter": "필터 추가",
-      "clearFilters": "모두 지우기"
+      "clearFilters": "모두 지우기",
+      "searchInView": "{viewName} 보기에서 검색 중"
     },
     "Modal": {
       "iFrameTitle": "본문 표시",

polaris-react/locales/nb.json

@@ -158,7 +158,8 @@
       "clearLabel": "Fjern {filterName}",
       "moreFiltersWithCount": "Flere filtre ({count})",
       "addFilter": "Legg til filter",
-      "clearFilters": "Fjern alle"
+      "clearFilters": "Fjern alle",
+      "searchInView": "i: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "brødtekstpåslag",

polaris-react/locales/nl.json

@@ -158,7 +158,8 @@
       "clearLabel": "{filterName} wissen",
       "moreFiltersWithCount": "Meer filters ({count})",
       "addFilter": "Filter toevoegen",
-      "clearFilters": "Alles wissen"
+      "clearFilters": "Alles wissen",
+      "searchInView": "in: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "opmaak hoofdtekst",

polaris-react/locales/pl.json

@@ -158,7 +158,8 @@
       "clearLabel": "Wyczyść {filterName}",
       "moreFiltersWithCount": "Więcej filtrów ({count})",
       "addFilter": "Dodaj filtr",
-      "clearFilters": "Wyczyść wszystko"
+      "clearFilters": "Wyczyść wszystko",
+      "searchInView": "w:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "znacznik treści",

polaris-react/locales/pt-BR.json

@@ -158,7 +158,8 @@
       "clearLabel": "Limpar {filterName}",
       "moreFiltersWithCount": "Mais filtros ({count})",
       "addFilter": "Adicionar filtro",
-      "clearFilters": "Limpar tudo"
+      "clearFilters": "Limpar tudo",
+      "searchInView": "in: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "marcação de corpo",

polaris-react/locales/pt-PT.json

@@ -158,7 +158,8 @@
       "clearLabel": "Limpar {filterName}",
       "moreFiltersWithCount": "Mais filtros ({count})",
       "addFilter": "Adicionar filtro",
-      "clearFilters": "Limpar tudo"
+      "clearFilters": "Limpar tudo",
+      "searchInView": "em:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "marcação de corpo",

polaris-react/locales/sv.json

@@ -158,7 +158,8 @@
       "clearLabel": "Rensa {filterName}",
       "moreFiltersWithCount": "Fler filter ({count})",
       "addFilter": "Lägg till filter",
-      "clearFilters": "Rensa alla"
+      "clearFilters": "Rensa alla",
+      "searchInView": "i:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "markering av brödtext",

polaris-react/locales/th.json

@@ -158,7 +158,8 @@
       "clearLabel": "ล้าง {filterName}",
       "moreFiltersWithCount": "ตัวกรองเพิ่มเติม ({count})",
       "addFilter": "เพิ่มตัวกรอง",
-      "clearFilters": "ล้างทั้งหมด"
+      "clearFilters": "ล้างทั้งหมด",
+      "searchInView": "ใน:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "มาร์กอัปเนื้อหา",

polaris-react/locales/tr.json

@@ -158,7 +158,8 @@
       "clearLabel": "{filterName} filtresini temizle",
       "moreFiltersWithCount": "Daha fazla filtre ({count})",
       "addFilter": "Filtre ekle",
-      "clearFilters": "Tümünü temizle"
+      "clearFilters": "Tümünü temizle",
+      "searchInView": "Şu görünümde: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "gövde işaretlemesi",

polaris-react/locales/vi.json

@@ -158,7 +158,8 @@
       "clear": "Xóa",
       "clearLabel": "Xóa {filterName}",
       "addFilter": "Thêm bộ lọc",
-      "clearFilters": "Xóa tất cả"
+      "clearFilters": "Xóa tất cả",
+      "searchInView": "in:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "điểm đánh dấu nội dung",

polaris-react/locales/zh-CN.json

@@ -158,7 +158,8 @@
       "clearLabel": "清除 {filterName}",
       "moreFiltersWithCount": "更多筛选条件（{count} 个）",
       "addFilter": "添加筛选条件",
-      "clearFilters": "全部清除"
+      "clearFilters": "全部清除",
+      "searchInView": "在:{viewName}"
     },
     "Modal": {
       "iFrameTitle": "正文标记",

polaris-react/locales/zh-TW.json

@@ -158,7 +158,8 @@
       "clearLabel": "清除 {filterName}",
       "moreFiltersWithCount": "更多篩選條件 ({count})",
       "addFilter": "新增篩選條件",
-      "clearFilters": "全部清除"
+      "clearFilters": "全部清除",
+      "searchInView": "in: {viewName}"
     },
     "Modal": {
       "iFrameTitle": "本文標記",

polaris-react/src/components/Filters/Filters.tsx

@@ -97,6 +97,8 @@ export interface FiltersProps {
   onAddFilterClick?: () => void;
   /** Whether the filter should close when clicking inside another Popover. */
   closeOnChildOverlayClick?: boolean;
+  /** The name of the currently selected view */
+  selectedViewName?: string;
 }
 
 export function Filters({
@@ -121,6 +123,7 @@ export function Filters({
   mountedState,
   onAddFilterClick,
   closeOnChildOverlayClick,
+  selectedViewName,
 }: FiltersProps) {
   const hideFilterBar = hideFilters || filters.length === 0;
   const queryFieldMarkup = hideQueryField ? null : (
@@ -156,6 +159,7 @@ export function Filters({
               disabled={disabled || disableQueryField}
               borderlessQueryField={borderlessQueryField}
               loading={loading}
+              selectedViewName={selectedViewName}
             />
           </div>
           {children}

polaris-react/src/components/Filters/components/SearchField/SearchField.tsx

@@ -1,12 +1,11 @@
 import React, {useId} from 'react';
 import {SearchIcon} from '@shopify/polaris-icons';
 
-import {Spinner} from '../../../Spinner';
 import {Icon} from '../../../Icon';
 import {TextField} from '../../../TextField';
+import {Text} from '../../../Text';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
-
-import styles from './SearchField.module.scss';
+import {useI18n} from '../../../../utilities/i18n';
 
 export interface SearchFieldProps {
   onChange: (value: string) => void;
@@ -20,6 +19,8 @@ export interface SearchFieldProps {
   borderlessQueryField?: boolean;
   /** Show a loading spinner to the right of the input */
   loading?: boolean;
+  /** If present, will show as a suffix in the text field when entering a search term */
+  selectedViewName?: string;
 }
 
 export function SearchField({
@@ -33,10 +34,21 @@ export function SearchField({
   disabled,
   borderlessQueryField,
   loading,
+  selectedViewName,
 }: SearchFieldProps) {
+  const i18n = useI18n();
   const id = useId();
   const {mdUp} = useBreakpoints();
 
+  const suffix =
+    value && selectedViewName && mdUp ? (
+      <Text as="span" variant="bodyMd" tone="subdued">
+        {i18n.translate('Polaris.Filters.searchInView', {
+          viewName: selectedViewName,
+        })}
+      </Text>
+    ) : null;
+
   function handleChange(value: string) {
     onChange(value);
   }
@@ -63,17 +75,13 @@ export function SearchField({
       variant={borderlessQueryField ? 'borderless' : 'inherit'}
       size="slim"
       prefix={mdUp ? <Icon source={SearchIcon} /> : undefined}
-      suffix={
-        loading ? (
-          <div className={styles.Spinner}>
-            <Spinner size="small" />
-          </div>
-        ) : null
-      }
+      suffix={suffix}
       focused={focused}
       label={placeholder}
       labelHidden
       clearButton
+      autoSize={mdUp}
+      loading={loading}
     />
   );
 }

polaris-react/src/components/Filters/components/SearchField/tests/SearchField.test.tsx

@@ -6,6 +6,21 @@ import {matchMedia} from '@shopify/jest-dom-mocks';
 import {SearchField} from '..';
 import {TextField} from '../../../../TextField';
 
+jest.mock('../../../../../utilities/breakpoints', () => ({
+  ...(jest.requireActual('../../../../../utilities/breakpoints') as any),
+  useBreakpoints: jest.fn(),
+}));
+
+function mockUseBreakpoints(mdUp: boolean) {
+  const useBreakpoints: jest.Mock = jest.requireMock(
+    '../../../../../utilities/breakpoints',
+  ).useBreakpoints;
+
+  useBreakpoints.mockReturnValue({
+    mdUp,
+  });
+}
+
 describe('SearchField', () => {
   const defaultProps: ComponentProps<typeof SearchField> = {
     onChange: jest.fn(),
@@ -16,6 +31,7 @@ describe('SearchField', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     matchMedia.mock();
+    mockUseBreakpoints(false);
   });
 
   afterEach(() => {
@@ -74,4 +90,31 @@ describe('SearchField', () => {
       placeholder: defaultProps.placeholder,
     });
   });
+
+  it('will add a suffix when there is a selectedViewName and value', () => {
+    mockUseBreakpoints(true);
+    const wrapper = mountWithApp(
+      <SearchField {...defaultProps} selectedViewName="All" />,
+    );
+
+    expect(wrapper).toContainReactText('in:All');
+  });
+
+  it('will not add a suffix when there is no selectedViewName', () => {
+    const wrapper = mountWithApp(<SearchField {...defaultProps} />);
+
+    expect(wrapper).not.toContainReactText('in:All');
+  });
+
+  it('will not add a suffix when there is no value', () => {
+    const wrapper = mountWithApp(
+      <SearchField
+        {...defaultProps}
+        value={undefined}
+        selectedViewName="All"
+      />,
+    );
+
+    expect(wrapper).not.toContainReactText('in:All');
+  });
 });

polaris-react/src/components/IndexFilters/IndexFilters.tsx

@@ -187,6 +187,8 @@ export function IndexFilters({
 
   const viewNames = tabs.map(({content}) => content);
 
+  const selectedViewName = viewNames[selected];
+
   const handleChangeSortButton = useCallback(
     (value: string[]) => {
       onSort?.(value);
@@ -459,6 +461,7 @@ export function IndexFilters({
                   mountedState={mdDown ? undefined : state}
                   borderlessQueryField
                   closeOnChildOverlayClick={closeOnChildOverlayClick}
+                  selectedViewName={selectedViewName}
                 >
                   <div className={styles.ButtonWrap}>
                     <InlineStack gap="200" align="start" blockAlign="center">