feat(tooltip,tourtip,infotip): added popper support

[agliga]

Fixes #1424

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

• Added support for popperjs. Changed all out examples to use popper
• I removed the use of makeup expander, since all it seems like it was doing was to toggle aria-expanded. We can revisit this if needed, but it doesn't seem necessary.
• I did not touch any storybooks since they are static. The old code should work as if if the users opt not to use popper (so there is no breaking changes)

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue
• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[ianmcburnie]

Just noticed this on the popper documentation:

Safari has unfortunate quirks regarding updating the position of DOM elements. We have filed WebKit bugs for these, so hopefully they will be fixed in the future.

Might be worth looking at those issues to make sure we are comfortable with them. We have to support back to Safari 12.

[ArtBlue]

Just noticed this on the popper documentation:

Safari has unfortunate quirks regarding updating the position of DOM elements. We have filed WebKit bugs for these, so hopefully they will be fixed in the future.

Might be worth looking at those issues to make sure we are comfortable with them. We have to support back to Safari 12.

Those issues look to be related to scrolling, one of them over-scrolling (rubber band) effect. I can see why they would occur. If the intent of the library is to attach one element to another positionally and also to avoid viewport boundaries and reposition itself within the viewport, I can see how scrolling would create a "conflict of interest" here.

[agliga]

Just noticed this on the popper documentation:

Safari has unfortunate quirks regarding updating the position of DOM elements. We have filed WebKit bugs for these, so hopefully they will be fixed in the future.

Might be worth looking at those issues to make sure we are comfortable with them. We have to support back to Safari 12.

Those issues look to be related to scrolling, one of them over-scrolling (rubber band) effect. I can see why they would occur. If the intent of the library is to attach one element to another positionally and also to avoid viewport boundaries and reposition itself within the viewport, I can see how scrolling would create a "conflict of interest" here.

Yah from what i see that on safari it would act just like what we had before. So it wont be any different from our previous implementation of tip overlays.

[ArtBlue]

LGTM.

[ianmcburnie]

Is[data-popper-placement] added with JavaScript? Or is it declared in the base markup? I'm guessing the former as I don't see the attribute displayed in the example code. Which leads me to wonder whether we should be approaching this in a progressive enhancement fashion. Our existing modifiers and CSS work for most simple cases, so I don't think we need to always throw that away. It gives us a pretty good sensible default without the need for JS. Perhaps instead we should be progressively enhancing our existing modifiers (i.e. switching out tooltip__pointer tooltip__pointer--left for the popper equivalent). Let's chat offline about this.

[ianmcburnie]

Can we please add a test story for popper overlay inside of container with overflow hidden. Or even showcase that in the main docs.

[ianmcburnie]

Not seeing the overlay or pointer appear in this example in Safari:

Here it is in Chrome:

[agliga]

Will wait for next release to get all the cleanup.

The base branch was changed.

[agliga]

Okay, should be ready for re-review. Updated to floating ui, should be working.

[ArtBlue]

Looks good!

[ianmcburnie]

On tourtips, the pointers look broken (in safari & chrome):

[ianmcburnie]

Isn't this Infotip pointer supposed to flip from bottom to top when the info top repositions itself?

[agliga]

Isn't this Infotip pointer supposed to flip from bottom to top when the info top repositions itself?

Fixed, this was due to doing !== instead of != as the docs recommended.

[agliga]

On tourtips, the pointers look broken (in safari & chrome):

Added a 20px padding on arrow (The padding on the arrow is based on the border radius values so it doesn't look like this).

[LuLaValva]

Looks awesome! I'm excited to see this on other floating elements like listbox and date-textbox.

It would have probably been nice to do prettier for main.js in a separate PR but I'll let it slide

[ianmcburnie]

I would like to still keep the examples of infotip, tooltip, tourtip that we had without popper, and then added a dynamic positioning section for each which shows what accommodations we have to make in the markup/css (if any) for a 3rd party module like popper.

[ianmcburnie]

Noticing a couple of discrepancies between positioning on prod storybook vs branch in tooltip stories:

tooltip -> expanded

Tooltip -> pointer -> left (and all others)

[agliga]

Noticing a couple of discrepancies between positioning on prod storybook vs branch in tooltip stories:

tooltip -> expanded

Tooltip -> pointer -> left (and all others)

Fixed this. I had removed the margin on bubble which was breaking in other places. I changed the positioning of the tip to get it to work.

[ArtBlue]

Looks fine to me, but we should get a confirmation approval from Ian since he had the bulk of feedback.

[ianmcburnie]

Great work @agliga