Objective

Continue improving the user experience of our UI Node API in the direction specified by Bevy's Next Generation Scene / UI System

Solution

As specified in the document above, merge Style fields into Node, and move "computed Node fields" into ComputedNode (I chose this name over something like ComputedNodeLayout because it currently contains more than just layout info. If we want to break this up / rename these concepts, lets do that in a separate PR). Style has been removed.

This accomplishes a number of goals:

Ergonomics wins

Specifying both Node and Style is now no longer required for non-default styles

Before:

commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));

After:

commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});

Conceptual clarity

Style was never a comprehensive "style sheet". It only defined "core" style properties that all Nodes shared. Any "styled property" that couldn't fit that mold had to be in a separate component. A "real" style system would style properties across components (Node, Button, etc). We have plans to build a true style system (see the doc linked above).

By moving the Style fields to Node, we fully embrace Node as the driving concept and remove the "style system" confusion.

Next Steps

• Consider identifying and splitting out "style properties that aren't core to Node". This should not happen for Bevy 0.15.

Migration Guide

Move any fields set on Style into Node and replace all Style component usage with Node.

Before:

commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));

After:

commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});

For any usage of the "computed node properties" that used to live on Node, use ComputedNode instead:

Before:

fn system(nodes: Query<&Node>) {
    for node in &nodes {
        let computed_size = node.size();
    }
}

After:

fn system(computed_nodes: Query<&ComputedNode>) {
    for computed_node in &computed_nodes {
        let computed_size = computed_node.size();
    }
}