refactor: apply content styles on part instead of slotted element#11458
refactor: apply content styles on part instead of slotted element#11458sissbruecker merged 9 commits intomainfrom
Conversation
| border-inline-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width)); | ||
| } | ||
|
|
||
| vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) { |
There was a problem hiding this comment.
I'm not sure if this needs changes?
There was a problem hiding this comment.
Looks like the safe inset behavior doesn't work correctly for the Aura theme in most cases (only top works). This is also reproducable on main. Probably better to fix this as a follow up.
There was a problem hiding this comment.
Yeah, the safe area insets are likely a bit broken, at least in the aura.html dev page, which has custom CSS to manage those.
| :host([has-navbar]), | ||
| :host([has-navbar]:not([overlay])) [part='drawer'] { |
There was a problem hiding this comment.
This seems wrong, as first selector always matches when a navbar is visible, and the second selector doesn't add anything. The custom property is inherited by the drawer part from the host.
The point of this rule is that app layout handles the safe area inset in certain cases, and then makes it unnecessary for other contained parts to handle it.
For example, when the navbar is visible, it handles the top safe area, so the drawer and content parts don't need to care about it anymore (there might be components within them that want to account for the safe area themselves).
There was a problem hiding this comment.
Removed the rule for the content part. The inset is now applied as padding on the host element itself. This works out as the padding for the host is the maximum of the navbar height or the safe inset. As the navbar includes the inset itself, the content is always properly offset due to the navbar height.
| } | ||
|
|
||
| :host([has-drawer]:not([overlay])[drawer-opened]) [content] { | ||
| :host([has-drawer]:not([overlay])[drawer-opened]) { |
There was a problem hiding this comment.
Similarly here: the drawer part wants to know about the left safe area inset (so we shouldn't change it to zero on the host), but prevent the content area from handling it again (so set it to zero on the content), as the drawer is already pushing the content out from under the safe area.
There was a problem hiding this comment.
This rule should be obsolete now that the host handles the inset. Like above, this should work because it offsets the content to at least the drawer width (when drawer is visible) or the safe inset, whichever is greater.
Required as color-scheme can be changed on this element.
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
|
2 participants
Description
Updates Aura App Layout theme to apply content styles on the content part instead of slotted content elements:
Fixes #11431
Type of change