fix(Popover): adjust popover content placement

[dakahn]

Closes #10286

Minor adjustment to the placement of the popover content which should line up the caret (pointy thing) with the end of the text padding

Changelog

Testing / Reviewing

make sure whats compiled and on netlify matches the above screen shot 👍🏾

[netlify]

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

🔨 Explore the source changes: 9ffc2f0

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

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

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 9ffc2f0

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

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

[netlify]

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

🔨 Explore the source changes: 9ffc2f0

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

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

[joshblack]

@laurenmrice @dakahn this might be coming up due to some of the changes we made to the placement logic and I wanted to see what you all felt like was the right set of trade-offs.

When looking at the popover, we have two pieces: the caret and the overall box

When we are placing these two pieces, everything is relative to the trigger. As a result, we can only place these items in the center of the trigger, or left/right-aligned

Unfortunately, we can't really control how much distance there is between the edge of the content and the position of the caret.

If we want to control the distance between the edge of the content and the position of the caret, then unfortunately we lose the ability to center the caret relative to the trigger 😞 This is a trade-off and I'm curious what you all think / which one we want to pick.

I'll also share this with the team to see if they have any other thoughts on how to tackle this!

[joshblack]

Notes from our meeting today:

It seems like we need to:

• Revert the changes to the default placement so that the edge of the popover aligns to the edge of the trigger
• Add in a caret only translation that follows the formula:
  • Center popover
  • Translate half the height (or width) of the caret
  • Add the popover padding value

[abbeyhrt]

@dakahn Is this ready for review? I wasn't sure based on the comments above 🙂

[dakahn]

@abbeyhrt should be good for a review now 👍🏾

[laurenmrice]

For some reason the build/preview keeps failing, once it's fixed I can review 🙂.

[dakahn]

@laurenmrice should be good to go at this link. If that's still weird shift-click the reload button -- might be a caching problem

[laurenmrice]

The alignments left-bottom, left-top, right-bottom, and right-top are having some misalignment issues when the caret prop is set to false.

---

It should look like this spec:

---

All the other alignments look great!

[dakahn]

@laurenmrice ACK! Great catch. Totally missed that. On it 👍🏾

[laurenmrice]

Looks good to me now D.A.! Thank you! ✅