reactjsruby-on-rails-5filteringpolaris

shopify/polaris react + rails how to customize 'more filters' button and sheet behavior?


technology:

Problem:

I used the polaris Filters component to filter through a table of mine following the docs. My filters and table are similar to the 'Filtering with a data table' example found here https://polaris.shopify.com/components/lists-and-tables/filters#navigation, however I cannot get the 'More filters' text on the button that toggles the non-promoted filters sheet (https://polaris.shopify.com/components/overlays/sheet#navigation) to appear:

enter image description here

The sheet that appears once that button is clicked also includes two buttons on the button that do not have any descriptive text. The button on the bottom right closes the sheet and the one on the left does nothing: enter image description here

Questions:

  1. How can I include the 'More filters' text on the button?
  2. How can I include text on the buttons displayed on the sheet?
  3. How can I customize the actions of the buttons on the sheet?
  4. Hypothetical because I do not want this - Would I be able to remove the 'More filters' button altogether since I only have 3 filters that are all purposefully set to shortcut: true?

Solution

  • Add:

    import enTranslations from '@shopify/polaris/locales/en.json';
    

    Then include it in the AppProvider component:

    <AppProvider i18n={enTranslations}>