Filters remove unused disabled states and styles from FilterPill (#…

…10228)

Fixes #10227 

### WHAT is this pull request doing?

* Removes unused disabled states in `FilterPill.scss`
* Removes unused disabled states in `FilterPill.tsx`

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] 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

.changeset/dull-pans-give.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+`Filters` Remove unused disabled states in `FilterPill`

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

@@ -40,13 +40,6 @@
     background: var(--p-color-bg-subdued);
   }
 
-  &.disabledFilterButton {
-    background: var(--p-color-bg-transparent-disabled-experimental);
-    border-color: var(--p-color-border-disabled);
-    color: var(--p-color-text-disabled);
-    cursor: default;
-  }
-
   &.ActiveFilterButton {
     background: var(--p-color-bg);
     border-style: solid;

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

@@ -94,7 +94,6 @@ export function FilterPill({
     selected && styles.ActiveFilterButton,
     popoverActive && styles.FocusFilterButton,
     focused && styles.focusedFilterButton,
-    disabled && styles.disabledFilterButton,
   );
 
   const clearButtonClassNames = classNames(
@@ -126,7 +125,6 @@ export function FilterPill({
           onClick={togglePopoverActive}
           className={toggleButtonClassNames}
           type="button"
-          disabled={disabled}
         >
           <InlineStack wrap={false} align="center" blockAlign="center" gap="0">
             {selected ? (
@@ -148,7 +146,6 @@ export function FilterPill({
             className={clearButtonClassNames}
             type="button"
             aria-label={i18n.translate('Polaris.FilterPill.clear')}
-            disabled={disabled}
           >
             <div className={styles.IconWrapper}>
               <Icon source={CancelSmallMinor} tone="base" />
@@ -179,7 +176,7 @@ export function FilterPill({
   return (
     <div ref={elementRef}>
       <Popover
-        active={popoverActive && !disabled}
+        active={popoverActive}
         activator={activator}
         key={filterKey}
         onClose={togglePopoverActive}