Add CSS Grid support to bevy_ui

[nicoburns]

Objective

An easy way to create 2D grid layouts

Solution

Enable the grid feature in Taffy and add new style types for defining grids.

Notes

• I'm having a bit of trouble getting #[derive(Reflect)] to work properly. Help with that would be appreciated (EDIT: got it to compile by ignoring the problematic fields, but this presumably can't be merged). This is now fixed

• The alignment types now have a Normal variant because I couldn't get reflect to work with Option. I've decided to stick with the flattened variant, as it saves a level of wrapping when authoring styles. But I've renamed the variants from Normal to Default.

• This currently exposes a simplified API on top of grid. In particular the following is not currently supported:

  • Negative grid indices Now supported.
  • Custom end values for grid placement (you can only use start and span) Now supported
  • minmax() track sizing functions minmax is now support through a GridTrack::minmax() constructor
  • repeat() repeat is now implemented as RepeatedGridTrack

• Documentation still needs to be improved. An initial pass over the documentation has been completed.

Screenshot

---

Changelog

• Support for CSS Grid layout added to bevy_ui
• Renamed the UiSystem::Flex system set to UiSystem::Layout

Migration guide

-The UiSystem::Flex system set has been renamed to UiSystem::Layout

[nicoburns]

Example added:cargo run --release --example grid if anyone want to play around with it.

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

[rparrett]

Just took a quick look at the docs for now. Hope to look closer and play with this later.

[nicoburns]

@rparrett The docs needs a full once-over by the way. I haven't paid any attention to docs yet. All the new types need docs, and quite a few of the existing style properties need updates to reflect how they work with CSS Grid.

[nicoburns]

The text wrapping isn't working properly, but I don't think that's grid specific. And I suspect it will be fixed by #7779

[ickshonpe]

Looks great. Having the default variants instead of optional fields is a really good compromise.
I'll try and rework my layout example and see how that goes.

[nicoburns]

@ickshonpe Scaling implemented :)

[ickshonpe]

@ickshonpe Scaling implemented :)

I really like the map_fn additions, convert looks so much better now.
My test example is working perfectly with scaling too:

https://github.com/ickshonpe/grid_layout

[nicoburns]

@ickshonpe I see you have repeated track definitions in your test example. I've added support for repeat(). So you can now do :

grid_template_columns: vec![GridTrack::px(100.).repeat(alignments.len())]
grid_template_rows: vec![GridTrack::auto()), GridTrack::px(80.)).repeat(justifications.len())]

instead of

grid_template_columns: iter::repeat(GridTrack::px(100.))
    .take(alignments.len())
    .collect(),
grid_template_rows: iter::once(GridTrack::auto())
    .chain(iter::repeat(GridTrack::px(80.)).take(justifications.len()))
    .collect(),

You can also use GridPlacement::start(4) instead of:

GridPlacement {
    start: Some(4),
    span: 1,
}

[Weibye]

From what I can tell, this the implementation looks good and correct. Comments and documentation is what needs some improvements before this is released, but that could also be done in follow up PRs.

[alice-i-cecile]

The doc comment on NodeBundle::style wasn't updated with its siblings.

Once that's done, the rest has my approval and I'll merge :)

[nicoburns]

@alice-i-cecile Doc comment updated (also resolved conflicts with #7779)

[NiklasEi]

Could you add the rename from UiSystem::Flex to UiSystem::Layout to the changelog please 🙂

[alice-i-cecile]

Done for you :)

[github-actions]

It looks like your PR is a breaking change, but you didn't provide a migration guide.

Could you add some context on what users should update when this change get released in a new version of Bevy?
It will be used to help writing the migration guide for the version. Putting it after a ## Migration Guide will help it get automatically picked up by our tooling.