Feathers checkbox (#19900)

Adds checkbox and radio buttons to feathers.

Showcase:

<img width="378" alt="feathers-checkbox-radio"
src="https://github.com/user-attachments/assets/76d35589-6400-49dd-bf98-aeca2f39a472"
/>

Author: viridia

crates/bevy_core_widgets/src/core_radio.rs

@@ -170,6 +170,11 @@ fn radio_group_on_button_click(
             }
         };
 
+        // Radio button is disabled.
+        if q_radio.get(radio_id).unwrap().1 {
+            return;
+        }
+
         // Gather all the enabled radio group descendants for exclusion.
         let radio_buttons = q_children
             .iter_descendants(ev.target())

crates/bevy_feathers/Cargo.toml

@@ -17,8 +17,10 @@ bevy_core_widgets = { path = "../bevy_core_widgets", version = "0.17.0-dev" }
 bevy_ecs = { path = "../bevy_ecs", version = "0.17.0-dev" }
 bevy_input_focus = { path = "../bevy_input_focus", version = "0.17.0-dev" }
 bevy_log = { path = "../bevy_log", version = "0.17.0-dev" }
+bevy_math = { path = "../bevy_math", version = "0.17.0-dev" }
 bevy_picking = { path = "../bevy_picking", version = "0.17.0-dev" }
 bevy_platform = { path = "../bevy_platform", version = "0.17.0-dev" }
+bevy_render = { path = "../bevy_render", version = "0.17.0-dev" }
 bevy_text = { path = "../bevy_text", version = "0.17.0-dev" }
 bevy_ui = { path = "../bevy_ui", version = "0.17.0-dev", features = [
   "bevy_ui_picking_backend",

crates/bevy_feathers/src/constants.rs

@@ -19,5 +19,11 @@ pub mod size {
     use bevy_ui::Val;
 
     /// Common row size for buttons, sliders, spinners, etc.
-    pub const ROW_HEIGHT: Val = Val::Px(22.0);
+    pub const ROW_HEIGHT: Val = Val::Px(24.0);
+
+    /// Width and height of a checkbox
+    pub const CHECKBOX_SIZE: Val = Val::Px(18.0);
+
+    /// Width and height of a radio button
+    pub const RADIO_SIZE: Val = Val::Px(18.0);
 }

crates/bevy_feathers/src/controls/checkbox.rs

@@ -0,0 +1,304 @@
+use bevy_app::{Plugin, PreUpdate};
+use bevy_core_widgets::{Callback, CoreCheckbox};
+use bevy_ecs::{
+    bundle::Bundle,
+    children,
+    component::Component,
+    entity::Entity,
+    hierarchy::{ChildOf, Children},
+    lifecycle::RemovedComponents,
+    query::{Added, Changed, Has, Or, With},
+    schedule::IntoScheduleConfigs,
+    spawn::{Spawn, SpawnRelated, SpawnableList},
+    system::{Commands, In, Query},
+};
+use bevy_input_focus::tab_navigation::TabIndex;
+use bevy_math::Rot2;
+use bevy_picking::{hover::Hovered, PickingSystems};
+use bevy_render::view::Visibility;
+use bevy_ui::{
+    AlignItems, BorderRadius, Checked, Display, FlexDirection, InteractionDisabled, JustifyContent,
+    Node, PositionType, UiRect, UiTransform, Val,
+};
+use bevy_winit::cursor::CursorIcon;
+
+use crate::{
+    constants::{fonts, size},
+    font_styles::InheritableFont,
+    handle_or_path::HandleOrPath,
+    theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
+    tokens,
+};
+
+/// Parameters for the checkbox template, passed to [`checkbox`] function.
+#[derive(Default)]
+pub struct CheckboxProps {
+    /// Change handler
+    pub on_change: Callback<In<bool>>,
+}
+
+/// Marker for the checkbox outline
+#[derive(Component, Default, Clone)]
+struct CheckboxOutline;
+
+/// Marker for the checkbox check mark
+#[derive(Component, Default, Clone)]
+struct CheckboxMark;
+
+/// Template function to spawn a checkbox.
+///
+/// # Arguments
+/// * `props` - construction properties for the checkbox.
+/// * `overrides` - a bundle of components that are merged in with the normal checkbox components.
+/// * `label` - the label of the checkbox.
+pub fn checkbox<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundle>(
+    props: CheckboxProps,
+    overrides: B,
+    label: C,
+) -> impl Bundle {
+    (
+        Node {
+            display: Display::Flex,
+            flex_direction: FlexDirection::Row,
+            justify_content: JustifyContent::Start,
+            align_items: AlignItems::Center,
+            column_gap: Val::Px(4.0),
+            ..Default::default()
+        },
+        CoreCheckbox {
+            on_change: props.on_change,
+        },
+        Hovered::default(),
+        CursorIcon::System(bevy_window::SystemCursorIcon::Pointer),
+        TabIndex(0),
+        ThemeFontColor(tokens::CHECKBOX_TEXT),
+        InheritableFont {
+            font: HandleOrPath::Path(fonts::REGULAR.to_owned()),
+            font_size: 14.0,
+        },
+        overrides,
+        Children::spawn((
+            Spawn((
+                Node {
+                    width: size::CHECKBOX_SIZE,
+                    height: size::CHECKBOX_SIZE,
+                    border: UiRect::all(Val::Px(2.0)),
+                    ..Default::default()
+                },
+                CheckboxOutline,
+                BorderRadius::all(Val::Px(4.0)),
+                ThemeBackgroundColor(tokens::CHECKBOX_BG),
+                ThemeBorderColor(tokens::CHECKBOX_BORDER),
+                children![(
+                    // Cheesy checkmark: rotated node with L-shaped border.
+                    Node {
+                        position_type: PositionType::Absolute,
+                        left: Val::Px(4.0),
+                        top: Val::Px(0.0),
+                        width: Val::Px(6.),
+                        height: Val::Px(11.),
+                        border: UiRect {
+                            bottom: Val::Px(2.0),
+                            right: Val::Px(2.0),
+                            ..Default::default()
+                        },
+                        ..Default::default()
+                    },
+                    UiTransform::from_rotation(Rot2::FRAC_PI_4),
+                    CheckboxMark,
+                    ThemeBorderColor(tokens::CHECKBOX_MARK),
+                )],
+            )),
+            label,
+        )),
+    )
+}
+
+fn update_checkbox_styles(
+    q_checkboxes: Query<
+        (
+            Entity,
+            Has<InteractionDisabled>,
+            Has<Checked>,
+            &Hovered,
+            &ThemeFontColor,
+        ),
+        (
+            With<CoreCheckbox>,
+            Or<(Changed<Hovered>, Added<Checked>, Added<InteractionDisabled>)>,
+        ),
+    >,
+    q_children: Query<&Children>,
+    mut q_outline: Query<(&ThemeBackgroundColor, &ThemeBorderColor), With<CheckboxOutline>>,
+    mut q_mark: Query<&ThemeBorderColor, With<CheckboxMark>>,
+    mut commands: Commands,
+) {
+    for (checkbox_ent, disabled, checked, hovered, font_color) in q_checkboxes.iter() {
+        let Some(outline_ent) = q_children
+            .iter_descendants(checkbox_ent)
+            .find(|en| q_outline.contains(*en))
+        else {
+            continue;
+        };
+        let Some(mark_ent) = q_children
+            .iter_descendants(checkbox_ent)
+            .find(|en| q_mark.contains(*en))
+        else {
+            continue;
+        };
+        let (outline_bg, outline_border) = q_outline.get_mut(outline_ent).unwrap();
+        let mark_color = q_mark.get_mut(mark_ent).unwrap();
+        set_checkbox_colors(
+            checkbox_ent,
+            outline_ent,
+            mark_ent,
+            disabled,
+            checked,
+            hovered.0,
+            outline_bg,
+            outline_border,
+            mark_color,
+            font_color,
+            &mut commands,
+        );
+    }
+}
+
+fn update_checkbox_styles_remove(
+    q_checkboxes: Query<
+        (
+            Entity,
+            Has<InteractionDisabled>,
+            Has<Checked>,
+            &Hovered,
+            &ThemeFontColor,
+        ),
+        With<CoreCheckbox>,
+    >,
+    q_children: Query<&Children>,
+    mut q_outline: Query<(&ThemeBackgroundColor, &ThemeBorderColor), With<CheckboxOutline>>,
+    mut q_mark: Query<&ThemeBorderColor, With<CheckboxMark>>,
+    mut removed_disabled: RemovedComponents<InteractionDisabled>,
+    mut removed_checked: RemovedComponents<Checked>,
+    mut commands: Commands,
+) {
+    removed_disabled
+        .read()
+        .chain(removed_checked.read())
+        .for_each(|ent| {
+            if let Ok((checkbox_ent, disabled, checked, hovered, font_color)) =
+                q_checkboxes.get(ent)
+            {
+                let Some(outline_ent) = q_children
+                    .iter_descendants(checkbox_ent)
+                    .find(|en| q_outline.contains(*en))
+                else {
+                    return;
+                };
+                let Some(mark_ent) = q_children
+                    .iter_descendants(checkbox_ent)
+                    .find(|en| q_mark.contains(*en))
+                else {
+                    return;
+                };
+                let (outline_bg, outline_border) = q_outline.get_mut(outline_ent).unwrap();
+                let mark_color = q_mark.get_mut(mark_ent).unwrap();
+                set_checkbox_colors(
+                    checkbox_ent,
+                    outline_ent,
+                    mark_ent,
+                    disabled,
+                    checked,
+                    hovered.0,
+                    outline_bg,
+                    outline_border,
+                    mark_color,
+                    font_color,
+                    &mut commands,
+                );
+            }
+        });
+}
+
+fn set_checkbox_colors(
+    checkbox_ent: Entity,
+    outline_ent: Entity,
+    mark_ent: Entity,
+    disabled: bool,
+    checked: bool,
+    hovered: bool,
+    outline_bg: &ThemeBackgroundColor,
+    outline_border: &ThemeBorderColor,
+    mark_color: &ThemeBorderColor,
+    font_color: &ThemeFontColor,
+    commands: &mut Commands,
+) {
+    let outline_border_token = match (disabled, hovered) {
+        (true, _) => tokens::CHECKBOX_BORDER_DISABLED,
+        (false, true) => tokens::CHECKBOX_BORDER_HOVER,
+        _ => tokens::CHECKBOX_BORDER,
+    };
+
+    let outline_bg_token = match (disabled, checked) {
+        (true, true) => tokens::CHECKBOX_BG_CHECKED_DISABLED,
+        (true, false) => tokens::CHECKBOX_BG_DISABLED,
+        (false, true) => tokens::CHECKBOX_BG_CHECKED,
+        (false, false) => tokens::CHECKBOX_BG,
+    };
+
+    let mark_token = match disabled {
+        true => tokens::CHECKBOX_MARK_DISABLED,
+        false => tokens::CHECKBOX_MARK,
+    };
+
+    let font_color_token = match disabled {
+        true => tokens::CHECKBOX_TEXT_DISABLED,
+        false => tokens::CHECKBOX_TEXT,
+    };
+
+    // Change outline background
+    if outline_bg.0 != outline_bg_token {
+        commands
+            .entity(outline_ent)
+            .insert(ThemeBackgroundColor(outline_bg_token));
+    }
+
+    // Change outline border
+    if outline_border.0 != outline_border_token {
+        commands
+            .entity(outline_ent)
+            .insert(ThemeBorderColor(outline_border_token));
+    }
+
+    // Change mark color
+    if mark_color.0 != mark_token {
+        commands
+            .entity(mark_ent)
+            .insert(ThemeBorderColor(mark_token));
+    }
+
+    // Change mark visibility
+    commands.entity(mark_ent).insert(match checked {
+        true => Visibility::Visible,
+        false => Visibility::Hidden,
+    });
+
+    // Change font color
+    if font_color.0 != font_color_token {
+        commands
+            .entity(checkbox_ent)
+            .insert(ThemeFontColor(font_color_token));
+    }
+}
+
+/// Plugin which registers the systems for updating the checkbox styles.
+pub struct CheckboxPlugin;
+
+impl Plugin for CheckboxPlugin {
+    fn build(&self, app: &mut bevy_app::App) {
+        app.add_systems(
+            PreUpdate,
+            (update_checkbox_styles, update_checkbox_styles_remove).in_set(PickingSystems::Last),
+        );
+    }
+}

crates/bevy_feathers/src/controls/mod.rs

@@ -2,16 +2,20 @@
 use bevy_app::Plugin;
 
 mod button;
+mod checkbox;
+mod radio;
 mod slider;
 
 pub use button::{button, ButtonPlugin, ButtonProps, ButtonVariant};
+pub use checkbox::{checkbox, CheckboxPlugin, CheckboxProps};
+pub use radio::{radio, RadioPlugin};
 pub use slider::{slider, SliderPlugin, SliderProps};
 
 /// Plugin which registers all `bevy_feathers` controls.
 pub struct ControlsPlugin;
 
 impl Plugin for ControlsPlugin {
     fn build(&self, app: &mut bevy_app::App) {
-        app.add_plugins((ButtonPlugin, SliderPlugin));
+        app.add_plugins((ButtonPlugin, CheckboxPlugin, RadioPlugin, SliderPlugin));
     }
 }