Add external dialog example (#2887)

This PR adds an example that shows you how to make your dialogs pop
outside of the Tldraw component and go fullscreen.

Closes TLD-2191

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Try out the "External dialog" example.
2. Open the keyboard shortcuts dialog (or any dialog).
3. The dialog should be centered in the browser window, not just the
tldraw component.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Dev: Added an example for dialogs that go outside the component.
This commit is contained in:
Lu Wilson 2024-02-29 09:44:19 +00:00 committed by GitHub
parent 42865a5b70
commit 8df5a22ad9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 0 deletions

View file

@ -0,0 +1,13 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
// This CSS file overrides the default styles for dialogs
import './external-dialog.css'
export default function ExternalDialog() {
return (
<div style={{ margin: 32, width: 600, height: 400 }}>
<Tldraw />
</div>
)
}

View file

@ -0,0 +1,10 @@
---
title: External dialog
component: ./ExternalDialog.tsx
category: ui
priority: 3
---
---
You can make dialogs pop outside of the `Tldraw` component by overriding our default styles.

View file

@ -0,0 +1,3 @@
.tlui-dialog__overlay {
position: fixed;
}