pocket-casts-ios icon indicating copy to clipboard operation
pocket-casts-ios copied to clipboard

Published 20 hours ago • verified publisher icon Automattic

Categories: Pills styling

Open bjtitus opened this issue 10 months ago • 3 comments

Tweaks a few colors and padding for Category Pills

  • The background of the Category pills matches the search bar background
  • Various color changes to the pill backgrounds, selected, and pressed colors
Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 33 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 38 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 42
Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 29 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 48 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 54
Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 45 00 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 23 Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 16
Simulator Screenshot - iPhone 15 Pro Max - 2024-04-09 at 21 44 11

To test

  • Build for Staging
  • Enable the categoriesRedesign feature flag
  • Navigate to Discover
  • Ensure that the Category pills appear and are interactive
  • Change themes
  • Ensure that the Category pills reflect the current theme and appear to have the correct styling

Checklist

  • [x] I have considered if this change warrants user-facing release notes and have added them to CHANGELOG.md if necessary.
  • [x] I have considered adding unit tests for my changes.
  • [x] I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.

bjtitus avatar Apr 10 '24 04:04 bjtitus

1 Warning
:warning: This PR is assigned to the milestone 7.62. The due date for this milestone has already passed.
Please assign it to a milestone with a later deadline or check whether the release for this milestone has already been finished.

Generated by :no_entry_sign: Danger

dangermattic avatar Apr 10 '24 04:04 dangermattic

@leandroalonso This should be settled now and I went ahead and checked in the Previews.

bjtitus avatar Apr 15 '24 03:04 bjtitus

Here are the colors I selected; I've annotated them in place in screenshots to avoid confusion @mebarbosa.

@david-gonzalez-a8c, could you give these a once over and see if they make sense? There is still a known issue with the close button not being a true circle which I'll fix separately so please ignore that.

Unselected Pressed Selected

bjtitus avatar Apr 15 '24 03:04 bjtitus

These look good to me.

The semantics of the color variables are still a bit confusing to me, and my bad for using different ones in the specs. But maybe $primary-field-03 is a better candidate for the border color instead of $primary-icon-02, and $primary-interactive-01 for the background color of the selected state instead of $secondary-icon-01

david-gonzalez-a8c avatar Apr 15 '24 16:04 david-gonzalez-a8c

@david-gonzalez-a8c Unfortunately, the primary-interactive-01 color seems to have the same issue as the original color I was using so I'll keep secondary-icon-01 for now. Thanks for taking a look! I can always tweak them later if you have any other feedback.

secondary-icon-01 primary-interactive-01
Old CleanShot 2024-04-15 at 14 18 01@2x

bjtitus avatar Apr 15 '24 20:04 bjtitus