[popups] Allow Positioner parts to be omitted
#1668
Conversation
atomiks
added
the
component: popover
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
atomiks
force-pushed
the
fix/allow-omit-positioner
branch
from
4bf1062 to
03bdef5
Compare
| @position-try --block-end { | ||
| position-area: block-end; | ||
| } | ||
| @position-try --block-end-start { | ||
| position-area: block-end span-inline-end; | ||
| } | ||
| @position-try --block-end-end { | ||
| position-area: block-end span-inline-start; | ||
| } | ||
| @position-try --block-start { | ||
| position-area: block-start; | ||
| } | ||
| @position-try --block-start-start { | ||
| position-area: block-start span-inline-end; | ||
| } | ||
| @position-try --block-start-end { | ||
| position-area: block-start span-inline-start; | ||
| } | ||
| @position-try --inline-start { | ||
| position-area: inline-start; | ||
| } | ||
| @position-try --inline-start-start { | ||
| position-area: inline-start span-block-end; | ||
| } | ||
| @position-try --inline-start-end { | ||
| position-area: inline-start span-block-start; | ||
| } | ||
| @position-try --inline-end { | ||
| position-area: inline-end; | ||
| } | ||
| @position-try --inline-end-start { | ||
| position-area: inline-end span-block-end; | ||
| } | ||
| @position-try --inline-end-end { | ||
| position-area: inline-end span-block-start; | ||
| } |
There was a problem hiding this comment.
Don't really know if there's any easier way to ensure center-aligned popups don't overflow their inline axis (aka something close to shift() in Floating UI)
position-try-fallbacks:
--block-end, --block-start-start, --block-start-end, --block-end-start, --block-end-end;
|
CSS anchoring demo isn't final but this solves the issue of Positioner parts not being allowed to be omitted |
github-actions
bot
added
the
PR: out-of-date
There was a problem hiding this comment.
Menus don't work without the Positioner as this part is also responsible for rendering FloatingNode and CompositeList.
Additionally, since Positioners render InternalBackdrops, modality won't fully work without them. Both of these issues could be solved by moving all non-positioning logic from Positioners to Popups
There was a problem hiding this comment.
Whenever the popup is open, both horizontal and vertical scrollbars appear on the viewport
There was a problem hiding this comment.
I noticed this too and I think this is some bug with CSS anchoring in scroll containers :\
|
Could the |
Closes #1663
CSS anchor positioning preview: https://deploy-preview-1668--base-ui.netlify.app/experiments/css-anchor-positioning
Limitations:
Arrowparts withoutPositioner--transform-origindoesn't work