[LegacyFilters] Consolidate se23 styles and logic (#10217)

### WHY are these changes introduced? Fixes #9945 ### WHAT is this pull request doing? * Consolidate se23 logic and styles for the `LegacyFilters` Component ### How to 🎩 * Compare production and this PR's chromatic storybook to make sure styles are the same [Production](https://storybook.polaris.shopify.com/?path=/story/all-components-legacyfilters--with-a-resource-list&globals=polarisSummerEditions2023:true) [This PR](https://5d559397bae39100201eedc1-vzjpjlwiop.chromatic.com/?path=/story/all-components-legacyfilters--with-a-resource-list)
Shopify · Aug 25, 2023 · 3fef646 · 3fef646
1 parent dad09bd
commit 3fef646
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 111 deletions.
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -133,12 +133,8 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-4);
     width: calc(100% - var(--p-space-8));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-secondary-experimental);
     display: block;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
-    }
   }
 
   &::before {
@@ -158,12 +154,8 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-4);
     width: calc(100% - var(--p-space-8));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-secondary-experimental);
     display: block;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
-    }
   }
 
   &::before {
@@ -185,12 +177,8 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-4);
     width: calc(100% - var(--p-space-8));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-secondary-experimental);
     display: block;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
-    }
   }
 
   &::after {

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx
@@ -344,7 +344,7 @@ export function WithADataTable(_, context) {
   return (
     <div style={{height: '568px'}}>
       <Card padding="0">
-        <Box padding={context.globals.polarisSummerEditions2023 ? '4' : '5'}>
+        <Box padding="4">
           <LegacyFilters
             queryValue={queryValue}
             filters={filters}
@@ -411,7 +411,6 @@ export function WithADataTable(_, context) {
 export function WithChildrenContent() {
   const [taggedWith, setTaggedWith] = useState(null);
   const [queryValue, setQueryValue] = useState(null);
-  const {polarisSummerEditions2023} = useFeatures();
 
   const handleTaggedWithChange = useCallback(
     (value) => setTaggedWith(value),
@@ -470,12 +469,10 @@ export function WithChildrenContent() {
               onQueryClear={handleQueryValueRemove}
               onClearAll={handleClearAll}
             >
-              <div
-                style={polarisSummerEditions2023 ? {} : {paddingLeft: '8px'}}
-              >
+              <div>
                 <Button
                   onClick={() => console.log('New filter saved')}
-                  size={polarisSummerEditions2023 ? 'large' : 'medium'}
+                  size="large"
                 >
                   Save
                 </Button>
@@ -538,7 +535,6 @@ export function WithChildrenContent() {
 }
 
 export function Disabled() {
-  const {polarisSummerEditions2023} = useFeatures();
   const [taggedWith, setTaggedWith] = useState(null);
   const [queryValue, setQueryValue] = useState(null);
 
@@ -600,13 +596,11 @@ export function Disabled() {
               onClearAll={handleClearAll}
               disabled
             >
-              <div
-                style={polarisSummerEditions2023 ? {} : {paddingLeft: '8px'}}
-              >
+              <div>
                 <Button
                   disabled
                   onClick={() => console.log('New filter saved')}
-                  size={polarisSummerEditions2023 ? 'large' : 'medium'}
+                  size="large"
                 >
                   Save
                 </Button>
@@ -672,7 +666,6 @@ export function SomeDisabled() {
   const [taggedWith, setTaggedWith] = useState(null);
   const [vendor, setVendor] = useState(null);
   const [queryValue, setQueryValue] = useState(null);
-  const {polarisSummerEditions2023} = useFeatures();
 
   const handleTaggedWithChange = useCallback(
     (value) => setTaggedWith(value),
@@ -750,12 +743,10 @@ export function SomeDisabled() {
               onQueryClear={handleQueryValueRemove}
               onClearAll={handleClearAll}
             >
-              <div
-                style={polarisSummerEditions2023 ? {} : {paddingLeft: '8px'}}
-              >
+              <div>
                 <Button
                   disabled
-                  size={polarisSummerEditions2023 ? 'large' : 'medium'}
+                  size="large"
                   onClick={() => console.log('New filter saved')}
                 >
                   Save
@@ -821,7 +812,6 @@ export function SomeDisabled() {
 export function WithoutClearButton() {
   const [taggedWith, setTaggedWith] = useState(null);
   const [queryValue, setQueryValue] = useState(null);
-  const {polarisSummerEditions2023} = useFeatures();
 
   const handleTaggedWithChange = useCallback(
     (value) => setTaggedWith(value),
@@ -882,12 +872,10 @@ export function WithoutClearButton() {
               onQueryClear={handleQueryValueRemove}
               onClearAll={handleClearAll}
             >
-              <div
-                style={polarisSummerEditions2023 ? {} : {paddingLeft: '8px'}}
-              >
+              <div>
                 <Button
                   disabled
-                  size={polarisSummerEditions2023 ? 'large' : 'medium'}
+                  size="large"
                   onClick={() => console.log('New filter saved')}
                 >
                   Save

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx
@@ -27,7 +27,6 @@ import {Sheet} from '../Sheet';
 import {LegacyStack} from '../LegacyStack';
 import {Key} from '../../types';
 import {KeypressListener} from '../KeypressListener';
-import {UseFeatures} from '../../utilities/features';
 
 import {ConnectedFilterControl, TagsWrapper} from './components';
 import type {ConnectedFilterControlProps} from './components';
@@ -232,19 +231,11 @@ class LegacyFiltersInner extends Component<CombinedProps, State> {
         : i18n.translate('Polaris.Filters.moreFilters');
 
     const rightActionMarkup = filters.length ? (
-      <UseFeatures>
-        {({polarisSummerEditions2023}) => (
-          <div ref={this.moreFiltersButtonContainer}>
-            <Button
-              onClick={this.toggleFilters}
-              disabled={disabled}
-              size={polarisSummerEditions2023 ? 'large' : 'medium'}
-            >
-              {moreFiltersLabel}
-            </Button>
-          </div>
-        )}
-      </UseFeatures>
+      <div ref={this.moreFiltersButtonContainer}>
+        <Button onClick={this.toggleFilters} disabled={disabled} size="large">
+          {moreFiltersLabel}
+        </Button>
+      </div>
     ) : null;
 
     const filterResourceName = resourceName || {

diff --git a/...rc/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/...rc/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -20,13 +20,8 @@
 
   &.right {
     .CenterContainer * {
-      border-top-right-radius: var(--p-border-radius-1);
-      border-bottom-right-radius: var(--p-border-radius-1);
-
-      #{$se23} & {
-        border-top-right-radius: var(--p-border-radius-2);
-        border-bottom-right-radius: var(--p-border-radius-2);
-      }
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
   }
 }
@@ -80,71 +75,43 @@
   }
 
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-1);
-    border-bottom-left-radius: var(--p-border-radius-1);
-
-    #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
-    }
+    border-top-left-radius: var(--p-border-radius-2);
+    border-bottom-left-radius: var(--p-border-radius-2);
   }
 
   .Item:last-of-type > div > button {
-    #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
-    }
+    border-top-right-radius: var(--p-border-radius-2);
+    border-bottom-right-radius: var(--p-border-radius-2);
   }
 }
 
 .RightContainer.queryFieldHidden {
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-1);
-    border-bottom-left-radius: var(--p-border-radius-1);
-
-    #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
-    }
+    border-top-left-radius: var(--p-border-radius-2);
+    border-bottom-left-radius: var(--p-border-radius-2);
   }
 }
 
 .RightContainerWithoutMoreFilters {
   .Item:last-child > div > button {
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
-
-    #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
-    }
+    border-top-right-radius: var(--p-border-radius-2);
+    border-bottom-right-radius: var(--p-border-radius-2);
   }
 }
 
 .MoreFiltersButtonContainer {
-  #{$se23} & {
-    padding-left: var(--p-space-2);
-  }
+  padding-left: var(--p-space-2);
 
   .Item > div > button {
     white-space: nowrap;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
-    }
+    border-top-left-radius: var(--p-border-radius-2);
+    border-bottom-left-radius: var(--p-border-radius-2);
   }
 }
 
 .MoreFiltersButtonContainer.onlyButtonVisible {
   .Item > div > button {
-    border-radius: var(--p-border-radius-1);
-
-    #{$se23} & {
-      border-radius: var(--p-border-radius-2);
-    }
+    border-radius: var(--p-border-radius-2);
   }
 }
 

diff --git a/...src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.tsx b/...src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
@@ -7,7 +7,6 @@ import {Popover} from '../../../Popover';
 import {Button} from '../../../Button';
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../../../EventListener';
-import {UseFeatures} from '../../../../utilities/features';
 
 import {Item} from './components';
 import styles from './ConnectedFilterControl.scss';
@@ -228,19 +227,15 @@ export class ConnectedFilterControl extends Component<
   ): React.ReactElement {
     const id = options?.proxy ? undefined : `Activator-${action.key}`;
     return (
-      <UseFeatures>
-        {({polarisSummerEditions2023}) => (
-          <Button
-            onClick={action.onAction}
-            disclosure
-            disabled={this.props.disabled || action.disabled}
-            id={id}
-            size={polarisSummerEditions2023 ? 'large' : undefined}
-          >
-            {action.content}
-          </Button>
-        )}
-      </UseFeatures>
+      <Button
+        onClick={action.onAction}
+        disclosure
+        disabled={this.props.disabled || action.disabled}
+        id={id}
+        size="large"
+      >
+        {action.content}
+      </Button>
     );
   }