[Filters] consolidate se23 logic and styles (#10178)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

Fixes #9934

<!--
  Context about the problem that’s being addressed.
-->

- consolidate se23 logic
- consolidate se23 styles

-
[Storybook](https://5d559397bae39100201eedc1-avqvvftkub.chromatic.com/?path=/story/all-components-filters--with-a-resource-list)
- [Prod
storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-filters--with-a-resource-list&globals=polarisSummerEditions2023:true)

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: gwyneplaine

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

@@ -86,9 +86,9 @@
 }
 
 .AddFilter {
-  background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  background: var(--p-color-bg);
+  border-radius: var(--p-border-radius-2);
+  border: var(--p-color-border) dashed var(--p-border-width-1);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   height: 28px;
   cursor: pointer;
@@ -114,22 +114,30 @@
 
   &:hover,
   &:focus {
-    background: var(--p-color-bg-hover);
+    background: transparent;
     border-color: var(--p-color-border-hover);
 
     path {
       fill: var(--p-color-icon-hover);
     }
   }
 
+  &:hover {
+    border-style: solid;
+  }
+
+  &:focus {
+    outline-offset: var(--p-border-width-2);
+  }
+
   &:active {
-    background: var(--p-color-bg-active);
+    background: var(--p-color-bg-secondary-experimental);
     border-color: var(--p-color-border-hover);
   }
 
   &[aria-disabled='true'] {
-    background: var(--p-color-bg-disabled);
-    border-color: var(--p-color-border-disabled);
+    background: var(--p-color-bg-transparent-disabled-experimental);
+    border-color: transparent;
     color: var(--p-color-text-disabled);
     cursor: default;
 
@@ -144,7 +152,7 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-2);
   }
 
   span {
@@ -162,34 +170,6 @@
       width: var(--p-space-4);
     }
   }
-
-  #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
-
-    &:hover {
-      background: transparent;
-      border-style: solid;
-    }
-
-    &:focus {
-      background: transparent;
-      outline-offset: var(--p-border-width-2);
-    }
-
-    &:active {
-      background: var(--p-color-bg-subdued);
-
-      #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
-      }
-    }
-
-    &::after {
-      border-radius: var(--p-border-radius-2);
-    }
-  }
 }
 
 @media #{$p-breakpoints-md-down} {
@@ -255,32 +235,22 @@
 }
 
 .ClearAll {
-  margin-left: var(--p-space-1);
+  margin-left: var(--p-space-2);
 
-  #{$se23} & {
-    margin-left: var(--p-space-2);
-
-    // stylelint-disable-next-line -- se23 overrides
-    span {
-      font-size: var(--p-font-size-75);
-      font-weight: var(--p-font-weight-medium);
-    }
+  span {
+    font-size: var(--p-font-size-75);
+    font-weight: var(--p-font-weight-medium);
   }
 }
 
 @media #{$p-breakpoints-md-down} {
   .ClearAll {
-    margin-left: var(--p-space-2);
+    margin-left: 0;
     padding-right: var(--p-space-4);
 
-    #{$se23} & {
-      margin-left: 0;
-
-      // stylelint-disable-next-line -- se23 overrides
-      span {
-        font-size: var(--p-font-size-100);
-        font-weight: var(--p-font-weight-medium);
-      }
+    span {
+      font-size: var(--p-font-size-100);
+      font-weight: var(--p-font-weight-medium);
     }
   }
 

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 hasMounted = useRef(false);
 
@@ -230,8 +228,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>
@@ -246,7 +243,7 @@ export function Filters({
           disableFilters
         }
       >
-        <Text variant={se23 ? se23LabelVariant : labelVariant} as="span">
+        <Text variant={labelVariant} as="span">
           {i18n.translate('Polaris.Filters.addFilter')}{' '}
         </Text>
         <PlusMinor />
@@ -272,39 +269,21 @@ 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: '2',
-        paddingBlockEnd: '2',
-      }
-    : {
-        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: '2',
+    paddingBlockEnd: '2',
+  };
 
   const queryFieldMarkup = hideQueryField ? null : (
     <div
-      className={classNames(styles.Container, se23 && styles.ContainerUplift)}
+      className={classNames(styles.Container, styles.ContainerUplift)}
     >
       <Box {...containerSpacing}>
         <InlineStack
@@ -415,7 +394,7 @@ export function Filters({
           size="micro"
           onClick={handleClearAllFilters}
           removeUnderline
-          variant="tertiary"
+          variant="monochromePlain"
         >
           {i18n.translate('Polaris.Filters.clearFilters')}
         </Button>

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

@@ -1,9 +1,9 @@
 @import '../../../../styles/common';
 
 .FilterButton {
-  background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  background: var(--p-color-bg);
+  border-radius: var(--p-border-radius-2);
+  border: var(--p-color-border) dashed var(--p-border-width-1);
   cursor: pointer;
   color: var(--p-color-text);
 
@@ -26,8 +26,22 @@
     }
   }
 
+  &:hover,
+  &:active {
+    border-style: solid;
+  }
+
+  &:hover,
+  &:focus {
+    background: transparent;
+  }
+
+  &:active {
+    background: var(--p-color-bg-subdued);
+  }
+
   &.disabledFilterButton {
-    background: var(--p-color-bg-disabled);
+    background: var(--p-color-bg-transparent-disabled-experimental);
     border-color: var(--p-color-border-disabled);
     color: var(--p-color-text-disabled);
     cursor: default;
@@ -36,58 +50,14 @@
   &.ActiveFilterButton {
     background: var(--p-color-bg);
     border-style: solid;
-  }
-
-  &::after {
-    border-radius: var(--p-border-radius-6);
-  }
-
-  #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
-
-    &:hover,
-    &:active {
-      border-style: solid;
-    }
-
-    &:hover,
-    &:focus {
-      background: transparent;
-    }
 
     &:active {
       background: var(--p-color-bg-subdued);
-
-      #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
-      }
-    }
-
-    &.disabledFilterButton {
-      background: var(--p-color-bg-disabled);
-      border-color: var(--p-color-border-disabled);
-      color: var(--p-color-text-disabled);
-      cursor: default;
-    }
-
-    &.ActiveFilterButton {
-      background: var(--p-color-bg);
-      border-style: solid;
-
-      &:active {
-        background: var(--p-color-bg-subdued);
-
-        #{$se23} & {
-          background: var(--p-color-bg-secondary-experimental);
-        }
-      }
     }
+  }
 
-    &::after {
-      border-radius: var(--p-border-radius-2);
-    }
+  &::after {
+    border-radius: var(--p-border-radius-2);
   }
 }
 
@@ -161,7 +131,7 @@
 }
 
 .ClearButtonWrapper {
-  #{$se23} & button {
+  button {
     min-height: 0;
     padding: 0;
     margin: 0;

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

@@ -1,7 +1,6 @@
 import React, {useState, useEffect, useRef, useCallback} from 'react';
 import {
   CancelSmallMinor,
-  CaretDownMinor,
   ChevronDownMinor,
 } from '@shopify/polaris-icons';
 
@@ -15,7 +14,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 +50,6 @@ export function FilterPill({
 }: FilterPillProps) {
   const i18n = useI18n();
   const {mdDown} = useBreakpoints();
-  const {polarisSummerEditions2023} = useFeatures();
 
   const elementRef = useRef<HTMLDivElement>(null);
   const {
@@ -120,16 +117,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>
@@ -153,14 +145,7 @@ export function FilterPill({
               <>
                 {wrappedLabel}
                 <div className={styles.IconWrapper}>
-                  <Icon
-                    source={
-                      polarisSummerEditions2023
-                        ? ChevronDownMinor
-                        : CaretDownMinor
-                    }
-                    tone="base"
-                  />
+                  <Icon source={ChevronDownMinor} tone="base" />
                 </div>
               </>
             )}