Skip to content

Conversation

@metonym
Copy link
Collaborator

@metonym metonym commented Nov 30, 2025

Related #2150

Closes #309, closes #835

Cherry-picks only Portal-related changes, omitting FloatingPortal for now.

Portal would immediately unblock Modal usage by consumers. FloatingPortal is better suited for internal usage with tooltips/popovers etc..

This adds a new Portal component that renders its content into a fixed container appended to document.body. This enables components like modals, tooltips, and dropdowns to escape parent overflow constraints and z-index stacking contexts, which is essential for proper layering and positioning in complex UI layouts.

Changes

  • Add Portal component that renders content into a fixed container in document.body
    • Implement a shared container approach with automatic cleanup when all instances unmount

Usage

<script>
  import { Portal } from "carbon-components-svelte";
</script>

<div>
  <Portal>
    Parent is document.body, not div
  </Portal>
</div>

@metonym metonym marked this pull request as ready for review November 30, 2025 20:11
@metonym metonym merged commit 72818c0 into master Nov 30, 2025
7 checks passed
@metonym metonym deleted the metonym/portal branch November 30, 2025 20:14
@metonym
Copy link
Collaborator Author

metonym commented Dec 1, 2025

Released in v0.95.0

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.

Modals when the svelte part of a website isn't full-width Modal position inside UIShell with a Header

1 participant