[Filters] only show the "More filters" button if necessary

[rickitan]

WHY are these changes introduced?

Fixes #2826

The filters component always shows a "More filters" button. If there's only one filter or we can fit all the filters in the container, the button feels unnecessary.

This image describes the problem:

Notice how there's only one filter, and we still show the "More filters" button.

WHAT is this pull request doing?

This PR introduces the following behaviour:

• If there's no filters marked with shortcut: true we show the More filters button
• If all the filters are marked with shortcut: true and we can fit them in the container, we don't show the More filters button
• If all the filters are marked with shortcut: true and we CAN'T fit them in the container, we show the More filters button
• If some of the filters are marked with shortcut: true but no all, we show the More filters button

This shows the new look:

The changes are backwards compatible.

🎩 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
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 7 files and might impact 2 other files.

Details:

All files potentially affected (total: 2)

• /src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
• /src/components/Filters/Filters.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Filters/Filters.tsx (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss (total: 2)

Files potentially affected (total: 2)

• /src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx
• /src/components/Filters/Filters.tsx

🧩 src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Filters/Filters.tsx

🧩 src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Filters/tests/Filters.test.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/MediaCard/MediaCard.tsx (total: 0)

Files potentially affected (total: 0)

[tmlayton]

I like the approach, only show more filters if there are actually more filters! 😄

There is some polishing work to do. A couple things I noticed from a quick 🎩 are:

• Last button when hiding more filters does not have rounded corners
  
• Some funky behavior here where more filters shows up even though the button is larger:
  
  

[tmlayton]

See above comment

[rickitan]

Hi @tmlayton I just addressed you comments. Let me know what you think!

[tmlayton]

Looking better, still some styling needed to fix up connected buttons. Noticed the rounded corners on the right side of the "Tagged with" button:

[rickitan]

Hi tim! @tmlayton

I just address the border-radius problem. Let me know what you think!

[tmlayton]

Looks good!

[tmlayton]

For test coverage run dev test:coverage or in this case dev test:coverage ConnectedFilterControl.test.tsx which will generate and open the report in the browser.

Looking at the codecov diff the lines without coverage are flagged in yellow for partial or red for none:

Adding tests for this is fairly straightforward. The two cases are when shouldRenderMoreFiltersButton is false and when only some buttons fit and the loop broken.

[tmlayton]

Couple small changes, otherwise this is ready to go. I went ahead and pushed a couple more tests for code coverage.

[ghost]

🎉 Thanks for your contribution to Polaris React!