Skip to content

[core] Animate Overlay2 content alongside backdrop#8098

Open
dokson wants to merge 1 commit into
palantir:developfrom
dokson:ac/fix-overlay2-content-animation
Open

[core] Animate Overlay2 content alongside backdrop#8098
dokson wants to merge 1 commit into
palantir:developfrom
dokson:ac/fix-overlay2-content-animation

Conversation

@dokson
Copy link
Copy Markdown

@dokson dokson commented May 4, 2026

Summary

Fixes #7781.

Overlay2 wraps backdrop and content in separate CSSTransition components, 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-content so 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 transitionName to Overlay2, so they don't share the bp6-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
  • Inspected compiled CSS to confirm :not() scoping
  • Manual smoke check in a browser with bare Overlay2, Dialog, Drawer (deferred to reviewer — local Windows env can't run the docs app reliably)

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.
@changelog-app
Copy link
Copy Markdown

changelog-app Bot commented May 4, 2026

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

  • Feature (Adding new functionality)
  • Improvement (Improving existing functionality)
  • Fix (Fixing an issue with existing functionality)
  • Break (Creating a new major version by breaking public APIs)
  • Deprecation (Removing functionality in a non-breaking way)
  • Migration (Automatically moving data/functionality to a new system)

Description

[core] Animate Overlay2 content alongside backdrop

Check the box to generate changelog(s)

  • Generate changelog entry

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Overlay2 content does not animate - only backdrop has CSS transitions

1 participant