1164 minor discrepancies in the intent banners and badges

[leonidasmi]

Context

• Follows up Add dynamic banner colors and intent badge tooltips to content planner modals #23152, where we noticed some minor discrepancies in the intent banners and badges and we split it in a new task.

Summary

This PR can be summarized in the following changelog entry:

• Fixes some discrepancies in the intent banners and badges.
• [@yoast/ui-library 0.1.0 other] Improves the tooltip arrow styling to avoid conflicting style sheets.

Relevant technical choices:

• Aside from the visual discrepancies, we also take care of feedback from Copilot in the followed-up PR, the most important of which is the switch to the TooltipContainer way of adding tooltips.
• Added enforcment to the tooltip arrow styling in the ui library after conflicting styling from the @yoast/ai-frontend package.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Confirm that the Commercial intent and its badge have the same styling with the designs (namely, their colors)

• Confirm that the cursor when the badge is hovered (and the tooltip is shown) is:
  • the pointer cursor when on the suggestions modal (because it's part of a clickable button)
  • the default cursor when on the outline modal (because it's part of a non-clickable button)
• Confirm that the tooltip of badges when on the suggestions modal is the same with the designs and not like reported here.
• Also a quick regression test of the tooltips, as per the test instructions of this PR.

For devs:

• Smoke test Tooltip in UI library storybook.

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
• This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.
• I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes #

[coveralls]

Coverage Report for CI Build 0

Coverage decreased (-0.003%) to 53.564%

Details

• Coverage decreased (-0.003%) from the base build.
• Patch coverage: 2 of 2 lines across 1 file are fully covered (100%).
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	65981
Covered Lines:	35185
Line Coverage:	53.33%
Relevant Branches:	16924
Covered Branches:	9222
Branch Coverage:	54.49%
Branches in Coverage %:	Yes
Coverage Strength:	45590.56 hits per line

---

💛 - Coveralls

[vraja-pro]

CR & AC ✅