PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots
History
Gabriel Lee 260a31db81
feat: add new prop to force mobile mode layout (#1734) 
Adds a new prop to force mobile mode layout, similar to how the
?layout=mobile query param works.

An alternative of having the prop accept a breakpoint number was
considered, but while that provides more flexibility, it's best if
usages of tldraw don't need to know about the internal workings of
tldraw. (e.g. someone might use breakpoint 7 to get the "desktop" mode,
but that won't be reliable when in the future more breakpoints are
added)


![licecap-output-1](https://github.com/tldraw/tldraw/assets/5616556/b08fa239-be4f-46c2-9a78-c53b453e4d1a)

![licecap-output-2](https://github.com/tldraw/tldraw/assets/5616556/9be55807-adc7-4253-8b20-757a07a8b157)

Closes #1709 

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

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

### Test Plan

1. `<Tldraw persistenceKey="tldraw_example" autoFocus
forceMobileModeLayout />`
2. notice that the layout stays in mobile mode no matter the width of
the screen

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

### Release Notes

- add new prop to force mobile mode layout

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-11 14:11:59 +00:00
..
Export-snapshots-Exports-with-arrow-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-none-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-arrow-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-in-dark-mode-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-leading-line-breaks-in-dark-mode-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-in-dark-mode-1-chromium-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-Exports-geo-text-with-trailing-line-breaks-in-dark-mode-1-Mobile-Chrome-linux.png Fix newlines in text geo shapes (#2059) 2023-10-10 12:58:28 +00:00
Export-snapshots-Exports-with-geo-fill-none-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-none-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-none-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-geo-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-note-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-draw-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-mono-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-sans-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-in-dark-mode-1-chromium-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00
Export-snapshots-Exports-with-text-font-serif-in-dark-mode-1-Mobile-Chrome-linux.png re-enable visual regression tests (#2056) 2023-10-10 12:33:16 +00:00