RichTooltip/Popover component - hds-anchored-position modifier [01]

[didoo]

📌 Summary

This PR is part of a larger set of PRs: see #2016

It's mainly a porting (with cleanup/refactoring) of #1947

This PR introduces a modifier built around the Floating UI library, to provide:

• anchoring (where an element position is “anchored” to a target element)
• collision detection (when the position of the element in relation to the anchor is changed dynamically to avoid collision with the browser window/viewport).

For details about why we opted for Floating UI instead of Popper.js refer to this RFC document: https://docs.google.com/document/d/1ey8LVQn0sA0bPbKoaz93ZoYVO1cLcbXUeg1o-tf6LIY/edit

🛠️ Detailed description

In this PR I have:

• introduced a custom hds-anchored-position modifier whose responsibility is to:
  • identify the different DOM elements (anchor element, floating element, arrow element)
  • process the options provided to the modifier and create a list of Floating UI middleware functions to invoke
  • define an async function that invokes the Floating UI computePosition main function
  • process the returned values/state of Floating UI and apply the computed coordinates to the floating and arrow elements
  • invoke the Floating UI autoUpdate function
  • assign the "cleanup" function to the modifier's teardown
• added a unit and integration tests for the modifier
  • the intent is to avoid testing the Floating UI functionality, but to make sure the options are correctly read and processed by the underlying code logic

Notice: while initially the modifier was called hds-float-popover and contained references to the "toggle" and "popover" elements, on a second thought we decided to rename it hds-anchored-position (inspired by this) and generalize code to be more agnostic and remove all the references to "trigger" and “popover” (the modifier itself doesn't know if these concepts, which are related to the "popover" entity)

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-3211 (Main task)

RFC document: https://docs.google.com/document/d/1ey8LVQn0sA0bPbKoaz93ZoYVO1cLcbXUeg1o-tf6LIY/

---

👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

• A changelog entry was added via Changesets if needed (see templates here)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Apr 30, 2024 2:20pm
hds-website	✅ Ready (Inspect)	Visit Preview	Apr 30, 2024 2:20pm

[KristinLBradley]

Added a few comments/questions

[didoo]

@alex-ju just a heads up that in 12a7583 I've slightly changed the API of the modifier, flattening the named arguments (for simplicity, and because Ember complained in some cases when I was overwriting some properties)

(which also means: can you review the last 3 commits? thanks)

[alex-ju]

Reviewed the code and it looks/works well!
It makes sense to have the arrow-related settings grouped, but flattening it makes the in-line modifier call much simpler as it does require an extra hash within the call (e.g. {{hds-anchored-position '#anchor' arrowSelector='#arrow' }} instead of {{hds-anchored-position '#anchor' arrowOptions=(hash selector='#arrow') }})

[didoo]

Decided to merge this directly to main to speed up the adoption of the modifier in other components, if needed.