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

Avoid truncation of 'Try Jetpack" button with big fonts #17511

Merged
merged 4 commits into from
Nov 23, 2022

Conversation

ovitrif
Copy link
Contributor

@ovitrif ovitrif commented Nov 22, 2022

Fixes #17428

This PR ensures the Try the new Jetpack app button is not truncated with big fonts.
The issue was not reproducing for all languages, one of the languages it reproduced with is French.

I replaced the MaterialButton with a Button because I couldn't find any way to make the MaterialButton avoid truncation on the bottom sheet.

To test:

Test Case 1 - Big Fonts

  1. Prerequisite: Enable the jetpack_powered_bottom_sheet_remote_field feature flag.
  2. Set app language to French (MeApp SettingsInterface Language)
  3. Set max font size via Accessibility settings on device.
  4. Tap the "Jetpack Powered" badge on Me, or My SiteHome
  5. Expect the primary button to show text on 2 lines (not truncated — see screenshots)
  6. Rotate the device to landscape
  7. Expect the primary button to show normally, with no issues

Test Case 2 - Regression

  1. Restore default font size via Accessibility settings on device
  2. Tap the "Jetpack Powered" badge on Me, or My SiteHome
  3. Expect to see the Try the new Jetpack app styled as before, with no visual regression
  4. Rotate the device to landscape
  5. Expect to see the Try the new Jetpack app styled as before, with no visual regression
  6. Tap the Try the new Jetpack app button
  7. Expect it to work as before, with no functional regression

Previews

Before - Big Fonts After - Big Fonts After - Default Fonts

Regression Notes

  1. Potential unintended areas of impact
    Try Jetpack button without big fonts - on landscape & portrait.

  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 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.

Although the text of the button in landscape is unlikely to get truncated this change was needed to avoid a crash when rotating the device multiple times.
@ovitrif ovitrif added this to the 21.3 milestone Nov 22, 2022
@ovitrif ovitrif requested a review from ravishanker November 22, 2022 15:16
@wpmobilebot
Copy link
Contributor

WordPress📲 You can test these changes on WordPress by downloading wordpress-installable-build-pr17511-283d108.apk
💡 Scan this QR code with your Android phone to download and install the APK directly on it.
AppWordPress
Build FlavorJalapeno
Build TypeDebug
Commit283d108
Note: This installable build uses the JalapenoDebug build flavor, and does not support Google Login.

@wpmobilebot
Copy link
Contributor

Jetpack📲 You can test these changes on Jetpack by downloading jetpack-installable-build-pr17511-283d108.apk
💡 Scan this QR code with your Android phone to download and install the APK directly on it.
AppJetpack
Build FlavorJalapeno
Build TypeDebug
Commit283d108
Note: This installable build uses the JalapenoDebug build flavor, and does not support Google Login.

Copy link
Contributor

@ravishanker ravishanker left a comment

Choose a reason for hiding this comment

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

Nice work 👍

@ovitrif ovitrif merged commit 77d4686 into trunk Nov 23, 2022
@ovitrif ovitrif deleted the issue/17428-try-jetpack-button-non-truncated branch November 23, 2022 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Jetpack Focus: 'Try the new Jetpack app' button text is truncated for big fonts
3 participants