Addition of floating UI helpers

[brenner-company]

The addition of a floating UI modifier & component for further use within other components that use popovers, dropdowns, etc.

The modifier & component are created with the use of https://floating-ui.com/.

This component (& modifier in a more limited way) can:

• automatically position a floater according to a placement value
• flip the floater if there is insufficient space on the default placement side
• negate clipping by a (parent) container with a defined overflow property (auto, scroll, etc.) by utilising a fixed position
• automatically position and flip a predefined arrow element according to the placement value
• automatically hide the floater when the reference element is out of view/bounds

What still must be done is:

• create a Storybook add-on that provides the scrolling/overflow preview I included within the story (reference element needs to be centered within container when the story is loaded)
• move example styling of reference, floater & arrow to a better location?
• provide correct tests for the modifier & component

See #333 for additional information.

[brenner-company]

@Dietr @Windvis I think this one is good to go 👍 Even did a small test within the auDropdown component and it seems to work well.

I'll just wait for a final OK from one of you to merge this.

[Windvis]

Nice work 👍!

For now I think it would be better to keep this functionality "private", so only available for internal use in Appuniversum. If we want to use the functionality in apps as well I think a dedicated generic floating-ui addon would be better suited.

If we go for the private variant I think it makes sense to create an addon/private folder where we can store things. Since we now support only 3.28+ we can remove the app reexports and simply import the private component / modifier where needed without it being available in the "global" template scope.

[Windvis]

(Also, FYI, I don't think Dieter is working on Appuniversum anymore)

[brenner-company]

Nice work 👍!

Thanks!

For now I think it would be better to keep this functionality "private", so only available for internal use in Appuniversum. If we want to use the functionality in apps as well I think a dedicated generic floating-ui addon would be better suited.

If we go for the private variant I think it makes sense to create an addon/private folder where we can store things. Since we now support only 3.28+ we can remove the app reexports and simply import the private component / modifier where needed without it being available in the "global" template scope.

Sure thing!

Regarding Storybook, I would rather like to keep that story so that Chromatic can run visual tests on it. What would be the best way to go (knowing the component is for internal usage only): keep the story visible in the sidebar but under something like 'internal usage only' or hide the story using a CSS solution mentioned here: storybookjs/storybook#9209 (an internal solution to hide stories in the sidebar is not implemented yet sadly). What do you think?

[brenner-company]

(Also, FYI, I don't think Dieter is working on Appuniversum anymore)

Oh, did not know that 😕 Thanks for giving me a heads-up .

[Windvis]

Also, since the component version has a bug, it probably makes sense to not include it for now? I would push a new branch with the current state and remove the component version + docs from this one. That way we can pick it back up when the issue is resolved?

[brenner-company]

I would push a new branch with the current state and remove the component version + docs from this one. That way we can pick it back up when the issue is resolved?

Done! Those changes will be available inside the floating-ui-helpers-with-component-variant branch.

[brenner-company]

@Windvis I think this one is good to go 🤞 Feel free to give the final ok. (I'll finalise the integration of the floating-ui helper within the dropdown component when this is done)