Skip to content

layoutComponentImprovements feature flag not working in dev bundles #9571

@sissbruecker

Description

@sissbruecker

Description

When using a dev bundle, either the default one or a custom one, then the layoutComponentImprovements feature flag does not work in that the styles that it should define are not added to the page.

Looks like the logic here doesn't work for some reason:

// Layout improvements are part of a feature for Flow users where children that have been configured to use full size
// using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in
// the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize`
// class.
const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements;
const layoutImprovementStyles = css`
::slotted([data-height-full]) {
flex: 1;
}
::slotted(vaadin-horizontal-layout[data-height-full]),
::slotted(vaadin-vertical-layout[data-height-full]) {
min-height: 0;
}
`;
export const verticalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles];

It does work in production bundles, and when using vaadin.frontend.hotdeploy=true.

Expected outcome

The styles for the feature should be defined, regardless whether you use a dev bundle or not.

Minimal reproducible example

Example project: project.zip

Steps to reproduce

  1. Start the project
  2. Verify that the style rule above is not applied to the nested layout
  3. Enable vaadin.frontend.hotdeploy in application properties, restart
  4. Verify that the style rule above is now applied to the nested layout

Environment

Vaadin version(s): 24.8

Browsers

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions