Skip to content

refactor: MDL layout and view transitions styles#9665

Merged
jouni merged 17 commits intomainfrom
refactor/mdl
Jul 9, 2025
Merged

refactor: MDL layout and view transitions styles#9665
jouni merged 17 commits intomainfrom
refactor/mdl

Conversation

@jouni
Copy link
Member

@jouni jouni commented Jul 9, 2025

Add a wrapper element around [part=detail] to allow view transitions on different sized drawer elements in and out at the same time.

The only reason the wrapper is exposed as part="_detail-internal" is so that we can target it with view transitions. It’s considered as private API.

Reimplement view transition styles to take advantage of the new wrapper element, and reuse the same animations for all the modes and transition types (add/remove/replace) as much as possible.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jul 9, 2025

@jouni jouni merged commit 2e59969 into main Jul 9, 2025
10 checks passed
@jouni jouni deleted the refactor/mdl branch July 9, 2025 13:54
web-padawan added a commit that referenced this pull request Jul 9, 2025
* refactor: MDL layout and view transitions styles

* test: update screenshots

* Update master-detail-layout.html

* fix: vertical drawer size

* test: check position on the correct element

* test: adjust tests for masterMinSize and detailMinSize

* test: update test to use detailSize

* test: update snapshot

* chore: fix prettier warning in dev page

* test: remove test that is no longer valid with new logic

* test: check display on the wrapper element

* fix: move detail backdrop click listener to detail wrapper

* fix: align Lumo CSS with JS version

* chore: fix dev page formatting for icon

* chore: remove JSDoc for custom CSS properties

* chore: add prettier-ignore

* fix: split mode transition for RTL

---------

Co-authored-by: web-padawan <iamkulykov@gmail.com>
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 25.0.0-alpha3.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants