Apply suggestions from code review

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
Co-authored-by: Marc Thomas <marc.thomas@shopify.com>

Author: 3 people

.changeset/strange-bananas-obey.md

@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Add Edit Columns button on `IndexFilters` when showEditColumns flag is true
+Added the `showEditColumnsButton` prop to `IndexFilters`

polaris-react/locales/en.json

@@ -194,7 +194,8 @@
         }
       },
       "EditColumnsButton": {
-        "editColumns": "Edit columns"
+        "tooltip": "Edit columns",
+        "accessibilityLabel": "Customize table column order and visibility"
       },
       "UpdateButtons": {
         "cancel": "Cancel",

polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx

@@ -385,7 +385,7 @@ export function Default() {
 }
 
 export function WithEditColumsButton() {
-  return <BasicExample showEditColumns />;
+  return <BasicExample showEditColumnsButton />;
 }
 
 export function WithoutKeyboardShortcuts() {
@@ -936,7 +936,7 @@ export function Disabled() {
         mode={mode}
         setMode={setMode}
         disabled
-        showEditColumns
+        showEditColumnsButton
       />
       <Table />
     </Card>

polaris-react/src/components/IndexFilters/IndexFilters.tsx

@@ -103,8 +103,8 @@ export interface IndexFiltersProps
   closeOnChildOverlayClick?: boolean;
   /** Optional override to the default keyboard shortcuts available */
   disableKeyboardShortcuts?: boolean;
-  /** Shows the edit columns button  */
-  showEditColumns?: boolean;
+  /** Whether to display the edit columns button with the other default mode filter actions */
+  showEditColumnsButton?: boolean;
 }
 
 export function IndexFilters({
@@ -143,7 +143,7 @@ export function IndexFilters({
   hideQueryField,
   closeOnChildOverlayClick,
   disableKeyboardShortcuts,
-  showEditColumns,
+  showEditColumnsButton,
 }: IndexFiltersProps) {
   const i18n = useI18n();
   const {mdDown} = useBreakpoints();
@@ -288,7 +288,7 @@ export function IndexFilters({
     beginEdit(IndexFiltersMode.EditingColumns);
   }
 
-  const editColumnsMarkup = showEditColumns ? (
+  const editColumnsMarkup = showEditColumnsButton ? (
     <EditColumnsButton
       onClick={handleClickEditColumnsButon}
       disabled={disabled}

polaris-react/src/components/IndexFilters/components/EditColumnsButton/EditColumnsButton.tsx

@@ -19,7 +19,7 @@ export function EditColumnsButton({onClick, disabled}: EditColumnsButtonProps) {
 
   const tooltipContent = (
     <Text as="span" variant="bodyMd" alignment="center">
-      {i18n.translate('Polaris.IndexFilters.EditColumnsButton.editColumns')}
+      {i18n.translate('Polaris.IndexFilters.EditColumnsButton.tooltip')}
     </Text>
   );
 
@@ -33,7 +33,7 @@ export function EditColumnsButton({onClick, disabled}: EditColumnsButtonProps) {
         onClick={onClick}
         icon={polarisSummerEditions2023 ? Columns3Minor : undefined}
         label={i18n.translate(
-          'Polaris.IndexFilters.EditColumnsButton.editColumns',
+          'Polaris.IndexFilters.EditColumnsButton.accessibilityLabel',
         )}
         disabled={disabled}
       >

polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx

@@ -90,7 +90,7 @@ describe('IndexFilters', () => {
     setMode: jest.fn(),
     canCreateNewView: true,
     onCreateNewView: jest.fn(),
-    showEditColumns: false,
+    showEditColumnsButton: false,
   };
 
   beforeEach(() => {
@@ -431,7 +431,7 @@ describe('IndexFilters', () => {
 
     it('renders EditColumnsButton with the disabled prop', () => {
       const wrapper = mountWithApp(
-        <IndexFilters {...defaultProps} disabled showEditColumns />,
+        <IndexFilters {...defaultProps} disabled showEditColumnsButton />,
       );
 
       expect(wrapper).toContainReactComponent(EditColumnsButton, {
@@ -441,17 +441,17 @@ describe('IndexFilters', () => {
   });
 
   describe('EditColumnsButton', () => {
-    it('renders when showEditColumns is true', () => {
+    it('renders when showEditColumnsButton is true', () => {
       const wrapper = mountWithApp(
-        <IndexFilters {...defaultProps} showEditColumns />,
+        <IndexFilters {...defaultProps} showEditColumnsButton />,
       );
 
       expect(wrapper).toContainReactComponent(EditColumnsButton);
     });
 
-    it('does not renders when showEditColumns is false', () => {
+    it('does not renders when showEditColumnsButton is false', () => {
       const wrapper = mountWithApp(
-        <IndexFilters {...defaultProps} showEditColumns={false} />,
+        <IndexFilters {...defaultProps} showEditColumnsButton={false} />,
       );
 
       expect(wrapper).not.toContainReactComponent(EditColumnsButton);
@@ -461,7 +461,7 @@ describe('IndexFilters', () => {
       'does not renders when IndexFiltersMode is %s',
       (mode: IndexFiltersMode) => {
         const wrapper = mountWithApp(
-          <IndexFilters {...defaultProps} mode={mode} showEditColumns />,
+          <IndexFilters {...defaultProps} mode={mode} showEditColumnsButton />,
         );
 
         expect(wrapper).not.toContainReactComponent(EditColumnsButton);
@@ -471,7 +471,11 @@ describe('IndexFilters', () => {
     it('sets mode to EditingColumns when clicked', () => {
       const setMode = jest.fn();
       const wrapper = mountWithApp(
-        <IndexFilters {...defaultProps} setMode={setMode} showEditColumns />,
+        <IndexFilters
+          {...defaultProps}
+          setMode={setMode}
+          showEditColumnsButton
+        />,
       );
       wrapper.act(() => {
         wrapper.find(EditColumnsButton)!.trigger('onClick');
@@ -486,7 +490,7 @@ describe('IndexFilters', () => {
         <IndexFilters
           {...defaultProps}
           onEditStart={onEditStart}
-          showEditColumns
+          showEditColumnsButton
         />,
       );
       wrapper.act(() => {