Make the Popover scrolling and position behavior adapt to the content changes #23159
Conversation
This file contains 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
youknowriad
added
[Type] Enhancement
youknowriad
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
youknowriad
changed the title
|
Size Change: +26 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
youknowriad
force-pushed
the
fix/popover-auto-height
branch
from
508e434 to
fa5395d
Compare
ellatrix
reviewed
Jun 15, 2020
| const isMobileViewport = useViewportMatch( 'medium', '<' ); | ||
| const [ animateOrigin, setAnimateOrigin ] = useState(); | ||
| const slot = useSlot( __unstableSlotName ); | ||
| const isExpanded = expandOnMobile && isMobileViewport; | ||
| const [ containerResizeListener, contentSize ] = useResizeObserver(); |
There was a problem hiding this comment.
I guess we can't use https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver?
There was a problem hiding this comment.
Not for the moment (IE11) but this hook is widely used in Gutenberg already and it works pretty well.
There was a problem hiding this comment.
We also already have an interval running, so we could use ResizeObserver and have the interval as a fallback.
There was a problem hiding this comment.
Why such complexity while the hook is already there and works properly? I'd rather find a way to remove the interval personally.
There was a problem hiding this comment.
Yes, would be great if we could remove the interval
ellatrix
approved these changes
Jun 16, 2020
This was referenced Jun 24, 2020
Closed
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Requirement for #22789
This PR updates the Popover behavior to make its height adapt to its content and refresh the max-height and position accordingly.
To test this, I added a story to the Popover component where you can increase the height of the popover dynamically.
The inserter popover (used in the canvas inserter) though was incompatible with this behavior. because we can't have both height: 100vh for the popover and have the popover adapts to height at the same time. I adapted the inserter popover styles to fix this.
I'm also pretty sure this PR fixes some dropdown/popover scrolling issues (more menu, block settings). I'll have to retrieve the related tracked issues.
Testing instructions