Move radial_gradients example to UI testbed (#19390)

# Objective

Fixes #19385

Note: this has shader errors due to #19383 and should probably be merged
after #19384

## Solution

- Move the example to the UI testbed
- Adjust label contents and cell size so that every test case fits on
the screen
- Minor tidying, slightly less harsh colors while preserving the
intentional debug coloring

## Testing

`cargo run --example testbed_ui`

![Screenshot 2025-05-27 at 8 53
43 AM](https://github.com/user-attachments/assets/97ea20ee-d265-45f6-8b99-bcd5f6030e30)

---------

Co-authored-by: François Mockers <mockersf@gmail.com>

Cargo.toml

@@ -3451,17 +3451,6 @@ description = "An example demonstrating stacked gradients"
 category = "UI (User Interface)"
 wasm = true
 
-[[example]]
-name = "radial_gradients"
-path = "examples/ui/radial_gradients.rs"
-doc-scrape-examples = true
-
-[package.metadata.example.radial_gradients]
-name = "Radial Gradients"
-description = "An example demonstrating radial gradients"
-category = "UI (User Interface)"
-wasm = true
-
 [[example]]
 name = "scroll"
 path = "examples/ui/scroll.rs"

examples/README.md

@@ -552,7 +552,6 @@ Example | Description
 [Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior
 [Overflow Clip Margin](../examples/ui/overflow_clip_margin.rs) | Simple example demonstrating the OverflowClipMargin style property
 [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior
-[Radial Gradients](../examples/ui/radial_gradients.rs) | An example demonstrating radial gradients
 [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component
 [Render UI to Texture](../examples/ui/render_ui_to_texture.rs) | An example of rendering UI as a part of a 3D world
 [Scroll](../examples/ui/scroll.rs) | Demonstrates scrolling UI containers

examples/testbed/ui.rs

@@ -20,6 +20,7 @@ fn main() {
         .add_systems(OnEnter(Scene::Overflow), overflow::setup)
         .add_systems(OnEnter(Scene::Slice), slice::setup)
         .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup)
+        .add_systems(OnEnter(Scene::RadialGradient), radial_gradient::setup)
         .add_systems(Update, switch_scene);
 
     #[cfg(feature = "bevy_ci_testing")]
@@ -41,6 +42,7 @@ enum Scene {
     Overflow,
     Slice,
     LayoutRounding,
+    RadialGradient,
 }
 
 impl Next for Scene {
@@ -54,7 +56,8 @@ impl Next for Scene {
             Scene::TextWrap => Scene::Overflow,
             Scene::Overflow => Scene::Slice,
             Scene::Slice => Scene::LayoutRounding,
-            Scene::LayoutRounding => Scene::Image,
+            Scene::LayoutRounding => Scene::RadialGradient,
+            Scene::RadialGradient => Scene::Image,
         }
     }
 }
@@ -527,3 +530,100 @@ mod layout_rounding {
             });
     }
 }
+
+mod radial_gradient {
+    use bevy::color::palettes::css::RED;
+    use bevy::color::palettes::tailwind::GRAY_700;
+    use bevy::prelude::*;
+    use bevy::ui::ColorStop;
+
+    const CELL_SIZE: f32 = 80.;
+    const GAP: f32 = 10.;
+
+    pub fn setup(mut commands: Commands) {
+        let color_stops = vec![
+            ColorStop::new(Color::BLACK, Val::Px(5.)),
+            ColorStop::new(Color::WHITE, Val::Px(5.)),
+            ColorStop::new(Color::WHITE, Val::Percent(100.)),
+            ColorStop::auto(RED),
+        ];
+
+        commands.spawn((Camera2d, DespawnOnExitState(super::Scene::RadialGradient)));
+        commands
+            .spawn((
+                Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    display: Display::Grid,
+                    align_items: AlignItems::Start,
+                    grid_template_columns: vec![RepeatedGridTrack::px(
+                        GridTrackRepetition::AutoFill,
+                        CELL_SIZE,
+                    )],
+                    grid_auto_flow: GridAutoFlow::Row,
+                    row_gap: Val::Px(GAP),
+                    column_gap: Val::Px(GAP),
+                    padding: UiRect::all(Val::Px(GAP)),
+                    ..default()
+                },
+                DespawnOnExitState(super::Scene::RadialGradient),
+            ))
+            .with_children(|commands| {
+                for (shape, shape_label) in [
+                    (RadialGradientShape::ClosestSide, "ClosestSide"),
+                    (RadialGradientShape::FarthestSide, "FarthestSide"),
+                    (
+                        RadialGradientShape::Circle(Val::Percent(55.)),
+                        "Circle(55%)",
+                    ),
+                    (RadialGradientShape::FarthestCorner, "FarthestCorner"),
+                ] {
+                    for (position, position_label) in [
+                        (Position::TOP_LEFT, "TOP_LEFT"),
+                        (Position::LEFT, "LEFT"),
+                        (Position::BOTTOM_LEFT, "BOTTOM_LEFT"),
+                        (Position::TOP, "TOP"),
+                        (Position::CENTER, "CENTER"),
+                        (Position::BOTTOM, "BOTTOM"),
+                        (Position::TOP_RIGHT, "TOP_RIGHT"),
+                        (Position::RIGHT, "RIGHT"),
+                        (Position::BOTTOM_RIGHT, "BOTTOM_RIGHT"),
+                    ] {
+                        for (w, h) in [(CELL_SIZE, CELL_SIZE), (CELL_SIZE, CELL_SIZE / 2.)] {
+                            commands
+                                .spawn((
+                                    BackgroundColor(GRAY_700.into()),
+                                    Node {
+                                        display: Display::Grid,
+                                        width: Val::Px(CELL_SIZE),
+                                        ..Default::default()
+                                    },
+                                ))
+                                .with_children(|commands| {
+                                    commands.spawn((
+                                        Node {
+                                            margin: UiRect::all(Val::Px(2.0)),
+                                            ..default()
+                                        },
+                                        Text(format!("{shape_label}\n{position_label}")),
+                                        TextFont::from_font_size(9.),
+                                    ));
+                                    commands.spawn((
+                                        Node {
+                                            width: Val::Px(w),
+                                            height: Val::Px(h),
+                                            ..default()
+                                        },
+                                        BackgroundGradient::from(RadialGradient {
+                                            stops: color_stops.clone(),
+                                            position,
+                                            shape,
+                                        }),
+                                    ));
+                                });
+                        }
+                    }
+                }
+            });
+    }
+}

examples/ui/radial_gradients.rs

@@ -1,98 +0,0 @@
-//! Simple example demonstrating radial gradients.
-
-use bevy::color::palettes::css::GREEN;
-use bevy::color::palettes::css::NAVY;
-use bevy::color::palettes::css::RED;
-use bevy::prelude::*;
-use bevy::ui::ColorStop;
-
-fn main() {
-    App::new()
-        .add_plugins(DefaultPlugins)
-        .add_systems(Startup, setup_grid)
-        .run();
-}
-
-const CELL_SIZE: f32 = 100.;
-const GAP: f32 = 10.;
-
-fn setup_grid(mut commands: Commands) {
-    let color_stops = vec![
-        ColorStop::new(Color::BLACK, Val::Px(5.)),
-        ColorStop::new(Color::WHITE, Val::Px(5.)),
-        ColorStop::new(Color::WHITE, Val::Percent(100.)),
-        ColorStop::auto(RED),
-    ];
-
-    commands.spawn(Camera2d);
-    commands
-        .spawn((
-            Node {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                display: Display::Grid,
-                align_items: AlignItems::Start,
-                align_content: AlignContent::Start,
-                grid_template_columns: vec![RepeatedGridTrack::px(
-                    GridTrackRepetition::AutoFill,
-                    CELL_SIZE,
-                )],
-                grid_auto_flow: GridAutoFlow::Row,
-                row_gap: Val::Px(GAP),
-                column_gap: Val::Px(GAP),
-                margin: UiRect::all(Val::Px(GAP)),
-                ..Default::default()
-            },
-            BackgroundColor(NAVY.into()),
-        ))
-        .with_children(|commands| {
-            for shape in [
-                RadialGradientShape::ClosestSide,
-                RadialGradientShape::FarthestSide,
-                RadialGradientShape::Circle(Val::Percent(55.)),
-                RadialGradientShape::FarthestCorner,
-            ] {
-                for position in [
-                    Position::TOP_LEFT,
-                    Position::LEFT,
-                    Position::BOTTOM_LEFT,
-                    Position::TOP,
-                    Position::CENTER,
-                    Position::BOTTOM,
-                    Position::TOP_RIGHT,
-                    Position::RIGHT,
-                    Position::BOTTOM_RIGHT,
-                ] {
-                    for (w, h) in [(100., 100.), (100., 50.)] {
-                        commands
-                            .spawn((
-                                BackgroundColor(GREEN.into()),
-                                Node {
-                                    display: Display::Grid,
-                                    width: Val::Px(CELL_SIZE),
-                                    ..Default::default()
-                                },
-                            ))
-                            .with_children(|commands| {
-                                commands.spawn((
-                                    Text(format!("{shape:#?}\n{position:#?}")),
-                                    TextFont::from_font_size(10.),
-                                ));
-                                commands.spawn((
-                                    Node {
-                                        width: Val::Px(w),
-                                        height: Val::Px(h),
-                                        ..default()
-                                    },
-                                    BackgroundGradient::from(RadialGradient {
-                                        stops: color_stops.clone(),
-                                        position,
-                                        shape,
-                                    }),
-                                ));
-                            });
-                    }
-                }
-            }
-        });
-}