IndexFilters replace custom FilterButton with polaris Button invoca…

…tion
Shopify · Aug 28, 2023 · 55a984c · 55a984c
1 parent 3c9da97
commit 55a984c
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 45 deletions.
diff --git a/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.tsx b/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.tsx
diff --git a/polaris-react/src/components/IndexFilters/components/FilterButton/index.ts b/polaris-react/src/components/IndexFilters/components/FilterButton/index.ts
diff --git a/...is-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx b/...is-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx
@@ -6,7 +6,7 @@ import {Icon} from '../../../Icon';
 import {Tooltip} from '../../../Tooltip';
 import {Text} from '../../../Text';
 import {InlineStack} from '../../../InlineStack';
-import {FilterButton} from '../FilterButton';
+import {Button} from '../../../Button';
 
 export interface SearchFilterButtonProps {
   onClick: () => void;
@@ -36,11 +36,12 @@ export function SearchFilterButton({
 
   const activator = (
     <div style={style}>
-      <FilterButton
+      <Button
+        size="slim"
         onClick={onClick}
-        label={label}
         disabled={disabled}
         icon={iconMarkup}
+        accessibilityLabel={label}
       />
     </div>
   );

diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
@@ -8,7 +8,7 @@ import type {ChoiceListProps} from '../../../ChoiceList';
 import {Tooltip} from '../../../Tooltip';
 import {Box} from '../../../Box';
 import type {SortButtonChoice} from '../../types';
-import {FilterButton} from '../FilterButton';
+import {Button} from '../../../Button';
 
 import {DirectionButton} from './components';
 
@@ -100,11 +100,14 @@ export function SortButton({
       preferredPosition="above"
       hoverDelay={400}
     >
-      <FilterButton
+      <Button
+        size="slim"
         icon={SortMinor}
         onClick={handleClick}
-        label={i18n.translate('Polaris.IndexFilters.SortButton.ariaLabel')}
         disabled={disabled}
+        accessibilityLabel={i18n.translate(
+          'Polaris.IndexFilters.SortButton.ariaLabel',
+        )}
       />
     </Tooltip>
   );

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
@@ -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,15 +63,15 @@ describe('SortButton', () => {
     const wrapper = mountWithApp(<SortButton {...props} />);
 
     wrapper.act(() => {
-      wrapper.find(FilterButton)!.trigger('onClick');
+      wrapper.find(Button)!.trigger('onClick');
     });
 
     expect(wrapper).toContainReactComponent(Popover, {
       active: true,
     });
 
     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(<SortButton {...props} />);
 
     wrapper.act(() => {
-      wrapper.find(FilterButton)!.trigger('onClick');
+      wrapper.find(Button)!.trigger('onClick');
     });
 
     wrapper.act(() => {
@@ -107,7 +107,7 @@ describe('SortButton', () => {
     const wrapper = mountWithApp(<SortButton {...props} />);
 
     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(<SortButton {...props} />);
 
     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(<SortButton {...props} />);
 
     wrapper.act(() => {
-      wrapper.find(FilterButton)!.trigger('onClick');
+      wrapper.find(Button)!.trigger('onClick');
     });
 
     wrapper.act(() => {
@@ -165,7 +165,7 @@ describe('SortButton', () => {
     const wrapper = mountWithApp(<SortButton {...props} />);
 
     wrapper.act(() => {
-      wrapper.find(FilterButton)!.trigger('onClick');
+      wrapper.find(Button)!.trigger('onClick');
     });
 
     wrapper.act(() => {

diff --git a/polaris-react/src/components/IndexFilters/components/index.ts b/polaris-react/src/components/IndexFilters/components/index.ts
@@ -1,5 +1,4 @@
 export {Container} from './Container';
-export {FilterButton} from './FilterButton';
 export {SearchFilterButton} from './SearchFilterButton';
 export {SortButton} from './SortButton';
 export {UpdateButtons} from './UpdateButtons';
diff --git a/polaris-react/src/components/IndexFilters/index.ts b/polaris-react/src/components/IndexFilters/index.ts
@@ -1,6 +1,5 @@
 export {IndexFilters} from './IndexFilters';
 export {SortButton} from './components/SortButton/SortButton';
-export {FilterButton} from './components/FilterButton';
 export type {IndexFiltersProps} from './IndexFilters';
 export * from './hooks';
 export * from './types';