feat(popover): add popover component and initial styles

[joshblack]

Closes #7713

This PR implements the initial spec for the Popover component, a utility for rendering UI on a layer that sits above the current UI. Currently, it handles the follow situations from the spec in the issue:

• Variants
  • With caret
  • Without caret
  • Light
  • High contrast
• Alignment (to the trigger element)
  • Bottom (center, left, right)
  • Top (center, left, right)
  • Right (center, top, bottom)
  • Left (center, top, bottom)
• Dimensions
  • Width (with max)
  • Padding This will be implement for layouts that use it since the component can both render text and things like menus

Changelog

New

• _popover.scss in packages/components
• src/components/Popover in packages/react

Changed

• Update our useId helper to reference canUseDOM from a shared environment.js file

Removed

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit c4aee59

https://deploy-preview-7684--carbon-components-react.netlify.app

[netlify]

Deploy preview for carbon-elements ready!

Built with commit c4aee59

https://deploy-preview-7684--carbon-elements.netlify.app

[laurenmrice]

Lookin good! 🎉 I have a couple different comments around alignment and spacing:

---

• When the caret is positioned top/bottom and left/right. The caret needs to be 16px from that specified edge.

---

Examples story:

• There is a tooltip that comes up as well as a popover. For these examples shouldn’t we only have the popover appear here?

• For the 48px icon buttons, for demoing purposes on this story we need to move the popover over so the caret center aligns with the button, instead of aligning to the container. I can show other different directions with specs if that would be helpful.

---

Playground story:

• Can we bring the popover more into view on the page, so when people try to play with it they can see the popover better?

[joshblack]

@laurenmrice updated! I fixed the caret positioning so it should be good, I also excluded the dev-only stories like I mentioned in Slack so it should just be the playground now 👀

[laurenmrice]

Looks good to me ! 🙌🏻

[joshblack]

Let me know if you have any questions @tay1orjones @emyarod @tw15egan !

[emyarod]

are some of the stories missing from the storybook preview? Default and Examples aren't appearing

[emyarod]

we've been avoiding this but have we already dropped support for IE?

[joshblack]

@emyarod the Popover work is targetting post-IE11 (v11) stuff 👀

[tw15egan]

Can all this extra stuff in the story file be removed?

[joshblack]

I figured we could keep it for now until we figure out a better alignment story that we can use to verify (or only enable ti for development but not for production kind of thing)

[joshblack]

@emyarod correct, some of them are hidden since they are more-so for development working on it versus intended to be used by the end-user. I just don't think we have a good example of a story to use for alignment yet so it's just hidden for now while we figure that out 👀

[tw15egan]

LGTM 👍 ✅