Context

In Bevy UI, hierarchies of nodes can be hidden by tweaking two different properties, with slightly different effects, exactly like in CSS:

• Visibility. Setting the is_visible field of the Visibility component of a node entity to false, will make the node and its descendants invisible. The layout engine will still include those UI elements to determine their and other elements' position.
• Display. It is an enum that is part of the Style component of a node entity. If the variant is set to Display::None, the element and its descendants will not be included in the UI layout, therefore they won't occupy any space.

Assignment

You should create a new interactive example where the user can manually edit both properties at runtime for a single node (called target below).

Other, always visible nodes should surround the target (ideally at least one before and one after) to enhance and demonstrate the difference between the two different properties.

To prevent non meaningful states that can confuse the user, only three states should be valid:

1. Element is visible. Visibility::is_visible == true AND Display::Flex,
2. Element is collapsed. Visibility::is_visible == true AND Display::None,
3. Element is invisible but occupies space. Visibility::is_visible == false AND Display::Flex.

The user experience for toggling between these states should be straightforward and chosen with care.

Optional: If you are able to demonstrate that an invisible element won't respond to any interaction, you'll get a cookie! 🍪 Be wary that this is not the focus of the example, so don't make its code stand out too much!

Example

I propose a mockup that you can copy if you struggle with finding a good UI design:

[button (set visible)] [button (set invisible)] [button (set collapsed)]
[target] <-- maybe a button that can give some interaction feedback! 🍪
[some text]