Currently the PopUpPanel, wich is the base for all floating content besides modals, renders its own <div> tag and prohibits to add classes to the internal managed ones. The class fritz2-popup-visible which is used to automatically show the popup upon the internal open-state also sets some z-index (to 30 currently), which is totally unnecessary and contradivts the headless approach.
So we propose to investigate the following changes:
remove the fixed z-index from the PopUpPanels root tag
make the root-tag customizable by some kind of tag-factory like we offer for the render*-functions with the into-parameter or the tag-parameter for the TagFactory of the headless bricks. This way the DOM structure could be optimized by the user.
in order to make the above senseful, the custom tag must be addionally stylable by the user. So it must be possible to add classes to it in a static or reactive way. This should be possible now, as we moved to the floating-ui lib recently. (Historically we based our first implementation on the former popper-js lib, which in contrast to floating-ui has controlled the styling by itself. That was the main reason to make the root-node of the popup untouchable for the user)
Currently the
PopUpPanel, wich is the base for all floating content besides modals, renders its own<div>tag and prohibits to add classes to the internal managed ones. The classfritz2-popup-visiblewhich is used to automatically show the popup upon the internalopen-state also sets somez-index(to30currently), which is totally unnecessary and contradivts the headless approach.So we propose to investigate the following changes:
z-indexfrom thePopUpPanels root tagroot-tag customizable by some kind oftag-factory like we offer for therender*-functions with theinto-parameter or thetag-parameter for theTagFactoryof the headless bricks. This way the DOM structure could be optimized by the user.root-node of the popup untouchable for the user)