[core] Animate Overlay2 content alongside backdrop#8098
Open
dokson wants to merge 1 commit into
Open
Conversation
Add a default fade transition to .bp6-overlay-content so that custom Overlay2 children animate in/out together with the backdrop. Dialog and Drawer define their own transitions on the same element with different durations/easings and are excluded via :not(). Other internal Overlay2 consumers (Popover, OverlayToaster) pass a custom transitionName so they do not share the bp6-overlay-* classes and are unaffected. Fixes palantir#7781.
Generate changelog in
|
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
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.
Summary
Fixes #7781.
Overlay2wraps backdrop and content in separateCSSTransitioncomponents, but only the backdrop had CSS transition rules in_overlay.scss. When closing an Overlay2 with custom content, the backdrop fades smoothly while the content stays fully opaque until the transition timeout fires and it abruptly disappears.This adds a default opacity fade to
.bp6-overlay-contentso the content animates in/out together with the backdrop. Dialog and Drawer define their own transitions on the same element (different duration/easing for Dialog, slide-in for Drawer), so they are excluded via:not(.bp6-dialog-container, .bp6-drawer).Other internal Overlay2 consumers (Popover, Popover-next, OverlayToaster) pass a custom
transitionNameto Overlay2, so they don't share thebp6-overlay-*enter/exit classes and are unaffected by this change.Reproduction from the issue: https://codesandbox.io/p/devbox/serene-visvesvaraya-k73346
Test plan
pnpm --filter @blueprintjs/core run compile(tokens, esm, cjs, esnext, css)pnpm --filter @blueprintjs/core run test— 1250 passed:not()scoping