Disclosure toggle widget. (#23817)

# Objective

Part of #19236 

The "disclosure toggle" is a small checkbox-like widget which displays a
chevron that toggles between pointing right and pointing down.

## Testing

Manual testing

Author: viridia

crates/bevy_feathers/src/controls/disclosure_toggle.rs

@@ -0,0 +1,164 @@
+use bevy_app::{App, Plugin, PreUpdate};
+use bevy_ecs::{
+    component::Component,
+    hierarchy::Children,
+    lifecycle::RemovedComponents,
+    query::{Added, Has, Or, With},
+    reflect::ReflectComponent,
+    schedule::IntoScheduleConfigs,
+    system::{Query, Res},
+};
+use bevy_input_focus::tab_navigation::TabIndex;
+use bevy_math::Rot2;
+use bevy_picking::PickingSystems;
+use bevy_reflect::{prelude::ReflectDefault, Reflect};
+use bevy_scene::{bsn, Scene};
+use bevy_ui::{
+    px, widget::ImageNode, AlignItems, Checked, Display, InteractionDisabled, JustifyContent, Node,
+    UiTransform,
+};
+use bevy_ui_widgets::Checkbox;
+use bevy_window::SystemCursorIcon;
+
+use crate::{
+    constants::icons, cursor::EntityCursor, display::icon, focus::FocusIndicator, theme::UiTheme,
+    tokens,
+};
+
+/// Marker for the disclosure toggle widget
+#[derive(Component, Default, Clone, Reflect)]
+#[reflect(Component, Clone, Default)]
+struct DisclosureToggleStyle;
+
+/// A toggle button which shows a chevron that points either right or down, used to expand or
+/// collapse a panel. Functionally, this is equivalent to a checkbox, and has a [`Checked`]
+/// state.
+pub fn disclosure_toggle() -> impl Scene {
+    bsn!(
+        Node {
+            width: px(12),
+            height: px(12),
+            display: Display::Flex,
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+        }
+        Checkbox
+        DisclosureToggleStyle
+        EntityCursor::System(SystemCursorIcon::Pointer)
+        FocusIndicator
+        TabIndex(0)
+        Children [
+            :icon(icons::CHEVRON_RIGHT)
+        ]
+    )
+}
+
+fn update_toggle_styles(
+    mut q_toggle: Query<
+        (
+            Has<InteractionDisabled>,
+            Has<Checked>,
+            &mut UiTransform,
+            &Children,
+        ),
+        (
+            With<DisclosureToggleStyle>,
+            Or<(Added<Checkbox>, Added<Checked>, Added<InteractionDisabled>)>,
+        ),
+    >,
+    mut q_icon: Query<&mut ImageNode>,
+    theme: Res<UiTheme>,
+) {
+    for (disabled, checked, mut transform, children) in q_toggle.iter_mut() {
+        let Some(child_id) = children.first() else {
+            continue;
+        };
+        let Ok(mut icon_child) = q_icon.get_mut(*child_id) else {
+            continue;
+        };
+        set_toggle_styles(
+            disabled,
+            checked,
+            transform.as_mut(),
+            &mut icon_child,
+            &theme,
+        );
+    }
+}
+
+fn update_toggle_styles_remove(
+    mut q_toggle: Query<
+        (
+            Has<InteractionDisabled>,
+            Has<Checked>,
+            &mut UiTransform,
+            &Children,
+        ),
+        With<DisclosureToggleStyle>,
+    >,
+    mut q_icon: Query<&mut ImageNode>,
+    mut removed_disabled: RemovedComponents<InteractionDisabled>,
+    mut removed_checked: RemovedComponents<Checked>,
+    theme: Res<UiTheme>,
+) {
+    removed_disabled
+        .read()
+        .chain(removed_checked.read())
+        .for_each(|ent| {
+            if let Ok((disabled, checked, mut transform, children)) = q_toggle.get_mut(ent) {
+                let Some(child_id) = children.first() else {
+                    return;
+                };
+                let Ok(mut icon_child) = q_icon.get_mut(*child_id) else {
+                    return;
+                };
+                set_toggle_styles(
+                    disabled,
+                    checked,
+                    transform.as_mut(),
+                    &mut icon_child,
+                    &theme,
+                );
+            }
+        });
+}
+
+fn set_toggle_styles(
+    disabled: bool,
+    checked: bool,
+    transform: &mut UiTransform,
+    image_node: &mut ImageNode,
+    theme: &Res<'_, UiTheme>,
+) {
+    // It's effectively the same color as the caption of a "plain" variant tool button with an icon.
+    let icon_color = match disabled {
+        true => theme.color(&tokens::BUTTON_TEXT_DISABLED),
+        false => theme.color(&tokens::BUTTON_TEXT),
+    };
+
+    // Change icon color
+    if image_node.color != icon_color {
+        image_node.color = icon_color;
+    }
+
+    match checked {
+        true => {
+            transform.rotation = Rot2::turn_fraction(0.25);
+        }
+        false => {
+            transform.rotation = Rot2::turn_fraction(0.0);
+        }
+    };
+}
+
+/// Plugin which registers the systems for updating the toggle switch styles.
+pub struct DisclosureTogglePlugin;
+
+impl Plugin for DisclosureTogglePlugin {
+    fn build(&self, app: &mut App) {
+        app.add_systems(
+            PreUpdate,
+            (update_toggle_styles, update_toggle_styles_remove).in_set(PickingSystems::Last),
+        );
+    }
+}

crates/bevy_feathers/src/controls/mod.rs

@@ -6,6 +6,7 @@ mod checkbox;
 mod color_plane;
 mod color_slider;
 mod color_swatch;
+mod disclosure_toggle;
 mod menu;
 mod radio;
 mod slider;
@@ -18,6 +19,7 @@ pub use checkbox::*;
 pub use color_plane::*;
 pub use color_slider::*;
 pub use color_swatch::*;
+pub use disclosure_toggle::*;
 pub use menu::*;
 pub use radio::*;
 pub use slider::*;
@@ -40,6 +42,7 @@ impl Plugin for ControlsPlugin {
             ColorPlanePlugin,
             ColorSliderPlugin,
             ColorSwatchPlugin,
+            DisclosureTogglePlugin,
             MenuPlugin,
             RadioPlugin,
             SliderPlugin,

examples/ui/widgets/feathers_gallery.rs

@@ -9,12 +9,12 @@ use bevy::{
             pane_header_divider, subpane, subpane_body, subpane_header,
         },
         controls::{
-            button, checkbox, color_plane, color_slider, color_swatch, menu, menu_button,
-            menu_divider, menu_item, menu_popup, radio, slider, text_input, text_input_container,
-            toggle_switch, tool_button, ButtonProps, ButtonVariant, CheckboxProps, ColorChannel,
-            ColorPlane, ColorPlaneValue, ColorSlider, ColorSliderProps, ColorSwatch,
-            ColorSwatchValue, MenuButtonProps, MenuItemProps, RadioProps, SliderBaseColor,
-            SliderProps, TextInputProps,
+            button, checkbox, color_plane, color_slider, color_swatch, disclosure_toggle, menu,
+            menu_button, menu_divider, menu_item, menu_popup, radio, slider, text_input,
+            text_input_container, toggle_switch, tool_button, ButtonProps, ButtonVariant,
+            CheckboxProps, ColorChannel, ColorPlane, ColorPlaneValue, ColorSlider,
+            ColorSliderProps, ColorSwatch, ColorSwatchValue, MenuButtonProps, MenuItemProps,
+            RadioProps, SliderBaseColor, SliderProps, TextInputProps,
         },
         cursor::{EntityCursor, OverrideCursor},
         dark_theme::create_dark_theme,
@@ -406,6 +406,7 @@ fn demo_column_1() -> impl Scene {
                     (toggle_switch() on(checkbox_self_update)),
                     (toggle_switch() InteractionDisabled on(checkbox_self_update)),
                     (toggle_switch() InteractionDisabled Checked on(checkbox_self_update)),
+                    (disclosure_toggle() on(checkbox_self_update)),
                 ]
             ),
             (