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 ? (
-
- ) : (
-
- {children}
-
- );
-
- return buttonMarkup;
-}
diff --git a/polaris-react/src/components/IndexFilters/components/FilterButton/index.ts b/polaris-react/src/components/IndexFilters/components/FilterButton/index.ts
deleted file mode 100644
index a934688aba3..00000000000
--- a/polaris-react/src/components/IndexFilters/components/FilterButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {FilterButton} from './FilterButton';
diff --git a/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx b/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx
index 9ada17a484d..f4614d71e02 100644
--- a/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx
+++ b/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx
@@ -6,8 +6,7 @@ import {Icon} from '../../../Icon';
import {Tooltip} from '../../../Tooltip';
import {Text} from '../../../Text';
import {InlineStack} from '../../../InlineStack';
-import {FilterButton} from '../FilterButton';
-import {useFeatures} from '../../../../utilities/features';
+import {Button} from '../../../Button';
export interface SearchFilterButtonProps {
onClick: () => void;
@@ -28,8 +27,6 @@ export function SearchFilterButton({
hideFilters,
hideQueryField,
}: SearchFilterButtonProps) {
- const {polarisSummerEditions2023: se23} = useFeatures();
-
const iconMarkup = (
{hideQueryField ? null : }
@@ -37,18 +34,15 @@ export function SearchFilterButton({
);
- const childMarkup = !se23 ? iconMarkup : null;
-
const activator = (
-
- {childMarkup}
-
+ icon={iconMarkup}
+ accessibilityLabel={label}
+ />
);
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
index 77f7a032f8d..cdcabdbfb26 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
@@ -2,15 +2,13 @@ import React, {useState, useMemo} from 'react';
import {SortMinor} from '@shopify/polaris-icons';
import {useI18n} from '../../../../utilities/i18n';
-import {Icon} from '../../../Icon';
import {Popover} from '../../../Popover';
import {ChoiceList} from '../../../ChoiceList';
import type {ChoiceListProps} from '../../../ChoiceList';
import {Tooltip} from '../../../Tooltip';
import {Box} from '../../../Box';
import type {SortButtonChoice} from '../../types';
-import {FilterButton} from '../FilterButton';
-import {useFeatures} from '../../../../utilities/features';
+import {Button} from '../../../Button';
import {DirectionButton} from './components';
@@ -37,7 +35,6 @@ export function SortButton({
onChangeDirection,
}: SortButtonProps) {
const i18n = useI18n();
- const {polarisSummerEditions2023} = useFeatures();
const [active, setActive] = useState(false);
const [selectedValueKey, selectedDirection] = selected[0].split(' ');
@@ -97,25 +94,21 @@ export function SortButton({
return currentKey === selectedValueKey;
});
- const iconMarkup = polarisSummerEditions2023 ? SortMinor : undefined;
- const childMarkup = !polarisSummerEditions2023 ? (
-
- ) : null;
-
const sortButton = (
-
- {childMarkup}
-
+ accessibilityLabel={i18n.translate(
+ 'Polaris.IndexFilters.SortButton.ariaLabel',
+ )}
+ />
);
@@ -130,11 +123,10 @@ export function SortButton({
>
@@ -146,15 +138,10 @@ export function SortButton({
/>
{children}
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/tests/SortButton.test.tsx b/polaris-react/src/components/IndexFilters/components/SortButton/tests/SortButton.test.tsx
index c873b4d61b9..e10bb625d51 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/tests/SortButton.test.tsx
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/tests/SortButton.test.tsx
@@ -8,7 +8,7 @@ import type {SortButtonChoice} from '../../../types';
import {SortButton} from '..';
import type {SortButtonProps} from '../SortButton';
import {DirectionButton} from '../components';
-import {FilterButton} from '../..';
+import {Button} from '../../../../Button';
describe('SortButton', () => {
const choices: SortButtonChoice[] = [
@@ -63,7 +63,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
expect(wrapper).toContainReactComponent(Popover, {
@@ -71,7 +71,7 @@ describe('SortButton', () => {
});
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
expect(wrapper).toContainReactComponent(Popover, {
@@ -88,7 +88,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
wrapper.act(() => {
@@ -107,7 +107,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
expect(wrapper).toContainReactComponent(DirectionButton, {
@@ -125,7 +125,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
expect(wrapper).toContainReactComponent(DirectionButton, {
@@ -143,7 +143,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
wrapper.act(() => {
@@ -165,7 +165,7 @@ describe('SortButton', () => {
const wrapper = mountWithApp();
wrapper.act(() => {
- wrapper.find(FilterButton)!.trigger('onClick');
+ wrapper.find(Button)!.trigger('onClick');
});
wrapper.act(() => {
diff --git a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
index 7c208fb415f..2dde74ba1f5 100644
--- a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
+++ b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
@@ -8,7 +8,6 @@ import {FormLayout} from '../../../FormLayout';
import {InlineStack} from '../../../InlineStack';
import {Button} from '../../../Button';
import {focusFirstFocusableNode} from '../../../../utilities/focus';
-import {useFeatures} from '../../../../utilities/features';
import {useIsTouchDevice} from '../../../../utilities/use-is-touch-device';
import type {
IndexFiltersPrimaryAction,
@@ -40,7 +39,6 @@ export function UpdateButtons({
const [savedViewModalOpen, setSavedViewModalOpen] = useState(false);
const container = useRef(null);
const isTouchDevice = useIsTouchDevice();
- const {polarisSummerEditions2023: se23} = useFeatures();
useEffect(() => {
if (!container.current || isTouchDevice) return;
@@ -120,7 +118,7 @@ export function UpdateButtons({
}
return (
-
+
{cancelButtonMarkup}
{primaryAction.type === 'save-as' ? (