Padding in `Style` no longer works in 0.14

[Litttlefish]

Bevy version

0.14

What went wrong

I upgraded bevy to 0.14, after migration and launching the game I found out that ui that used Padding in style no longer works

Additional information

workaround can be switch padding to margin, but it's better to get it fixed.

[brandon-reinhart]

I wondered why my UIs looked a little off.

[Litttlefish]

this will be fixed in 0.14.1 right?

[Litttlefish]

there is a new argument about padding in bevy_ui/layout/convert.rs: ignore_padding_and_border

Is this caused padding no longer works?

[eero-lehtinen]

I found that 96b9d0a it the offending commit where the padding breaks.

I also found that padding works correctly with normal nodes, but not images.

Reproduction code:

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    // Padding doesn't work
    commands
        .spawn(ImageBundle {
            style: Style {
                width: Val::Px(200.0),
                height: Val::Px(200.0),
                padding: UiRect::all(Val::Px(50.0)),
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(ImageBundle {
                image: asset_server.load("branding/bevy_bird_dark.png").into(),
                ..default()
            });
        });

    // Padding works
    commands
        .spawn(NodeBundle {
            style: Style {
                top: Val::Px(200.0),
                width: Val::Px(200.0),
                height: Val::Px(200.0),
                padding: UiRect::all(Val::Px(50.0)),
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(ImageBundle {
                image: asset_server.load("branding/bevy_bird_dark.png").into(),
                ..default()
            });
        });
}

[Litttlefish]

Someone in discord said that this is because the render code has not implemented yet

[eero-lehtinen]

Yeah but it's a bit weird that it worked before.

[alice-i-cecile]

[1:34 AM]Nico Burns: Because offsetting the content to account for the padding/border isn't implemented for text and image nodes. So that parameter was added to suppress padding/border entirely for those nodes. [1:35 AM]Nico Burns: The real fix is to implement padding and border for images, text and other "leaf" nodes. Then that parameter can be removed. The size of padding/border is already computed by Taffy. It just needs to be used when rendering.

From the conversation with @nicoburns on Discord.

[alice-i-cecile]

Reproduced: padding doesn't work for text nodes for me either.

[benfrankel]

Hit this with UI image during the game jam :)

As a workaround, I made a child node of the UI image with 100% width and height and put the padding there instead.

[zeddash]

Or you can put content in a NodeBundle and give that a margin, then when padding is implemented you can just remove these margin nodes