New Component | Annotation (attachment, facehugger, metroid, or other name)

[aVileBroker]

This is a component which is fixed in position, and "attaches" itself to a component by ref. It could be rendered in a portal - we could probably do a ternary to control it, like <renderInPortal ? Portal : Fragment> .

It behaves similarly to the dropdown currently does, in that it will "flip" when it runs out of space. Ideally this should be used in Dropdown as well to replace the current intersectionObserver logic, and in doing so also complete #255 at the same time.

Props API:

• preferredPlacement?: 'above' | 'right' | 'bottom' | 'left';
• preferredAlignment?: 'start' | 'center' | 'stretch' | 'end';
• renderInPortal: boolean;
• StyledContainer?: StyledSubcomponent;

Given the preferred placement/alignment provided by the props - it should follow those unless it runs out of space, in which case it should "flip". I don't see the need to "flip" to center or stretch, but feel free to prove me wrong.

Rationale

I began writing this component as part of the Spotlight component for showing an annotation around the spotlight which tries to always stay in-view. When it goes near the right of the screen, it flips to the left. When it goes towards the bottom, it flips up, etc.

This is also useful for tooltips, and I'm sure our users will find other use-cases as well. This is not a simple problem to fix - which is exactly why having a component like this would make foundry powerful and sought-after.

If there is a library out there which we like, and isn't too large, I'm open to suggestion for simplifying this and potentially negating the need for it at all.

[aVileBroker]

I would love to also see a mobile friendly version of this, where the annotation goes full width (w/ gutters) and only clamps to the bottom/top of the elements.

Same could be done for tight landscape views, where the annotation is full height and clamps to the left/right sides of the target