[split-layout] Consider hiding the splitter when one of children is hidden

[limonte]

Description

When one of two children is hidden, the splitter doesn't make much sense. It's there is has cursor: ew-resize, but when user tries to resize nothing happens. Actually, flex-basis is getting changed, but is doesn't change anything visually:

Expected outcome

The splitter is hidden when one of children is hidden.

Actual outcome

The splitter is visible, but unusable.

Live Demo

https://crystal-sweater.glitch.me/

Steps to reproduce

[stefanuebe]

A small, programmatical workaround for that issue:

Create a css file "whatever.css" with the following content in your project's frontend, where you define a custom css variable.

[part="splitter"] {
    display: var(--vaadin-split-layout-splitter-display, block);
}

Import that css file, for instance at your app shell configurator or whereever needed:

@CssImport(value = "./whatever.css", themeFor = "vaadin-split-layout")

Now you can control the visibility by setting the above defined css variable. Since the visibility of the splitter is in most cases directly related to the split layout's state, it makes most sense to override the variable on the split layout itself:

private void setSplitterVisible(SplitLayout layout, boolean visible) {
    layout.getStyle().set("--vaadin-split-layout-splitter-display", visible ? "block" : "none");
}

(when you have a subclass of SplitLayout, you can of course integrate the above method into it directly)

You can now call this method whereever needed to show or hide the splitter progammatically, for instance in a grid selection listener, where details of the selected item are shown in the secondary part of the split layout:

private void onMainGridSelectionChange() {
    SampleComplexData data = mainGrid.asSingleSelect().getValue();
    detailContent.setVisible(data != null); // split layout secondary
    setSplitterVisible(mainSplitLayout, data != null);
}