Add menu_divider widget. (#23788)

# Objective

Menu dividers have been requested by the editor ui design folks.

## Solution

A new `menu_divider` bsn function

## Testing

Manual testing

## Showcase

<img width="103" height="120" alt="menu_divider"
src="https://github.com/user-attachments/assets/382eb57b-732d-454b-a0df-96ebcc39df97"
/>

crates/bevy_feathers/src/controls/menu.rs

@@ -17,8 +17,8 @@ use bevy_picking::{hover::Hovered, PickingSystems};
 use bevy_scene::{prelude::*, template_value};
 use bevy_text::{FontSize, FontWeight};
 use bevy_ui::{
-    AlignItems, BoxShadow, Display, FlexDirection, GlobalZIndex, InteractionDisabled,
-    JustifyContent, Node, OverrideClip, PositionType, Pressed, UiRect, Val,
+    px, AlignItems, AlignSelf, BoxShadow, Display, FlexDirection, GlobalZIndex,
+    InteractionDisabled, JustifyContent, Node, OverrideClip, PositionType, Pressed, UiRect, Val,
 };
 use bevy_ui_widgets::{
     popover::{Popover, PopoverAlign, PopoverPlacement, PopoverSide},
@@ -37,7 +37,7 @@ use crate::{
 };
 use bevy_input_focus::{
     tab_navigation::{NavAction, TabIndex},
-    InputFocus,
+    InputFocus, InputFocusVisible,
 };
 
 /// Parameters for the menu button template, passed to [`menu_button`] function.
@@ -297,6 +297,7 @@ fn update_menuitem_styles(
     >,
     mut commands: Commands,
     focus: Res<InputFocus>,
+    focus_visible: Res<InputFocusVisible>,
 ) {
     for (item_ent, disabled, pressed, hovered, bg_color, font_color) in q_menuitems.iter() {
         set_menuitem_colors(
@@ -304,7 +305,7 @@ fn update_menuitem_styles(
             disabled,
             pressed,
             hovered.0,
-            Some(item_ent) == focus.get(),
+            Some(item_ent) == focus.get() && focus_visible.0,
             bg_color,
             font_color,
             &mut commands,
@@ -327,6 +328,7 @@ fn update_menuitem_styles_remove(
     mut removed_disabled: RemovedComponents<InteractionDisabled>,
     mut removed_pressed: RemovedComponents<Pressed>,
     focus: Res<InputFocus>,
+    focus_visible: Res<InputFocusVisible>,
     mut commands: Commands,
 ) {
     removed_disabled
@@ -341,7 +343,7 @@ fn update_menuitem_styles_remove(
                     disabled,
                     pressed,
                     hovered.0,
-                    Some(item_ent) == focus.get(),
+                    Some(item_ent) == focus.get() && focus_visible.0,
                     bg_color,
                     font_color,
                     &mut commands,
@@ -363,16 +365,17 @@ fn update_menuitem_styles_focus_changed(
         With<FeathersMenuItem>,
     >,
     focus: Res<InputFocus>,
+    focus_visible: Res<InputFocusVisible>,
     mut commands: Commands,
 ) {
-    if focus.is_changed() {
+    if focus.is_changed() || focus_visible.is_changed() {
         for (item_ent, disabled, pressed, hovered, bg_color, font_color) in q_menuitems.iter() {
             set_menuitem_colors(
                 item_ent,
                 disabled,
                 pressed,
                 hovered.0,
-                Some(item_ent) == focus.get(),
+                Some(item_ent) == focus.get() && focus_visible.0,
                 bg_color,
                 font_color,
                 &mut commands,
@@ -418,6 +421,19 @@ fn set_menuitem_colors(
     }
 }
 
+/// A decorative divider between menu items
+pub fn menu_divider() -> impl Scene {
+    bsn! {
+        Node {
+            height: px(1),
+            justify_content: JustifyContent::Start,
+            align_self: AlignSelf::Stretch,
+            margin: UiRect::axes(Val::Px(0.0), Val::Px(2.)),
+        }
+        ThemeBackgroundColor(tokens::MENU_BORDER) // Same as menu
+    }
+}
+
 /// Plugin which registers the systems for updating the menu and menu button styles.
 pub struct MenuPlugin;
 

examples/ui/widgets/feathers_gallery.rs

@@ -5,10 +5,11 @@ use bevy::{
     feathers::{
         controls::{
             button, checkbox, color_plane, color_slider, color_swatch, menu, menu_button,
-            menu_item, menu_popup, radio, slider, text_input, text_input_container, toggle_switch,
-            ButtonProps, ButtonVariant, CheckboxProps, ColorChannel, ColorPlane, ColorPlaneValue,
-            ColorSlider, ColorSliderProps, ColorSwatch, ColorSwatchValue, MenuButtonProps,
-            MenuItemProps, RadioProps, SliderBaseColor, SliderProps, TextInputProps,
+            menu_divider, menu_item, menu_popup, radio, slider, text_input, text_input_container,
+            toggle_switch, ButtonProps, ButtonVariant, CheckboxProps, ColorChannel, ColorPlane,
+            ColorPlaneValue, ColorSlider, ColorSliderProps, ColorSwatch, ColorSwatchValue,
+            MenuButtonProps, MenuItemProps, RadioProps, SliderBaseColor, SliderProps,
+            TextInputProps,
         },
         cursor::{EntityCursor, OverrideCursor},
         dark_theme::create_dark_theme,
@@ -169,6 +170,7 @@ fn demo_root() -> impl Scene {
                                                 info!("Menu item 2 clicked!");
                                             })
                                         ),
+                                        :menu_divider,
                                         (
                                             menu_item(MenuItemProps {
                                                 caption: Box::new(bsn_list!(