Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Reader IA] Update some minor UI style in Reader buttons and feed empty states #20059

Merged
merged 12 commits into from
Jan 29, 2024

Conversation

thomashorta
Copy link
Contributor

Fixes #20028

Updates to

  • the style of some empty states of reader feeds (such as the Discover, Subscriptions, Liked, Saved) to have a black button
  • text in the Subscriptions empty state to match Figma (zQnohyMpLzBzQ5jzMMKni3-fi-2848_17970)
  • chips and button in the "Follow Tags" or Reader Interests screen
  • illustration used in some empty feeds, such as the "Saved" feed, to match iOS and Web

See video below to see the main changes.

20028-reader-ia-empty-feeds-and-interest-styles-shorter.mp4

Note: same as #19993 there are some pre-existing bugs (related to fetching fields after going to search/manage subscription screens). Those were not fixed here, as this PR is just touching the visual styles and some copies, but the GH issues are open in our backlog.


To Test:

I recommend using a secondary test account with no saved or liked posts, and unsubscribe from all blogs and tags, for making it easier to see the empty states.

  1. Install and log into Jetpack
  2. Go to Reader
  3. Make sure to unfollow all blogs and tags (it will make it easier to see the empty feed states)
  4. Also make sure to have no Likes or Saved posts
  5. Go to the Discover Feed
  6. Verify the button style is correct (black)
  7. Tap the button
  8. Verify the tag chips style is correct (black)
  9. Verify the button style is correct both when no tags are selected and when there are tags selected
  10. Go back without tapping the button
  11. Go to the Liked Feed
  12. Verify the button style is correct (black) and the illustration is updated
  13. Go to the Saved Feed
  14. Verify the button style is correct (black) and the illustration is updated
  15. Go to the Subscriptions Feed
  16. Verify the button style is correct (black)
  17. Verify the text is updated
  18. Tap the "Tags" filter (make sure it has 0 tags)
  19. Tap the "Suggested tags" button
  20. Verify the tag chips style is correct (black)
  21. Verify the button style is correct both when no tags are selected and when there are tags selected

Suggestion: also test in dark mode.


Regression Notes

  1. Potential unintended areas of impact

    • Button style for Actionable Empty View used in other places of the app
  2. What I did to test those areas of impact (or what existing automated tests I relied on)

    • Manual testing
  3. What automated tests I added (or what prevented me from doing so)

    • N/A, UI and String changes

PR Submission Checklist:

  • I have completed the Regression Notes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes Testing Checklist:

  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • Talkback.
  • 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)
  • Large and small screen sizes. (Tablet and smaller phones)
  • Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

@peril-wordpress-mobile
Copy link

peril-wordpress-mobile bot commented Jan 26, 2024

Warnings
⚠️

This PR adds a translatable entry to strings.xml which references another string resource: this usually causes issues with translations.Please make sure to set the translatable="false" attribute here:+ <string name="reader_no_followed_blogs_title">@string/reader_filter_empty_blogs_list_title</string>

⚠️

This PR adds a translatable entry to strings.xml which references another string resource: this usually causes issues with translations.Please make sure to set the translatable="false" attribute here:+ <string name="reader_no_followed_blogs_description">@string/reader_filter_empty_blogs_list_text</string>

⚠️ PR is not assigned to a milestone.
⚠️ PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

@dangermattic
Copy link
Collaborator

3 Warnings
⚠️ View files have been modified, but no screenshot is included in the pull request. Consider adding some for clarity.
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️ PR is not assigned to a milestone.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Contributor

wpmobilebot commented Jan 26, 2024

WordPress📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.
App NameWordPress WordPress
FlavorJalapeno
Build TypeDebug
Versionpr20059-49c8f0b
Commit49c8f0b
Direct Downloadwordpress-prototype-build-pr20059-49c8f0b.apk
Note: Google Login is not supported on these builds.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented Jan 26, 2024

Jetpack📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.
App NameJetpack Jetpack
FlavorJalapeno
Build TypeDebug
Versionpr20059-49c8f0b
Commit49c8f0b
Direct Downloadjetpack-prototype-build-pr20059-49c8f0b.apk
Note: Google Login is not supported on these builds.

Copy link
Contributor

@RenanLukas RenanLukas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, @thomashorta

I've checked both light and dark themes and it's working as expected. Code LGTM :shipit:

@thomashorta
Copy link
Contributor Author

The last commit I just sent just removes the unused resources that lint is complaining about, so I will merge as soon as the CI finishes building!

Copy link

codecov bot commented Jan 29, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ce45d12) 40.47% compared to head (49c8f0b) 40.47%.
Report is 1 commits behind head on feature/reader-ia.

Additional details and impacted files
@@                Coverage Diff                 @@
##           feature/reader-ia   #20059   +/-   ##
==================================================
  Coverage              40.47%   40.47%           
==================================================
  Files                   1447     1447           
  Lines                  66779    66779           
  Branches               11028    11028           
==================================================
  Hits                   27026    27026           
  Misses                 37269    37269           
  Partials                2484     2484           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@thomashorta thomashorta merged commit 660dd0b into feature/reader-ia Jan 29, 2024
20 checks passed
@thomashorta thomashorta deleted the issue/20028-reader-ia-buttons-ui-style branch January 29, 2024 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants