feat(react): add toggletip component

[joshblack]

Closes #10280

Adds the toggletip set of components to this project. This is the initial API Design for Toggletip and its corresponding components. It includes test stubs but no tests yet for the implementation while we go through API review 👀

Changelog

New

• Add Toggletip components
• Add useWindowEvent to useEvent

Changed

• Update useEvent to supports refs

Removed

Testing / Reviewing

• Go through the API design for this component
  • Does it make sense?
  • Does it follow our standards?
  • Do you see any problems with it?
• Go through the test stubs, do you see any behavior that should be covered that isn't?

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 32152dd

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61f0642987d7e700070c3660

😎 Browse the preview: https://deploy-preview-10365--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 32152dd

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61f06429d43b8b00070d350c

😎 Browse the preview: https://deploy-preview-10365--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 32152dd

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61f064294aaa57000944505a

😎 Browse the preview: https://deploy-preview-10365--carbon-components-react.netlify.app

[tay1orjones]

Looks good to me! Composing ToggletipLabel outside of Toggletip looks a bit strange but I like the preference towards flexibility.

[laurenmrice]

• The hover state for the icon looks like its $icon-primary, so that is correct. 👍

---

• There should be 8px between the top of the caret tip and info icon.
  

• The focus on the link and button inside of the popover container need to be using $focus-inverse.
  

---

• Also just a question, are direction for top, bottom, left, and right going to be provided eventually? Or should they be a part of this PR.

[abbeyhrt]

Looks good to me!!

[joshblack]

@laurenmrice thanks for the review! Just updated with the changes. I also included a "playground" story with the directions (although the "top" option will run into the top of the page, will figure out a good way to center stories in a future PR).

Separately, it looked like the button was using the correct token but let me know if you still are seeing that problem in the latest update!

[laurenmrice]

@joshblack The $focus-inverse looks good in the light themes. But for the dark themes, the button still gets incorrect focus styling. The focus around the button should be blue and not white.

In storybook:

[joshblack]

@laurenmrice great point, thanks! I'll make an update today

[joshblack]

@laurenmrice just pushed up the change so that the button uses $focus-inverse. Let me know if that worked!

[laurenmrice]

It looks good to me now! 👍

Side note: Eventually design is going to add another focus color token for $focus-inset that is inverse for these situations when a button appears on an inverse background. It will help improve some of the color contrast.