Add one hidden example for Labs/observers ResizeController usage #970
Conversation
|
A live preview of this PR will be available at the URL(s) below. https://pr970-c73b471---lit-dev-5ftespv5na-uc.a.run.app/playground/#sample=examples/observers-resize-controller |
| </svg>`; | ||
|
|
||
| /** | ||
| * `mock-drawer` imitates a menu drawer on the page. Clicking this drawer |
There was a problem hiding this comment.
I'm still kind of so-so on the drawer as a way to resize the element. I think it'd be nice to see something like what Shoelace uses to resize samples: https://shoelace.style/
There was a problem hiding this comment.
Agree that the shoelace resize is very nice - thanks for referencing that! I think the reason I added the "menu" is because the divider between the playground source code and preview mimics the behavior and UI of the resize divider that Shoelace has. And I want something that explicitly causes the host to resize without it feeling like a window resize event.
That said, we could definitely have two dividers. One between the code and preview, and another on the right hand side that matches Shoelace. Would we want it to have the same drag behavior?
AndrewJakubowicz
changed the title
|
Added @sorvell's feedback of changing the icon on the drawer to be an "expand" and "contract" arrow based on state. |
Note: For easier reviewing, I'm splitting out the labs/observers example playgrounds into isolated PRs. There will be a final PR that un-hides them.
This change adds a small hidden
ResizeControllerexample (the first demo from the labs observers talk).View the playground example at: /playground/#sample=examples/observers-resize-controller
Add
Test plan
Tested manually on latest Chrome, Safari and Firefox.