Number input (#23842)

# Objective

Part of #19236 

## Solution

A numeric text input widget. This includes:

* Colored stripes ("sigils") for designating X, Y and Z input fields.
* Character filtering
* ValueChange events

Not supported:

* Validation error events
* Range and precision options

Additional changes in this PR:

* Added small labels (related to text inputs only insofar as numeric
inputs have small labels above them in the editor design).
* Refactored labels to be simple spans instead of nested entities - this
required a non-inherited text font theme component, so we renamed the
existing component to have the word "inherited" in the name.
* Consolidated the way focus outlines work for text inputs and other
widgets
* I had to make changes to Slider and other widgets to support the
`is_final` flag in `ValueChange`. This is necessary to allow listeners
the choice between spammy and not-spammy updates when listening to
widget outputs.

## Testing

Manual testing

## Showcase

<img width="353" height="101" alt="numeric_input"
src="https://github.com/user-attachments/assets/36efd243-fa01-484e-bab5-689aa6be4d9e"
/>

Author: viridia

_release-content/release-notes/more_widgets.md

@@ -1,12 +1,13 @@
 ---
 title: "Moar widgets!"
 authors: ["@viridia"]
-pull_requests: [23645, 23707, 23788, 23787, 23804]
+pull_requests: [23645, 23707, 23788, 23787, 23804, 23842]
 ---
 
 Bevy Feathers, the opinionated UI widget collection, has added several new widgets:
 
 - text input
+- number input
 - dropdown menu buttons
 - icon (displays an image)
 - label (displays a text string in the standard font)

crates/bevy_app/src/propagate.rs

@@ -74,12 +74,12 @@ pub struct Propagate<C: Component + Clone + PartialEq>(pub C);
 
 /// Stops the output component being added to this entity.
 /// Relationship targets will still inherit the component from this entity or its parents.
-#[derive(Component)]
+#[derive(Component, Clone)]
 #[cfg_attr(feature = "bevy_reflect", derive(Reflect), reflect(Component))]
 pub struct PropagateOver<C>(PhantomData<fn() -> C>);
 
 /// Stops the propagation at this entity. Children will not inherit the component.
-#[derive(Component)]
+#[derive(Component, Clone)]
 #[cfg_attr(feature = "bevy_reflect", derive(Reflect), reflect(Component))]
 pub struct PropagateStop<C>(PhantomData<fn() -> C>);
 

crates/bevy_feathers/Cargo.toml

@@ -17,6 +17,7 @@ bevy_camera = { path = "../bevy_camera", version = "0.19.0-dev" }
 bevy_color = { path = "../bevy_color", version = "0.19.0-dev" }
 bevy_ui_widgets = { path = "../bevy_ui_widgets", version = "0.19.0-dev" }
 bevy_ecs = { path = "../bevy_ecs", version = "0.19.0-dev" }
+bevy_input = { path = "../bevy_input", version = "0.19.0-dev" }
 bevy_input_focus = { path = "../bevy_input_focus", version = "0.19.0-dev" }
 bevy_log = { path = "../bevy_log", version = "0.19.0-dev" }
 bevy_math = { path = "../bevy_math", version = "0.19.0-dev" }

crates/bevy_feathers/src/constants.rs

@@ -55,4 +55,7 @@ pub mod size {
 
     /// Small font size
     pub const SMALL_FONT: FontSize = FontSize::Px(12.0);
+
+    /// Extra-small font size
+    pub const EXTRA_SMALL_FONT: FontSize = FontSize::Px(11.0);
 }

crates/bevy_feathers/src/containers/group.rs

@@ -6,7 +6,7 @@ use crate::{
     constants::{fonts, size},
     font_styles::InheritableFont,
     rounded_corners::RoundedCorners,
-    theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
+    theme::{InheritableThemeTextColor, ThemeBackgroundColor, ThemeBorderColor},
     tokens,
 };
 
@@ -42,7 +42,7 @@ pub fn group_header() -> impl Scene {
         }
         ThemeBackgroundColor(tokens::GROUP_HEADER_BG)
         ThemeBorderColor(tokens::GROUP_HEADER_BORDER)
-        ThemeFontColor(tokens::GROUP_HEADER_TEXT)
+        InheritableThemeTextColor(tokens::GROUP_HEADER_TEXT)
         InheritableFont {
             font: fonts::REGULAR,
             font_size: size::MEDIUM_FONT,

crates/bevy_feathers/src/containers/pane.rs

@@ -10,7 +10,7 @@ use crate::{
     constants::{fonts, size},
     font_styles::InheritableFont,
     rounded_corners::RoundedCorners,
-    theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
+    theme::{InheritableThemeTextColor, ThemeBackgroundColor, ThemeBorderColor},
     tokens,
 };
 
@@ -46,7 +46,7 @@ pub fn pane_header() -> impl Scene {
         }
         ThemeBackgroundColor(tokens::PANE_HEADER_BG)
         ThemeBorderColor(tokens::PANE_HEADER_BORDER)
-        ThemeFontColor(tokens::PANE_HEADER_TEXT)
+        InheritableThemeTextColor(tokens::PANE_HEADER_TEXT)
         InheritableFont {
             font: fonts::REGULAR,
             font_size: size::MEDIUM_FONT,

crates/bevy_feathers/src/containers/subpane.rs

@@ -6,7 +6,7 @@ use crate::{
     constants::{fonts, size},
     font_styles::InheritableFont,
     rounded_corners::RoundedCorners,
-    theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
+    theme::{InheritableThemeTextColor, ThemeBackgroundColor, ThemeBorderColor},
     tokens,
 };
 
@@ -42,7 +42,7 @@ pub fn subpane_header() -> impl Scene {
         }
         ThemeBackgroundColor(tokens::SUBPANE_HEADER_BG)
         ThemeBorderColor(tokens::SUBPANE_HEADER_BORDER)
-        ThemeFontColor(tokens::SUBPANE_HEADER_TEXT)
+        InheritableThemeTextColor(tokens::SUBPANE_HEADER_TEXT)
         InheritableFont {
             font: fonts::REGULAR,
             font_size: size::MEDIUM_FONT,

crates/bevy_feathers/src/controls/button.rs

@@ -25,7 +25,7 @@ use crate::{
     focus::FocusIndicator,
     font_styles::InheritableFont,
     rounded_corners::RoundedCorners,
-    theme::{ThemeBackgroundColor, ThemeFontColor},
+    theme::{InheritableThemeTextColor, ThemeBackgroundColor},
     tokens,
 };
 
@@ -92,7 +92,7 @@ pub fn button(props: ButtonProps) -> impl Scene {
         TabIndex(0)
         FocusIndicator
         ThemeBackgroundColor(tokens::BUTTON_BG)
-        ThemeFontColor(tokens::BUTTON_TEXT)
+        InheritableThemeTextColor(tokens::BUTTON_TEXT)
         InheritableFont {
             font: fonts::REGULAR,
             font_size: size::MEDIUM_FONT,
@@ -168,7 +168,7 @@ pub fn button_bundle<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundl
         TabIndex(0),
         FocusIndicator,
         ThemeBackgroundColor(tokens::BUTTON_BG),
-        ThemeFontColor(tokens::BUTTON_TEXT),
+        InheritableThemeTextColor(tokens::BUTTON_TEXT),
         InheritableFont {
             font_size: size::MEDIUM_FONT,
             weight: FontWeight::NORMAL,
@@ -187,7 +187,7 @@ fn update_button_styles(
             Has<Pressed>,
             &Hovered,
             &ThemeBackgroundColor,
-            &ThemeFontColor,
+            &InheritableThemeTextColor,
         ),
         Or<(
             Changed<Hovered>,
@@ -221,7 +221,7 @@ fn update_button_styles_remove(
         Has<Pressed>,
         &Hovered,
         &ThemeBackgroundColor,
-        &ThemeFontColor,
+        &InheritableThemeTextColor,
     )>,
     mut removed_disabled: RemovedComponents<InteractionDisabled>,
     mut removed_pressed: RemovedComponents<Pressed>,
@@ -255,7 +255,7 @@ fn set_button_styles(
     pressed: bool,
     hovered: bool,
     bg_color: &ThemeBackgroundColor,
-    font_color: &ThemeFontColor,
+    font_color: &InheritableThemeTextColor,
     commands: &mut Commands,
 ) {
     let bg_token = match (variant, disabled, pressed, hovered) {
@@ -296,7 +296,7 @@ fn set_button_styles(
     if font_color.0 != font_color_token {
         commands
             .entity(button_ent)
-            .insert(ThemeFontColor(font_color_token));
+            .insert(InheritableThemeTextColor(font_color_token));
     }
 
     // Change cursor shape

crates/bevy_feathers/src/controls/checkbox.rs

@@ -30,7 +30,7 @@ use crate::{
     cursor::EntityCursor,
     focus::FocusIndicator,
     font_styles::InheritableFont,
-    theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
+    theme::{InheritableThemeTextColor, ThemeBackgroundColor, ThemeBorderColor},
     tokens,
 };
 
@@ -84,7 +84,7 @@ pub fn checkbox(props: CheckboxProps) -> impl Scene {
         Hovered
         EntityCursor::System(bevy_window::SystemCursorIcon::Pointer)
         TabIndex(0)
-        ThemeFontColor(tokens::CHECKBOX_TEXT)
+        InheritableThemeTextColor(tokens::CHECKBOX_TEXT)
         InheritableFont {
             font: fonts::REGULAR,
             font_size: size::MEDIUM_FONT,
@@ -150,7 +150,7 @@ pub fn checkbox_bundle<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bun
         Hovered::default(),
         EntityCursor::System(bevy_window::SystemCursorIcon::Pointer),
         TabIndex(0),
-        ThemeFontColor(tokens::CHECKBOX_TEXT),
+        InheritableThemeTextColor(tokens::CHECKBOX_TEXT),
         InheritableFont {
             font_size: size::MEDIUM_FONT,
             weight: FontWeight::NORMAL,
@@ -204,7 +204,7 @@ fn update_checkbox_styles(
             Has<Pressed>,
             Has<ActivateOnPress>,
             &Hovered,
-            &ThemeFontColor,
+            &InheritableThemeTextColor,
         ),
         (
             With<CheckboxFrame>,
@@ -265,7 +265,7 @@ fn update_checkbox_styles_remove(
             Has<Pressed>,
             Has<ActivateOnPress>,
             &Hovered,
-            &ThemeFontColor,
+            &InheritableThemeTextColor,
         ),
         With<CheckboxFrame>,
     >,
@@ -339,7 +339,7 @@ fn set_checkbox_styles(
     outline_bg: &ThemeBackgroundColor,
     outline_border: &ThemeBorderColor,
     mark_color: &ThemeBorderColor,
-    font_color: &ThemeFontColor,
+    font_color: &InheritableThemeTextColor,
     commands: &mut Commands,
 ) {
     let outline_border_token = if checked {
@@ -432,7 +432,7 @@ fn set_checkbox_styles(
     if font_color.0 != font_color_token {
         commands
             .entity(checkbox_ent)
-            .insert(ThemeFontColor(font_color_token));
+            .insert(InheritableThemeTextColor(font_color_token));
     }
 
     // Change cursor shape

crates/bevy_feathers/src/controls/color_plane.rs

@@ -317,6 +317,7 @@ fn on_pointer_press(
             commands.trigger(ValueChange {
                 source: parent.0,
                 value: new_value,
+                is_final: false,
             });
         }
     }
@@ -368,20 +369,46 @@ fn on_drag(
             commands.trigger(ValueChange {
                 source: parent.0,
                 value: new_value,
+                is_final: false,
             });
         }
     }
 }
 
 fn on_drag_end(
     mut drag_end: On<Pointer<DragEnd>>,
-    mut q_color_planes: Query<&mut ColorPlaneDragState, With<ColorPlane>>,
-    q_color_plane_inner: Query<&ChildOf, With<ColorPlaneInner>>,
+    mut q_color_planes: Query<
+        (&mut ColorPlaneDragState, Has<InteractionDisabled>),
+        With<ColorPlane>,
+    >,
+    q_color_plane_inner: Query<
+        (
+            &ComputedNode,
+            &ComputedUiRenderTargetInfo,
+            &UiGlobalTransform,
+            &ChildOf,
+        ),
+        With<ColorPlaneInner>,
+    >,
+    ui_scale: Res<UiScale>,
+    mut commands: Commands,
 ) {
-    if let Ok(parent) = q_color_plane_inner.get(drag_end.entity)
-        && let Ok(mut state) = q_color_planes.get_mut(parent.0)
+    if let Ok((node, node_target, transform, parent)) = q_color_plane_inner.get(drag_end.entity)
+        && let Ok((mut state, disabled)) = q_color_planes.get_mut(parent.0)
     {
         drag_end.propagate(false);
+        if state.0 && !disabled {
+            let local_pos = transform.try_inverse().unwrap().transform_point2(
+                drag_end.pointer_location.position * node_target.scale_factor() / ui_scale.0,
+            );
+            let pos = local_pos / node.size() + Vec2::splat(0.5);
+            let new_value = pos.clamp(Vec2::ZERO, Vec2::ONE);
+            commands.trigger(ValueChange {
+                source: parent.0,
+                value: new_value,
+                is_final: true,
+            });
+        }
         state.0 = false;
     }
 }