Skip to content

Commit c1e36bc

Browse files
authored
Filters remove unused disabled states and styles from FilterPill (Shopify#10228)
Fixes Shopify#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
1 parent 308a748 commit c1e36bc

File tree

3 files changed

+6
-11
lines changed

3 files changed

+6
-11
lines changed

.changeset/dull-pans-give.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
`Filters` Remove unused disabled states in `FilterPill`

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,6 @@
4040
background: var(--p-color-bg-subdued);
4141
}
4242

43-
&.disabledFilterButton {
44-
background: var(--p-color-bg-transparent-disabled-experimental);
45-
border-color: var(--p-color-border-disabled);
46-
color: var(--p-color-text-disabled);
47-
cursor: default;
48-
}
49-
5043
&.ActiveFilterButton {
5144
background: var(--p-color-bg);
5245
border-style: solid;

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export function FilterPill({
9494
selected && styles.ActiveFilterButton,
9595
popoverActive && styles.FocusFilterButton,
9696
focused && styles.focusedFilterButton,
97-
disabled && styles.disabledFilterButton,
9897
);
9998

10099
const clearButtonClassNames = classNames(
@@ -126,7 +125,6 @@ export function FilterPill({
126125
onClick={togglePopoverActive}
127126
className={toggleButtonClassNames}
128127
type="button"
129-
disabled={disabled}
130128
>
131129
<InlineStack wrap={false} align="center" blockAlign="center" gap="0">
132130
{selected ? (
@@ -148,7 +146,6 @@ export function FilterPill({
148146
className={clearButtonClassNames}
149147
type="button"
150148
aria-label={i18n.translate('Polaris.FilterPill.clear')}
151-
disabled={disabled}
152149
>
153150
<div className={styles.IconWrapper}>
154151
<Icon source={CancelSmallMinor} tone="base" />
@@ -179,7 +176,7 @@ export function FilterPill({
179176
return (
180177
<div ref={elementRef}>
181178
<Popover
182-
active={popoverActive && !disabled}
179+
active={popoverActive}
183180
activator={activator}
184181
key={filterKey}
185182
onClose={togglePopoverActive}

0 commit comments

Comments
 (0)