Fix: form visibility

[mturoci]

Moved the visibility handling logic to parent form component instead of dealing with it at component level.

There was also a minor spacing issue - we applied marginTop: 0 to :not(:first-child) selector. The problem is, this selector looks at the DOM (hidden elements are still present in the DOM), not whether the element is visible or not. I managed to fix it via CSS.

Closes #484
Closes #817

[lo5]

Any reason why this uses visibility: hidden instead of the previous display: none?
Also, we should find a non-js solution to spacing.

[mturoci]

Any reason why this uses visibility: hidden instead of the previous display: none?

Futurewise, display: none cannot be animated. This means that after resolving #229 (form components will be properly updated instead of recreated on props change), we can make toggled elements leave smoothly instead of snapping. Apart from that, there is not really much of a difference.

Also, we should find a non-js solution to spacing.

I tried to look for something better, but can try harder.

[mturoci]

Found a pure CSS approach for spacing. Added custom data attr data-visible to get info whether the element is currently visible or not. Then used > [data-visible="true"] ~ div' to select all direct form elements that are preceded by visible elements. This is a working solution for "first visual child and onwards.

Also added the needed functionality to horizontal (inline) part.

[mturoci]

• Rebased.
• Replaced visibility: hidden with display:none as discussed.
• Added example demonstrating the feature.

Screen.Recording.2021-01-20.at.11.36.21.AM.mov

Needs discussion: @lo5 this approach will not work for cases when visible is defined on elements in ui.buttons as it creates its own wrapper at component level. A few ways to resolve this:

• Shouldn't ui.buttons be deprecated in favor of ui.inline or you left it there just for the sake of not introducing a breaking change?
• Special case it within button component.

[mturoci]

Rebased against current master.

[lo5]

This PR causes a breaking change: the visible attribute has been removed from the API.

[mturoci]

TBH I don't remember the reasoning why visible was removed from each component. Adding it back to API should cause no harm as it is used anyway.

[mturoci]

• rebased
• reverted back visible prop per component to avoid breaking change
• special cased the button component to allow using visible prop even inside ui.buttons component.

[mturoci]

Rebased.

[mtanco]

@mturoci seeing similar behavior for Toggles, would that be handled automatically in this PR too or should I open a separate issue?

Wave 0.16.0

from h2o_wave import site, ui

page = site['/']

page['toggle'] = ui.form_card(
    box='4 4 4 4',
    items=[
        ui.toggle(name='hidden', label='You can\'t see me', visible=False),
        ui.toggle(name='shown', label='You can see me', visible=True),
    ]
)
page.save()

[mturoci]

@mtanco This PR fixes visibility for all the form items at once so no need to open a new issue.

[lo5]

@mturoci - what would be the minimal fix for this bug (without changes to the generator, or introducing changes to launch.json, precommit.js, etc.)?

[mturoci]

The minimal changes are moving visibility handling logic from component scope to form scope. The generator is updated so that every form component has a consistent visible prop, but we can go with hardcoding it as it was before ofc.

[mturoci]

@lo5 rebased against current master, removed all the extra stuff that is not necessarily part of the fix, removed the generator tweaks and settled back to specifying visible per each component.

[psinger]

@mturoci What is the status of this issue? Will it be fixed soon? Thanks!