My Jetpack: Protect card- Reduce the count font-size as the number of digits increases. #38953

elliottprogrammer · 2024-08-19T11:13:03Z

This was a request by @ilonagl on the Design team:

Question, For the "Logins blocked", is there any way to minimize the font when it gets to a big number? If not, then maybe we can reduce the size for the numbers? (See screenshot below)

This PR dynamically reduces the font-size of the "Logins blocked" numbers (and slightly reduces letter-spacing) as the number of digits increases.

Fixes https://github.com/Automattic/jetpack-marketing/issues/936

Proposed changes:

In the number of logins blocked, reduce the font size as the number of digits increases.
Slightly reduce letter-spacing when logins blocked is more than 3 digits (> 999).
Also added numberFormat() to the number of logins blocked, (Which adds commas to the number (for US locale)).

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

The number of logins blocked in the My Jetpack Protect card was initially added as part of: --> PT: Add value to the Protect product card in My Jetpack: pbNhbs-aP6-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Checkout this branch on the Jetpack plugin via the Jetpack Beta plugin or on your local dev environment.
Make sure Jetpack is connected (at least "site" connected).
If using a Jurassic Ninja site, SSH into the site using the site credentials displayed at the top of the WordPress dashboard. If using local dev environment, just open your terminal and prepend jetpack docker to the WP CLI command stated in the next step.
Run the WP CLI command: wp option update jetpack_protect_blocked_attempts 12345
Open the My Jetpack page and view the Protect product card. Blocked logins should be formatted to say "12.3K" and the font-size should be 32px. (See screenshot:)

…its increases.

github-actions · 2024-08-19T11:13:50Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the update/my-jetpack-protect-card-logins-blocked-font-size branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/my-jetpack-protect-card-logins-blocked-font-size

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-08-19T11:14:03Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

…ed-font-size

jboland88

Instead of shrinking the font size as the number gets larger, what do you think of re-using the number formatting we have on the VideoPress card?

There, we are using a compact number config like this:

const shortenedNumberConfig: Intl.NumberFormatOptions = {
		maximumFractionDigits: 1,
		notation: 'compact',
	};

And this number format utility: https://github.com/Automattic/jetpack/blob/trunk/projects/packages/my-jetpack/_inc/utils/format-number.ts

To get output like 23K in place of 23,000

I think that would bring some better consistency for how we handle large numbers on the cards.

CodeyGuyDylan · 2024-08-20T19:58:16Z

Instead of shrinking the font size as the number gets larger, what do you think of re-using the number formatting we have on the VideoPress card?

There, we are using a compact number config like this:
const shortenedNumberConfig: Intl.NumberFormatOptions = {
		maximumFractionDigits: 1,
		notation: 'compact',
	};
And this number format utility: https://github.com/Automattic/jetpack/blob/trunk/projects/packages/my-jetpack/_inc/utils/format-number.ts

To get output like 23K in place of 23,000

I think that would bring some better consistency for how we handle large numbers on the cards.

Plus one on this, FYI I stole that from the Stats card for the VideoPress implementation. Would make numbers like that consistent on all cards 😄

elliottprogrammer · 2024-08-20T20:12:10Z

@jboland88 & @CodeyGuyDylan,
Oh! Yes definitely. I agree looks like a great solution and we should keep them consistent! 👍. I wasn't noticing we were already doing this on the VideoPress and Stats cards! Excellent, thanks for the feedback!
Yeah, I'll change this over to use the compact number formatting. 👍😃

…er feedback.

…ed-font-size

CodeyGuyDylan

LGTM! I did make a comment on a good code quality improvement to make, but it's non-blocking

CodeyGuyDylan · 2024-08-21T19:43:43Z

...ages/my-jetpack/_inc/components/product-cards-section/protect-card/logins-blocked-status.tsx

@@ -54,9 +55,16 @@ function BlockedStatus( { status }: { status: 'active' | 'inactive' | 'off' } )
 	const tooltipContent = useProtectTooltipCopy();
 	const { blockedLoginsTooltip } = tooltipContent;

+	const shortenedNumberConfig: Intl.NumberFormatOptions = {


I just thought of something 🤔

This config is being used for stats, videopress, and now here. I am assuming the vast majority of the time we use this function, this will be the config. What do you think about moving this to the utils function as the default config? And we can still have the config as an optional prop. Not necessary to do here but it should be pretty easy 🤔

If you don't feel like we should do that in this PR, we can just create a small maintenance task. Just feel like it will be prioritized as "nice to have" 😅

@CodeyGuyDylan, yes good idea, nice improvement, I like it! 😃. Thanks for pointing this out! 👍
Ok, I added the default options to the utils/format-number function in this PR.

Could you re-review? Your previous approval was dismissed with the latest changes...

I'll then whip up a quick follow-up PR to remove the shortenedNumberConfig (the second parameter) where the function is used within the Stats card and the VideoPress card. Sounds good? 🙂

…ed-font-size

ilonagl · 2024-08-22T14:15:17Z

I added this later as a comment in our chat with @elliottprogrammer: "We could try to trim them instead and use metric prefixes (K for thousands, M for millions, etc.)"

Glad we all reached to the same conclusion! Thanks for working on this, @elliottprogrammer! Appreciate it.

Parental leave, also changes made

CodeyGuyDylan

LGTM! Thanks for the changes 😄

Blocked-logins count: Reduce the count font-size as the number of dig…

0133272

…its increases.

elliottprogrammer self-assigned this Aug 19, 2024

github-actions bot added the [Package] My Jetpack label Aug 19, 2024

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Aug 19, 2024

elliottprogrammer added [Status] In Progress [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Aug 19, 2024

elliottprogrammer requested a review from a team August 20, 2024 18:38

elliottprogrammer added [Status] Needs Team Review and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Aug 20, 2024

Merge branch 'trunk' into update/my-jetpack-protect-card-logins-block…

c9c7d47

…ed-font-size

jboland88 previously requested changes Aug 20, 2024

View reviewed changes

elliottprogrammer added 2 commits August 21, 2024 07:15

New approach: Use 'formatNumber()' with 'notation: compact' option, p…

6c04032

…er feedback.

Make font-size consistent with VideoPress card.

3292e5a

elliottprogrammer removed the [Status] In Progress label Aug 21, 2024

elliottprogrammer requested review from jboland88 and a team August 21, 2024 11:41

Merge branch 'trunk' into update/my-jetpack-protect-card-logins-block…

e789c9d

…ed-font-size

CodeyGuyDylan previously approved these changes Aug 21, 2024

View reviewed changes

Merge branch 'trunk' into update/my-jetpack-protect-card-logins-block…

1b8c82f

…ed-font-size

elliottprogrammer dismissed CodeyGuyDylan’s stale review via 1b8c82f August 22, 2024 12:35

Add default options to utils/format-number function.

8a135af

CodeyGuyDylan approved these changes Aug 22, 2024

View reviewed changes

elliottprogrammer merged commit 45dab0f into trunk Aug 23, 2024
70 of 71 checks passed

elliottprogrammer deleted the update/my-jetpack-protect-card-logins-blocked-font-size branch August 23, 2024 11:20

github-actions bot removed the [Status] Needs Team Review label Aug 23, 2024

elliottprogrammer mentioned this pull request Aug 23, 2024

Update all occurrences of MJ utils/formatNumber() function to use default options. #39055

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Jetpack: Protect card- Reduce the count font-size as the number of digits increases. #38953

My Jetpack: Protect card- Reduce the count font-size as the number of digits increases. #38953

elliottprogrammer commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading

jboland88 left a comment

CodeyGuyDylan commented Aug 20, 2024

elliottprogrammer commented Aug 20, 2024

CodeyGuyDylan left a comment

CodeyGuyDylan Aug 21, 2024

CodeyGuyDylan Aug 21, 2024

elliottprogrammer Aug 22, 2024

ilonagl commented Aug 22, 2024

CodeyGuyDylan left a comment

My Jetpack: Protect card- Reduce the count font-size as the number of digits increases. #38953

My Jetpack: Protect card- Reduce the count font-size as the number of digits increases. #38953

Conversation

elliottprogrammer commented Aug 19, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Aug 19, 2024 • edited Loading

github-actions bot commented Aug 19, 2024 • edited Loading

jboland88 left a comment

Choose a reason for hiding this comment

CodeyGuyDylan commented Aug 20, 2024

elliottprogrammer commented Aug 20, 2024

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

CodeyGuyDylan Aug 21, 2024

Choose a reason for hiding this comment

CodeyGuyDylan Aug 21, 2024

Choose a reason for hiding this comment

elliottprogrammer Aug 22, 2024

Choose a reason for hiding this comment

ilonagl commented Aug 22, 2024

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

elliottprogrammer commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading