Remove the style component from ui widgets

[ickshonpe]

Objective

Widgets aren't flex containers and shouldn't have a style component.

fixes: #6879. #6717, #4009, #2249
related: #6807, #6743, #6724. #5502

Solution

Remove the style component from the UI widget bundles.

Changelog

• removes the text_constraint function
• removes the style field from TextBundle, ImageBundle, and ButtonBundle
• changes to flex_node_system + text_system to support unstyled nodes
• changes text example to use new TextBundle
• adds a ui layout example (produces the screenshot below)

Additional Information

• Work in progress.
• Painful rewriting the examples with all the nested with_children. It really needs Add EntityCommands::with_child and EntityMut::with_child #6716 or an equivalent.

Progress

[mockersf]

The style component is not just for flex containers, it's also for items. Currently it contains both. Removing it from nodes like image and friends would mean adding an extra layer of nodes each time to specify those properties, I don't see that as a good idea?

[ickshonpe]

The style component is not just for flex containers, it's also for items. Currently it contains both. Removing it from nodes like image and friends would mean adding an extra layer of nodes each time to specify those properties, I don't see that as a good idea?

Yes the extra boiler plate is a really annoying downside. It will be a lot easier with with_child though, then you just have:

commands.spawn(Nodebundle {
  style: Style {
    min_size: Size::new(Val::Px(100., 100.),
    ..Default::default()
  },
  ..Default::default()
})
.with_child(ImageBundle::new(image_handle));

which isn't so bad.

At the moment the style component doesn't work correctly for the image and text bundles, and there are PRs that fix some of those problems with specific hacks. And it definitely can all be made to work. But then if there are more widget bundles added then there probably would need to be more hacks for those too etc.

[mockersf]

I would prefer to wait for #5513 and split flex settings between flex container and flex items then only have the relevant component, than removing style completely and adding an extra layer everywhere

[ickshonpe]

I would prefer to wait for #5513 and split flex settings between flex container and flex items then only have the relevant component, than removing style completely and adding an extra layer everywhere

Think you might be right about splitting the style settings, and after messing around with this I think I have another way to fix the padding issue. Putting it aside for now.