WIP: feat(react-headless-components-preview): add Popover & positioning#36006
Draft
mainframev wants to merge 5 commits intomicrosoft:masterfrom
Draft
WIP: feat(react-headless-components-preview): add Popover & positioning#36006mainframev wants to merge 5 commits intomicrosoft:masterfrom
mainframev wants to merge 5 commits intomicrosoft:masterfrom
Conversation
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
f26ae3e to
22f36ba
Compare
|
Pull request demo site: URL |
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
22f36ba to
e9fef9d
Compare
📊 Bundle size report
🤖 This report was generated against c2bf30e8260326f8e7c018853e4e86cbfae0d2d0 |
mainframev
force-pushed
the
feat/headless-popover-v2
branch
2 times, most recently
from
08029d0 to
84ccbd1
Compare
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
84ccbd1 to
41aae8b
Compare
…built on native CSS anchor positioning
mainframev
force-pushed
the
feat/headless-popover-v2
branch
2 times, most recently
from
1fef504 to
f9b65d7
Compare
…n spec-pure CSS anchor positioning
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
f9b65d7 to
c72c4f4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a headless Popover (Popover, PopoverTrigger, PopoverSurface) to the @fluentui/react-headless-components-preview package, positioned via the native CSS Anchor Positioning API instead of floating-ui
Supported PositioningProps: position, align, offset, coverTarget, autoSize, matchTargetSize, strategy, pinned, positioningRef, fallbackPositions, overflowBoundary, custom target, positioning shorthands ('below', 'start' etc).
Feature with v9
@fluentui/react-popoveropen/defaultOpen/onOpenChangeopenOnHover+mouseLeaveDelayopenOnContext(right-click, cursor-anchored)withArrow(+ consumer-owned arrow CSS via[data-placement])trapFocus+aria-modal/role="dialog"useFocusScope)disableAutoFocuscloseOnScroll,closeOnIframeFocusinline(skip top-layer)mountNode(portal target)positioning.position+positioning.alignpositioning.offset(number or{ mainAxis, crossAxis })positioning.coverTargetpositioning.fallbackPositionspositioning.autoSize(true/'width'/'height')positioning.overflowBoundarypositioning.matchTargetSize: 'width'positioning.strategy: 'absolute' | 'fixed'positioning.pinnedpositioning.target(custom anchor)positioning.positioningRef(imperativesetTarget)positioning.flipBoundaryRelated Issue(s)