Fixed category title in RTL languages

[carl-duncan]

Fixes #

Fixed the category titles (and subtitles) displayed in RTL languages for the theme picker and the page picker.

To test:

Set the app's language to an RTL language. (pseudoLocales can be used for ease in testing).

LTR

Make sure there are no regression for the theme picker and the page picker.

1. Enable LTR locale (U.S. English)
2. Start site creation flow
3. Choose an intent (e.g. Food)
4. Expect to see the theme picker screen next
5. Make sure category titles (and subtitles) are displayed correctly
   • There should be no changes from this PR
6. Exit the theme picker and go to the pages list
7. Tap the FAB to create a new page
8. Expect to see the page picker screen next
9. Make sure category titles (and subtitles) are displayed correctly
   • There should be no changes from this PR

RTL

Make sure there are no regression for the theme picker and the page picker.

1. Enable RTL locale (Arabic, English pseudoLocale)
2. Start site creation flow
3. Choose an intent (e.g. Food)
4. Expect to see the theme picker screen next
5. Make sure category titles (and subtitles) are displayed correctly
   • Categories should be on the right side with proper padding
6. Exit the theme picker and go to the pages list
7. Tap the FAB to create a new page
8. Expect to see the page picker screen next
9. Make sure category titles (and subtitles) are displayed correctly
   • Categories should be on the right side with proper padding

Regression Notes

1. Potential unintended areas of impact
   Page and theme pickers

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)
   Out of scope for this task.

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.

[mkevins]

Thank you for tackling this issue, it looks like it is off to a good start. I've tested this, and the categories are now displayed on the correct side in RTL locales.

I noticed a minor change (loss in padding) around the category labels:

[carl-duncan]

Thank you for tackling this issue, it looks like it is off to a good start. I've tested this, and the categories are now displayed on the correct side in RTL locales.

I noticed a minor change (loss in padding) around the category labels:

Fixed

[mkevins]

Hi @carl-duncan 👋 😃

There are some changes that have landed in trunk that touch the same file that this PR touches. It appears that there are no conflicts from git when merging these, however, testing the merged result reveals that something may have been affected by this. To test this, I checked out this PR locally, and brought it up to date by merging in the latest trunk (which includes the changes brought in by this PR: #16468). Though the conflicting changes were auto-merged by git, testing the code I encountered more issues with padding again 😞. The biggest difference was noticeable in the site creation flow (theme picker), with a more subtle padding shift in the page layout picker:

Site Creation Theme Picker	Page Layout Picker

Can you try merging in the latest trunk and see if you see the same?

[carl-duncan]

Hi @carl-duncan 👋 😃

There are some changes that have landed in trunk that touch the same file that this PR touches. It appears that there are no conflicts from git when merging these, however, testing the merged result reveals that something may have been affected by this. To test this, I checked out this PR locally, and brought it up to date by merging in the latest trunk (which includes the changes brought in by this PR: #16468). Though the conflicting changes were auto-merged by git, testing the code I encountered more issues with padding again 😞. The biggest difference was noticeable in the site creation flow (theme picker), with a more subtle padding shift in the page layout picker:

Site Creation Theme Picker Page Layout Picker


Can you try merging in the latest trunk and see if you see the same?

I will sort this out later today, thank you for the review!

[carl-duncan]

Good day, I am sorry about the delays, here is the updates! I updated the padding for the end so that in RTL displays it will match exactly

[mkevins]

Thank you for these changes @carl-duncan ! I've tested the latest changes, and this indeed improves the padding for RTL locales, while leaving the LTR intact. I've tested this with both the theme picker and the page picker, and things are working well. I've left one nitpick comment about.

[mkevins]

Thank you Carl, the padding is now fixed, and the code is looking good! Compared with trunk, the LTR locales are unaffected (i.e. no regressions) and the padding for RTL locales is improved:

Screen	trunk	This PR
Theme Picker
Page Picker

I've added two small suggestions for improving this further, so that we can have correct alignment for RTL locales in addition to the improved padding. The results look like this:

Screen	This PR	This PR with suggestions applied
Theme Picker
Page Picker

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[mkevins]

Thank you for updating Carl. I've updated the description of the PR to add the testing steps (already performed) for posterity. I also added some labels and set the milestone to the next release. I've created a companion branch in the main repository to trigger CI tests, and once green, this one should be good to go. Thanks for your efforts on this!

[AliSoftware]

Thanks again for this PR @carl-duncan 🎉

For information, your fix has been included in the version 20.2-rc-1 that we are now sending to beta-testing phase before releasing it to the public in two weeks. Be sure to watch https://make.wordpress.org/mobile/ for a soon-to-be published post about the beta-testing of WPAndroid 20.2, to help us test this version and your fix that shipped in it!