Filters consolidate se23 logic

Author: gwyneplaine

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

@@ -10,7 +10,6 @@ import {Text} from '../Text';
 import {UnstyledButton} from '../UnstyledButton';
 import {classNames} from '../../utilities/css';
 import {useBreakpoints} from '../../utilities/breakpoints';
-import {useFeatures} from '../../utilities/features';
 import type {
   ActionListItemDescriptor,
   AppliedFilterInterface,
@@ -139,7 +138,6 @@ export function Filters({
 }: FiltersProps) {
   const i18n = useI18n();
   const {mdDown} = useBreakpoints();
-  const {polarisSummerEditions2023: se23} = useFeatures();
   const [popoverActive, setPopoverActive] = useState(false);
   const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
   const hasMounted = useRef(false);
@@ -231,8 +229,7 @@ export function Filters({
 
   const hasOneOrMorePinnedFilters = pinnedFilters.length >= 1;
 
-  const se23LabelVariant = mdDown && se23 ? 'bodyLg' : 'bodySm';
-  const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
+  const labelVariant = mdDown ? 'bodyLg' : 'bodySm';
 
   const addFilterActivator = (
     <div>
@@ -247,7 +244,7 @@ export function Filters({
           disableFilters
         }
       >
-        <Text variant={se23 ? se23LabelVariant : labelVariant} as="span">
+        <Text variant={labelVariant} as="span">
           {i18n.translate('Polaris.Filters.addFilter')}{' '}
         </Text>
         <PlusMinor />
@@ -273,35 +270,17 @@ export function Filters({
     );
   }, [loading, children]);
 
-  const containerSpacing:
-    | {
-        paddingBlockStart: BoxProps['paddingBlockStart'];
-        paddingBlockEnd: BoxProps['paddingBlockEnd'];
-        paddingInlineStart: BoxProps['paddingInlineStart'];
-        paddingInlineEnd: BoxProps['paddingInlineEnd'];
-      }
-    | {padding: BoxProps['padding']} = se23
-    ? {
-        paddingInlineStart: '2',
-        paddingInlineEnd: '2',
-        paddingBlockStart: '1_5-experimental',
-        paddingBlockEnd: '1_5-experimental',
-      }
-    : {
-        paddingBlockStart: {
-          xs: '3',
-          md: '2',
-        },
-        paddingBlockEnd: {
-          xs: '3',
-          md: '2',
-        },
-        paddingInlineStart: '2',
-        paddingInlineEnd: {
-          xs: '4',
-          md: '3',
-        },
-      };
+  const containerSpacing: {
+    paddingBlockStart: BoxProps['paddingBlockStart'];
+    paddingBlockEnd: BoxProps['paddingBlockEnd'];
+    paddingInlineStart: BoxProps['paddingInlineStart'];
+    paddingInlineEnd: BoxProps['paddingInlineEnd'];
+  } = {
+    paddingInlineStart: '2',
+    paddingInlineEnd: '2',
+    paddingBlockStart: '1_5-experimental',
+    paddingBlockEnd: '1_5-experimental',
+  };
 
   const queryFieldMarkup = hideQueryField ? null : (
     <div className={styles.Container}>

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

@@ -1,9 +1,5 @@
 import React, {useState, useEffect, useRef} from 'react';
-import {
-  CancelSmallMinor,
-  CaretDownMinor,
-  ChevronDownMinor,
-} from '@shopify/polaris-icons';
+import {CancelSmallMinor, ChevronDownMinor} from '@shopify/polaris-icons';
 
 import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
@@ -15,7 +11,6 @@ import {Text} from '../../../Text';
 import {InlineStack} from '../../../InlineStack';
 import {UnstyledButton} from '../../../UnstyledButton';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
-import {useFeatures} from '../../../../utilities/features';
 import {classNames} from '../../../../utilities/css';
 import type {FilterInterface} from '../../../../types';
 
@@ -52,7 +47,6 @@ export function FilterPill({
 }: FilterPillProps) {
   const i18n = useI18n();
   const {mdDown} = useBreakpoints();
-  const {polarisSummerEditions2023} = useFeatures();
 
   const elementRef = useRef<HTMLDivElement>(null);
   const {
@@ -113,16 +107,11 @@ export function FilterPill({
     styles.ToggleButton,
   );
 
-  const se23LabelVariant =
-    mdDown && polarisSummerEditions2023 ? 'bodyLg' : 'bodySm';
-  const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
+  const labelVariant = mdDown ? 'bodyLg' : 'bodySm';
 
   const wrappedLabel = (
     <div className={styles.Label}>
-      <Text
-        variant={polarisSummerEditions2023 ? se23LabelVariant : labelVariant}
-        as="span"
-      >
+      <Text variant={labelVariant} as="span">
         {label}
       </Text>
     </div>
@@ -146,14 +135,7 @@ export function FilterPill({
               <>
                 {wrappedLabel}
                 <div className={styles.IconWrapper}>
-                  <Icon
-                    source={
-                      polarisSummerEditions2023
-                        ? ChevronDownMinor
-                        : CaretDownMinor
-                    }
-                    color="base"
-                  />
+                  <Icon source={ChevronDownMinor} color="base" />
                 </div>
               </>
             )}

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

@@ -53,9 +53,7 @@ describe('<Filters />', () => {
 
     it('renders with bodyLg variant when on a small screen', () => {
       mockUseBreakpoints(true);
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {
-        features: {polarisSummerEditions2023: true},
-      });
+      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {});
       expect(wrapper).toContainReactComponent(Text, {
         variant: 'bodyLg',
         children: defaultProps.label,
@@ -85,18 +83,17 @@ describe('<Filters />', () => {
     });
 
     it('when not selected, renders a chevron icon', () => {
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {
-        features: {polarisSummerEditions2023: true},
-      });
+      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {});
       expect(wrapper.findAll(UnstyledButton)[0]).toContainReactComponent(Icon, {
         source: ChevronDownMinor,
       });
     });
 
     it('when selected, does not render a chevron icon', () => {
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} selected />, {
-        features: {polarisSummerEditions2023: true},
-      });
+      const wrapper = mountWithApp(
+        <FilterPill {...defaultProps} selected />,
+        {},
+      );
       expect(wrapper.findAll(UnstyledButton)[0]).not.toContainReactComponent(
         Icon,
         {
@@ -200,42 +197,6 @@ describe('<Filters />', () => {
       });
     });
   });
-
-  // se23 - small screen bodyMd text replaced with bodyLg
-  // CaretDownMinor replaced with ChevronDownMinor
-  describe('polarisSummerEditions2023 false', () => {
-    it('renders with bodyMd variant when on a small screen', () => {
-      mockUseBreakpoints(true);
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {
-        features: {polarisSummerEditions2023: false},
-      });
-      expect(wrapper).toContainReactComponent(Text, {
-        variant: 'bodyMd',
-        children: defaultProps.label,
-      });
-    });
-
-    it('when not selected, renders a caret icon', () => {
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} />, {
-        features: {polarisSummerEditions2023: false},
-      });
-      expect(wrapper.findAll(UnstyledButton)[0]).toContainReactComponent(Icon, {
-        source: CaretDownMinor,
-      });
-    });
-
-    it('when selected, does not render a caret icon', () => {
-      const wrapper = mountWithApp(<FilterPill {...defaultProps} selected />, {
-        features: {polarisSummerEditions2023: false},
-      });
-      expect(wrapper.findAll(UnstyledButton)[0]).not.toContainReactComponent(
-        Icon,
-        {
-          source: CaretDownMinor,
-        },
-      );
-    });
-  });
 });
 
 function mockUseBreakpoints(mdDown: boolean) {

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

@@ -3,11 +3,9 @@ import {CircleCancelMinor} from '@shopify/polaris-icons';
 
 import {Text} from '../../../Text';
 import {classNames} from '../../../../utilities/css';
-import {useFeatures} from '../../../../utilities/features';
 import {Icon} from '../../../Icon';
 import {useI18n} from '../../../../utilities/i18n';
 import {UnstyledButton} from '../../../UnstyledButton';
-import {TextField} from '../../../TextField';
 
 import styles from './SearchField.scss';
 
@@ -36,7 +34,6 @@ export function SearchField({
 }: SearchFieldProps) {
   const i18n = useI18n();
   const id = useId();
-  const {polarisSummerEditions2023} = useFeatures();
   const inputRef = useRef<HTMLInputElement>(null);
   function handleChange(value: string) {
     onChange(value);
@@ -54,7 +51,7 @@ export function SearchField({
     }
   }
 
-  return polarisSummerEditions2023 ? (
+  return (
     <div className={styles.SearchField}>
       <label className={styles.Label} htmlFor={id}>
         {placeholder}
@@ -91,21 +88,5 @@ export function SearchField({
         </UnstyledButton>
       )}
     </div>
-  ) : (
-    <TextField
-      value={value}
-      onChange={handleChange}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      label={placeholder}
-      labelHidden
-      autoComplete="off"
-      focused={focused}
-      placeholder={placeholder}
-      clearButton
-      onClearButtonClick={handleClear}
-      disabled={disabled}
-      variant={borderlessQueryField ? 'borderless' : undefined}
-    />
   );
 }

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

@@ -19,11 +19,7 @@ describe('SearchField', () => {
   it('will call onChange when changed', () => {
     const props = {...defaultProps};
     const spy = jest.fn();
-    const wrapper = mountWithApp(<SearchField {...props} onChange={spy} />, {
-      features: {
-        polarisSummerEditions2023: true,
-      },
-    });
+    const wrapper = mountWithApp(<SearchField {...props} onChange={spy} />, {});
 
     wrapper.act(() => {
       wrapper.find('input')!.trigger('onChange');
@@ -34,11 +30,7 @@ describe('SearchField', () => {
 
   it('will call onChange correctly when clear button clicked', () => {
     const props = {...defaultProps};
-    const wrapper = mountWithApp(<SearchField {...props} />, {
-      features: {
-        polarisSummerEditions2023: true,
-      },
-    });
+    const wrapper = mountWithApp(<SearchField {...props} />, {});
 
     wrapper.act(() => {
       wrapper.findAll(UnstyledButton)[0]?.trigger('onClick');