Forms: use Badge component for badges in Forms

[simison]

Uses Badge component from the new Automattic UI library. Badge is the same as core-badge.

Tried to apply sensible badge colours everywhere but not sure if I got it right. 😅 @edanzer can you help review?

Grey neutral for items which are fine to ignore if they aren't planning to set up. Green for things that are setup correctly, and yellow for ones which need attention since they're half-setup.

Before

After

Proposed changes:

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

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

Testing instructions:

• Go to '..'

[github-actions]

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 WoA dev 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 (Jetpack or WordPress.com Site Helper), and enable the update/forms-use-badge-component branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-use-badge-component

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/forms-use-badge-component

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]

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 Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ 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 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[ilonagl]

LGTM!

[edanzer]

So when testing, I found a weird issue the the "Plugin needs install" button was gray (like the screenshots in the PR description) when on the central integrations dashboard... but blueish when on the integrations modal in the block editor.

After some digging, the reason is that the badge color is based on a variable --wp-admin-theme-color, which for some reason has different values on a normal admin page (#000000) vs the block editor (#007cba).

This is for badges with intent = info.

I thought about changing the intent for these to "default", which is consistently gray in both places, but then we lose the badge icon. In the component library, when the badge has 'default', the icon is dropped.

As a demo, I pushed this small change which overrides the --wp-admin-theme-color in the editor, but I actually don't think this is a good idea. Overriding this will produce other kinds of potential inconsistency.

In any case, with this change, the color is gray as expected. Also note sales force is the same gray color, also with icon, because I updated it's intent to be info as well. Whatever intent we use, we should likely use the same intent for the 'Plugin needs install' and Salesforce 'Enter organization ID' badges.

[edanzer]

Actually, even in earlier designs, the gray style badges didn't have icons. So I updated these back to the 'default' variant, which is always gray. And that allowed me to remove the 'bad' css override above.

The final looks like this in the editor:

And like this in the dashboard:

Those both look great IMO.

[edanzer]

I rebased this on top of some other work to change the order of the badges on mobile.

The main difference after addressing merge conflicts is we had to keep the class names like integration-card__connected-badge so that we could continue to apply the flex order changes on desktop vs mobile.

Likewise, in the CSS we kept the rules applying the order for those classes.