[Filters] Refactor to use new FiltersBar component

[mrcthms]

WHY are these changes introduced?

This PR takes another approach to the applied filters and pinned filters logic. In this PR, we tried to solve for an issue on a specific index table, the Orders index, which loads the filter data asynchronously. However, I now feel this approach is wrong and we should be solving for this problem in another way.

Due to how the Filters component was built before, all the logic regarding state management of pinned and applied filters was generated when the Filters component mounted, yet if there were no filters array passed to the Filters component, it would not render. This caused issues around keeping applied filters and pinned filters in sync with each other.

The component would mount with an empty filters and appliedFilters array, and then re-render once the data was available and passed down. We should not be invoking any of the internal state logic around pinned/applied filters until we have a list of filters to parse.

This PR breaks out the Filters component, and puts all the stateful logic inside a new FiltersBar child component of the Filters, and this only gets rendered when filters.length > 0. This allows us to keep the initial pinned/applied filter state in sync and prevents and issues we were seeing around applied filters jumping around the list.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Spin URL: https://admin.web.filters-fix.marc-thomas.eu.spin.dev/store/shop1/orders?inContextTimeframe=none&delivery_method=shipping

• Confirm that the Delivery method filter pill appears when the data has loaded
• Apply more filters, and then reload the page
• Confirm that those filters appear when the data has loaded
• Confirm that filters stay in their existing position, until deleted.

Spin URL: https://admin.web.filters-fix.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all

• Apply a vendor filter to the index table
• Confirm that the Vendor filter pill remains in the same place when a value is selected

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20230927171426

[ouellettejordan]

Tested spin link and looks good to me 👍

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231002095603

yarn add @shopify/polaris@0.0.0-snapshot-release-20231002095603

[sam-b-rose]

Should this deprecation be merged into main instead of 12.x.x?

[sam-b-rose]

Changes look good! Should we move the deprecation notice to a separate PR targeting the main branch, then make the v12 updates targeting 12.x.x?

[translation-platform]

Localization quality issue found

The following issues may affect the quality of localized translations if they are not addressed:

• The value Edit columns for key Polaris.IndexFilters.EditColumnsButton.tooltip is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.