Reader: Update `ReaderTagCell` to new UI
Fixes #23184
Description
Updates the Reader tag cell to the new UI: p1715247952499939/1715197207.367749-slack-C05N140C8H5
Testing
To test:
- Launch Jetpack and login
- Enable the "Reader Tags Feed" feature flag
- Navigate to the "Your Tags" feed
- After the feed loads, 🔎 verify the UI is updated to the UI referenced above
Regression Notes
-
Potential unintended areas of impact Should be none.
-
What I did to test those areas of impact (or what existing automated tests I relied on) N/A
-
What automated tests I added (or what prevented me from doing so) N/A PR submission checklist:
- [x] I have completed the Regression Notes.
- [x] I have considered adding unit tests for my changes.
- [x] I have considered adding accessibility improvements for my changes.
- [x] I have considered if this change warrants user-facing release notes and have added them to
RELEASE-NOTES.txtif necessary.
Testing checklist:
- [ ] WordPress.com sites and self-hosted Jetpack sites.
- [ ] Portrait and landscape orientations.
- [ ] Light and dark modes.
- [ ] Fonts: Larger, smaller and bold text.
- [ ] High contrast.
- [ ] VoiceOver.
- [ ] Languages with large words or with letters/accents not frequently used in English.
- [ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
- [ ] iPhone and iPad.
- [ ] Multi-tasking: Split view and Slide over. (iPad)
| 1 Warning | |
|---|---|
| :warning: | View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity. |
Generated by :no_entry_sign: Danger
📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
| App Name | WordPress Alpha |
|
| Configuration | Release-Alpha | |
| Build Number | pr23185-4e99197 | |
| Version | 24.9 | |
| Bundle ID | org.wordpress.alpha | |
| Commit | 4e99197261cb71a8d79f03390401fd05cecbadc2 | |
| App Center Build | WPiOS - One-Offs #9928 |
📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
| App Name | Jetpack Alpha |
|
| Configuration | Release-Alpha | |
| Build Number | pr23185-4e99197 | |
| Version | 24.9 | |
| Bundle ID | com.jetpack.alpha | |
| Commit | 4e99197261cb71a8d79f03390401fd05cecbadc2 | |
| App Center Build | jetpack-installable-builds #8977 |
Hey @wargcm , I'm bumping the milestone for this PR to 25.0 as I'm starting the code freeze. If this PR needs to go into 24.9, please go ahead and re-target it to the release branch.
think we need more horizontal padding between the cards
Fixed in https://github.com/wordpress-mobile/WordPress-iOS/pull/23185/commits/abac3532b9baf39ab51d9b175c0758a71c0f70c9.
the skeleton loading state looks good. But then there's a much less subtle green loader for the images which load more slowly, which kinda draws too much attention. Could they keep just the grey skeleton effect?
I was having some issues getting our ghost animation library to play nice with our custom image view. I'll try to fix this in a future PR.
I think we had gone for tapping on a tag chip filtering the feed rather than drilling down. Not for the arrow at the end of the carousel, I think that works as expected.
Fixed in https://github.com/wordpress-mobile/WordPress-iOS/pull/23185/commits/93f285605d76435d93a5289e8cf075baf133ae7b.
I've also updated the iPad sizing to match the Figma sizes in https://github.com/wordpress-mobile/WordPress-iOS/pull/23185/commits/5af962669296c7a4bd0e70db4b9e948b49db8e11.
Thanks for taking a look! I'm going to mark this as ready for review.
thanks @wargcm for the tweaks, as you marked ready for review does that mean I should see those updates if I install the build from this PR?
@osullivanchris Yep! It looks like https://github.com/wordpress-mobile/WordPress-iOS/pull/23185#issuecomment-2103624372 was updated to the latest commit automatically.
Looking good, thanks for the improvements. One small thing. When I get to the end of the carousels the view background is the standard grey rather than white, looks a bit off.
Hey this is looking pretty tight overall. still seeing 4 lines of heading and excerpt in some cases, making the content taller than the image. I had suggested max 3 lines + 64 image. Or if we want to have 4 lines, bumping up the img to 80 so that the content lines up. But its not looking too bad or anything.
One other tiny detail is maybe add 8pt padding under the tag heading, its getting a bit tight to the blog name.
Latest changes are looking good for me. LGTM! :shipit: