Tip: Use CSS-in-JS

[sarayourfriend]

Description

This PR updates the Tip component to use CSS-in-JS similar to how newer components do like the AnglePickerControl and Text.

How has this been tested?

I've confirmed there are no visual or behavioral differences between this branch and upstream in storybook.

Screenshots

Before:

After:

Types of changes

Non-breaking style change. The classname is preserved so it is still possible to target the components-tip class.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ItsJonQ]

@saramarcondes Haiii!!!

Interesting idea! From my experience (in figuring out things in G2...), I personally would avoid the jsx pragma based approach. Theme UI offers a similar API.

In practice, I found it to be pretty clunky (and slightly jarring if you're unfamiliar with the workflow).

I believe I understand why this was attempted ❤️ .
My guess was to avoid using styled :) - which has a great dev workflow, with a slight trade-off in performance.

I would recommend continuing to use styled as your continuing your CSS-in-JS journey within Gutenberg.
It would be consistent with the current (but limited) implementation.

I think introducing the JSX pragma may cause some fragmentation in tidying and refactoring things.

[ItsJonQ]

It looks like the E2E tests are unhappy with TypeScript things 😱
I believe I saw another PR with updates.. Something with tinycolor2 types? :)

[sarayourfriend]

Fixing the tests are blocked by #26078

[ItsJonQ]

@saramarcondes Thank you following up and adjusting the implementation (styled vs css). Hopefully the concerns I raised made sense 🙏 .

With that, the it's a 👍 from me.

However, it looks like the tests are unhappy. Hopefully #26078 can help resolve it!

I left my comments in that PR. My TypeScript knowledge isn't good enough to thoughtfully and accurately go over those changes 😅 .

[sarayourfriend]

Closing in favor of focusing on G2-components integration.