diff --git a/.changeset/wild-dodos-refuse.md b/.changeset/wild-dodos-refuse.md new file mode 100644 index 00000000000..c8c67c5ece6 --- /dev/null +++ b/.changeset/wild-dodos-refuse.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +`IndexFilter` remove custom `FilterButton` in favor of directly invoking the Polaris `Button` component. diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss index ec463c7c66b..9d9b14e0efe 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.scss +++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss @@ -30,14 +30,10 @@ $spinner-size: 20px; .TabsWrapper { flex: 1; - height: var(--p-space-12); + height: 44px; - #{$se23} & { - height: 44px; - - @media #{$p-breakpoints-md-down} { - height: var(--p-space-12); - } + @media #{$p-breakpoints-md-down} { + height: var(--p-space-12); } } @@ -45,7 +41,6 @@ $spinner-size: 20px; overflow: hidden; padding: var(--p-space-1) var(--p-space-0) var(--p-space-2) var(--p-space-3); padding: 0; - height: auto; &.TabsWrapperLoading { position: relative; @@ -90,11 +85,12 @@ $spinner-size: 20px; gap: var(--p-space-2); align-items: center; justify-content: flex-start; - padding: var(--p-space-2) var(--p-space-3) var(--p-space-2) 0; + padding: var(--p-space-1_5-experimental) var(--p-space-2); @media #{$p-breakpoints-md-down} { position: relative; padding: var(--p-space-3) var(--p-space-4); + height: 3rem; border-left: var(--p-border-width-1) solid var(--p-color-border-subdued); gap: var(--p-space-2); @@ -115,14 +111,6 @@ $spinner-size: 20px; // stylelint-enable } } - - #{$se23} & { - padding: var(--p-space-1_5-experimental) var(--p-space-2); - - @media #{$p-breakpoints-md-down} { - height: 3rem; - } - } } .ActionWrap svg { diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx index f66a22e9030..4766a1df6d8 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx @@ -13,7 +13,6 @@ import type {FiltersProps} from '../Filters'; import {Tabs} from '../Tabs'; import type {TabsProps} from '../Tabs'; import {useBreakpoints} from '../../utilities/breakpoints'; -import {useFeatures} from '../../utilities/features'; import {useIsSticky} from './hooks'; import { @@ -145,7 +144,6 @@ export function IndexFilters({ setFalse: setFiltersUnFocused, setTrue: setFiltersFocused, } = useToggle(mode === IndexFiltersMode.Filtering); - const {polarisSummerEditions2023} = useFeatures(); const handleModeChange = (newMode: IndexFiltersMode) => { if (newMode === IndexFiltersMode.Filtering) { @@ -438,11 +436,7 @@ export function IndexFilters({ closeOnChildOverlayClick={closeOnChildOverlayClick} >
- +
void; - label: string; - icon?: ButtonProps['icon']; - disabled?: boolean; - children?: React.ReactNode; -} - -export function FilterButton({ - onClick, - label, - icon, - disabled, - children, -}: FilterButtonProps) { - const {polarisSummerEditions2023: se23} = useFeatures(); - - const classes = classNames(styles.FilterButton, disabled && styles.Disabled); - - const buttonMarkup = se23 ? ( -