Add gray background to filter buttons in design picker

[madhusudhand]

Related to https://github.com/Automattic/dotcom-forge/issues/10014

Proposed Changes

• It adds gray background to the filter buttons in design picker to match the designs.

Before

After

Why are these changes being made?

• To match the design spec

Testing Instructions

• Verify the button UI in design picker

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126754

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126754&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126754&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[madhusudhand]

❓ Designs suggest a less gap between the buttons. Do you prefer to override the gap in design-picker only or in the base component?
Note: the component is being used in multiple places. And most of them have page specific overrides which makes the component appear differently.

[taipeicoder]

@madhusudhand will there be a follow-up PR to make the filters UI match the design spec? They still look very different.

[taipeicoder]

❓ Designs suggest a less gap between the buttons. Do you prefer to override the gap in design-picker only or in the base component? Note: the component is being used in multiple places. And most of them have page specific overrides which makes the component appear differently.

Yes, overrides in the design picker only.

[arthur791004]

Do we want to update the following UI as well?

• The background color of the selected item
• The background color under the "More" dropdown
  

Not related to this PR, but I found it looks weird on smaller screen

[arthur791004]

We can address the above issue in the follow-up PRs 🙂

[taipeicoder]

I've confirmed with @fditrapani in that we intend to override the styles for the filters in the Design Picker. Filippo also pointed out that https://wordpress.com/patterns also shares similar styling.

Creating the issue https://github.com/Automattic/dotcom-forge/issues/10108 to track this work.

[madhusudhand]

@madhusudhand will there be a follow-up PR to make the filters UI match the design spec? They still look very different.

I will address all the UI issues in the followup PR. Merging this for now.

[fditrapani]

Not related to this PR, but I found it looks weird on smaller screen

Thanks for pointing that out @arthur791004. We should make some adjustments on smaller screens for sure. I've shared a mobile design which displays the filters on two rows and has horizontal scrolling (without the more button). Let me know if that's enough or if you need me to mock anything else up.