Skip to content

Focus rings for feathers widgets and core widget examples. #20047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+224 −34
Open

Focus rings for feathers widgets and core widget examples. #20047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8860132
Focus rings for feathers widgets and core widget examples.
viridia Jul 8, 2025
893ad20
Update release note.
viridia Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 35 additions & 6 deletions crates/bevy_feathers/src/controls/button.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,29 @@ use bevy_app::{Plugin, PreUpdate};
use bevy_core_widgets::{Callback, CoreButton};
use bevy_ecs::{
bundle::Bundle,
change_detection::DetectChanges,
component::Component,
entity::Entity,
hierarchy::{ChildOf, Children},
lifecycle::RemovedComponents,
query::{Added, Changed, Has, Or},
query::{Added, Changed, Has, Or, With},
schedule::IntoScheduleConfigs,
spawn::{SpawnRelated, SpawnableList},
system::{Commands, Query},
system::{Commands, Query, Res},
};
use bevy_input_focus::tab_navigation::TabIndex;
use bevy_input_focus::{tab_navigation::TabIndex, InputFocus};
use bevy_picking::{hover::Hovered, PickingSystems};
use bevy_ui::{AlignItems, InteractionDisabled, JustifyContent, Node, Pressed, UiRect, Val};
use bevy_ui::{
AlignItems, InteractionDisabled, JustifyContent, Node, Outline, Pressed, UiRect, Val,
};
use bevy_winit::cursor::CursorIcon;

use crate::{
constants::{fonts, size},
font_styles::InheritableFont,
handle_or_path::HandleOrPath,
rounded_corners::RoundedCorners,
theme::{ThemeBackgroundColor, ThemeFontColor},
theme::{ThemeBackgroundColor, ThemeFontColor, UiTheme},
tokens,
};

Expand Down Expand Up @@ -195,14 +198,40 @@ fn set_button_colors(
}
}

fn update_button_focus(
mut commands: Commands,
focus: Res<InputFocus>,
theme: Res<UiTheme>,
query: Query<Entity, With<ButtonVariant>>,
) {
if focus.is_changed() {
for button in query.iter() {
if focus.0 == Some(button) {
commands.entity(button).insert(Outline {
color: theme.color(tokens::FOCUS_RING),
width: Val::Px(2.0),
offset: Val::Px(2.0),
});
} else {
commands.entity(button).remove::<Outline>();
Copy link
Contributor

@ickshonpe ickshonpe Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another alternative would be to have a separate entity, something like:

        (
            FocusRingNode,
            Node {
                position_type: PositionType::Absolute,
                left: Val::Px(0.),
                right: Val::Px(0.),
                top: Val::Px(0.),
                bottom: Val::Px(0.),
                ..Default::default()
            },
            Outline {
                color: theme.color(tokens::FOCUS_RING),
                width: Val::Px(2.0),
                offset: Val::Px(2.0),
            },
        )

And then when input focus changes, reparent the FocusRingNode to the new entity. There would also need to be a system that synchronised the border radii. Then you can set an arbitrary zindex on the ring node, and there would be no need to remove the outline from the previous entity.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd like to put this issue aside for now.

Using outlines does cause a minor cosmetic problem when using segmented buttons (the adjacent button renders on top of the outline). However, most users will never see this, as focus outlines are disabled until you actually use tab navigation. Other than that minor glitch, outlines work pretty well.

A different approach is to temporarily modify the z-index of the focused button.

In any case, I only mentioned this as speculation; I didn't actually expect to get a solution :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like reusing Outline for this: it causes z-ordering issues, and because it's used for other things, you have to be careful of bugs around restoring the outline when removing focus.

I think that a separate entity with a dedicated component is going to be a much better foundation.

Copy link
Contributor Author

@viridia viridia Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If that's the case, then what are outlines for?

Note that I didn't implement focus rings for core widgets, because of exactly this: core widgets aren't supposed to make assumptions about what styling decisions the client is going to make, whether or not they want to use outlines for focus or some other purpose. The place where I used outlines is (a) in examples, and (b) in the feathers widgets -- both of which presumably "own" their styling.

Sure, we can make something that spawns an absolutely-positioned child entity that inflates the parent's box and draws a border, copying over the border radius (although it will get tricky because we want to increase the radius value by the offset).

But my question then is, why did we add the outlines feature at all? I mean, you could make the argument that anyone who uses outlines for any reason is denying someone else the use of outline for some other reason.

I should note that outlines on the web have exactly this same problem, but I don't think that lets us off the hook; rather I think it means that we're copying the web's mistakes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But my question then is, why did we add the outlines feature at all?

That's a very good point.

What if we rename the outline component to less of an attractive nuisance: something like FocusOutline? Then, point to Border in the docs for other uses.

We can then change the implementation to use multiple entities and have better z-layering in follow-up.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's an important use case! It appears that these were added in #9931, by @ickshonpe :)

I can definitely see the argument to not break existing users. I'm not super keen on having "two subtly distinct ways to draw outlines". I had completely forgotten that this a) had other uses and b) was added much earleir.

The limitations of the initial "just use Outline" design are pretty severe though. We can fix the z-ordering by changing how Outline works, probably in a way that would be better for all users. The "restore previous state bug" could also be solved: just throw some caching at it for now.

Proposed plan:

  1. Use Outline for now.
  2. Add a simple cache to restore the previous outline when unfocused.
  3. Fix outline z-ordering later, somehow.

Does that sound agreeable to both of you?

Copy link
Contributor Author

@viridia viridia Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a sketch of a completely over-the-top solution (NOT proposing that we do this now):

  • We introduce a new kind of entity called a "Decoration". Outlines are one kind of decoration, drop shadows are another kind.
  • Decorations are not Nodes - rather they are attachments to Nodes which draw cause additional polygons to be drawn.
  • We introduce a new relation type, DecoratedBy. This relates a node to all of its decorations.
  • This means that a node can have as many decorations as you like: multiple outlines, multiple drop shadows, and so on. Each outline or shadow can be a different color, different size, and so on.
  • Decorations can have a Z-index component.
  • Decorations are invisible to the picking system (for now)

What I particularly like about this proposal is that it goes far beyond the restrictions of the web. The web was originally designed, after all, to present documents like a desktop publishing system. But Bevy is a media engine, and shouldn't be trapped in a document mind-set.

Copy link
Contributor

@ickshonpe ickshonpe Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If that's the case, then what are outlines for?

Outlines aren't anything special, they are just borders which don't take up any space in the layout. They were very easy to implement and they are useful when you want to distinguish a particular node or something.

Copy link
Contributor

@ickshonpe ickshonpe Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, we can make something that spawns an absolutely-positioned child entity that inflates the parent's box and draws a border, copying over the border radius (although it will get tricky because we want to increase the radius value by the offset).

There's no need to recalculate the border-radius when using outlines for this. It just needs to match the border-radius of the parent. The system for updating the FocusRingNode's border-radius would be very simple, just query for its parent's border-radius and copy it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to solve the "restore previous outline when unfocused" problem right now. We can solve this later when we implement a more robust way of doing focus rings.

My reasoning is this: the use of outlines to implement focus rings is limited to the following cases:

  • examples (specifically core_widgets and input_focus examples).
  • feathers

Neither of these cases permits conflicting uses of outlines, but for different reasons. In the case of examples, the user can't re-use the components. In the case of feathers, we can simply declare by fiat that we "own" the outline (this is the benefit of having an opinionated widget collection).

If someone comes along later and says, "no I really want to use a feathers button but I want my own outlines for some different purpose" we can solve it then.

}
}
}
}

/// Plugin which registers the systems for updating the button styles.
pub struct ButtonPlugin;

impl Plugin for ButtonPlugin {
fn build(&self, app: &mut bevy_app::App) {
app.add_systems(
PreUpdate,
(update_button_styles, update_button_styles_remove).in_set(PickingSystems::Last),
(
update_button_styles,
update_button_styles_remove,
update_button_focus,
)
.in_set(PickingSystems::Last),
);
}
}
47 changes: 42 additions & 5 deletions crates/bevy_feathers/src/controls/checkbox.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ use bevy_app::{Plugin, PreUpdate};
use bevy_core_widgets::{Callback, CoreCheckbox};
use bevy_ecs::{
bundle::Bundle,
change_detection::DetectChanges,
children,
component::Component,
entity::Entity,
Expand All @@ -10,23 +11,23 @@ use bevy_ecs::{
query::{Added, Changed, Has, Or, With},
schedule::IntoScheduleConfigs,
spawn::{Spawn, SpawnRelated, SpawnableList},
system::{Commands, In, Query},
system::{Commands, In, Query, Res},
};
use bevy_input_focus::tab_navigation::TabIndex;
use bevy_input_focus::{tab_navigation::TabIndex, InputFocus};
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,
Node, Outline, 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},
theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor, UiTheme},
tokens,
};

Expand Down Expand Up @@ -296,14 +297,50 @@ fn set_checkbox_colors(
}
}

fn update_checkbox_focus(
mut commands: Commands,
focus: Res<InputFocus>,
theme: Res<UiTheme>,
q_checkbox: Query<Entity, With<CheckboxFrame>>,
q_children: Query<&Children>,
q_outline: Query<(), With<CheckboxOutline>>,
) {
if focus.is_changed() {
for checkbox_ent in q_checkbox.iter() {
// For a checkbox, we want to outline just the box, not the entire wiget with the label.
let Some(outline_ent) = q_children
.iter_descendants(checkbox_ent)
.find(|en| q_outline.contains(*en))
else {
return;
};

if focus.0 == Some(checkbox_ent) {
commands.entity(outline_ent).insert(Outline {
color: theme.color(tokens::FOCUS_RING),
width: Val::Px(2.0),
offset: Val::Px(2.0),
});
} else {
commands.entity(outline_ent).remove::<Outline>();
}
}
}
}

/// 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),
(
update_checkbox_styles,
update_checkbox_styles_remove,
update_checkbox_focus,
)
.in_set(PickingSystems::Last),
);
}
}
40 changes: 33 additions & 7 deletions crates/bevy_feathers/src/controls/radio.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
use bevy_app::{Plugin, PreUpdate};
use bevy_core_widgets::CoreRadio;
use bevy_core_widgets::{CoreRadio, CoreRadioGroup};
use bevy_ecs::{
bundle::Bundle,
change_detection::DetectChanges,
children,
component::Component,
entity::Entity,
Expand All @@ -10,22 +11,22 @@ use bevy_ecs::{
query::{Added, Changed, Has, Or, With},
schedule::IntoScheduleConfigs,
spawn::{Spawn, SpawnRelated, SpawnableList},
system::{Commands, Query},
system::{Commands, Query, Res},
};
use bevy_input_focus::tab_navigation::TabIndex;
use bevy_input_focus::InputFocus;
use bevy_picking::{hover::Hovered, PickingSystems};
use bevy_render::view::Visibility;
use bevy_ui::{
AlignItems, BorderRadius, Checked, Display, FlexDirection, InteractionDisabled, JustifyContent,
Node, UiRect, Val,
Node, Outline, UiRect, Val,
};
use bevy_winit::cursor::CursorIcon;

use crate::{
constants::{fonts, size},
font_styles::InheritableFont,
handle_or_path::HandleOrPath,
theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor},
theme::{ThemeBackgroundColor, ThemeBorderColor, ThemeFontColor, UiTheme},
tokens,
};

Expand Down Expand Up @@ -59,7 +60,6 @@ pub fn radio<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundle>(
CoreRadio,
Hovered::default(),
CursorIcon::System(bevy_window::SystemCursorIcon::Pointer),
TabIndex(0),
ThemeFontColor(tokens::RADIO_TEXT),
InheritableFont {
font: HandleOrPath::Path(fonts::REGULAR.to_owned()),
Expand Down Expand Up @@ -255,14 +255,40 @@ fn set_radio_colors(
}
}

fn update_radio_group_focus(
mut commands: Commands,
focus: Res<InputFocus>,
theme: Res<UiTheme>,
q_groups: Query<Entity, With<CoreRadioGroup>>,
) {
if focus.is_changed() {
for group in q_groups.iter() {
if focus.0 == Some(group) {
commands.entity(group).insert(Outline {
color: theme.color(tokens::FOCUS_RING),
width: Val::Px(2.0),
offset: Val::Px(2.0),
});
} else {
commands.entity(group).remove::<Outline>();
}
}
}
}

/// Plugin which registers the systems for updating the radio styles.
pub struct RadioPlugin;

impl Plugin for RadioPlugin {
fn build(&self, app: &mut bevy_app::App) {
app.add_systems(
PreUpdate,
(update_radio_styles, update_radio_styles_remove).in_set(PickingSystems::Last),
(
update_radio_styles,
update_radio_styles_remove,
update_radio_group_focus,
)
.in_set(PickingSystems::Last),
);
}
}
31 changes: 27 additions & 4 deletions crates/bevy_feathers/src/controls/slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ use bevy_color::Color;
use bevy_core_widgets::{Callback, CoreSlider, SliderRange, SliderValue, TrackClick};
use bevy_ecs::{
bundle::Bundle,
change_detection::DetectChanges,
children,
component::Component,
entity::Entity,
Expand All @@ -13,14 +14,14 @@ use bevy_ecs::{
query::{Added, Changed, Has, Or, Spawned, With},
schedule::IntoScheduleConfigs,
spawn::SpawnRelated,
system::{In, Query, Res},
system::{Commands, In, Query, Res},
};
use bevy_input_focus::tab_navigation::TabIndex;
use bevy_input_focus::{tab_navigation::TabIndex, InputFocus};
use bevy_picking::PickingSystems;
use bevy_ui::{
widget::Text, AlignItems, BackgroundGradient, ColorStop, Display, FlexDirection, Gradient,
InteractionDisabled, InterpolationColorSpace, JustifyContent, LinearGradient, Node, UiRect,
Val,
InteractionDisabled, InterpolationColorSpace, JustifyContent, LinearGradient, Node, Outline,
UiRect, Val,
};
use bevy_winit::cursor::CursorIcon;

Expand Down Expand Up @@ -190,6 +191,27 @@ fn update_slider_pos(
}
}

fn update_slider_focus(
mut commands: Commands,
focus: Res<InputFocus>,
theme: Res<UiTheme>,
q_sliders: Query<Entity, With<SliderStyle>>,
) {
if focus.is_changed() {
for slider in q_sliders.iter() {
if focus.0 == Some(slider) {
commands.entity(slider).insert(Outline {
color: theme.color(tokens::FOCUS_RING),
width: Val::Px(2.0),
offset: Val::Px(2.0),
});
} else {
commands.entity(slider).remove::<Outline>();
}
}
}
}

/// Plugin which registers the systems for updating the slider styles.
pub struct SliderPlugin;

Expand All @@ -201,6 +223,7 @@ impl Plugin for SliderPlugin {
update_slider_colors,
update_slider_colors_remove,
update_slider_pos,
update_slider_focus,
)
.in_set(PickingSystems::Last),
);
Expand Down
39 changes: 34 additions & 5 deletions crates/bevy_feathers/src/controls/toggle_switch.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ use bevy_app::{Plugin, PreUpdate};
use bevy_core_widgets::{Callback, CoreCheckbox};
use bevy_ecs::{
bundle::Bundle,
change_detection::DetectChanges,
children,
component::Component,
entity::Entity,
Expand All @@ -12,17 +13,19 @@ use bevy_ecs::{
query::{Added, Changed, Has, Or, With},
schedule::IntoScheduleConfigs,
spawn::SpawnRelated,
system::{Commands, In, Query},
system::{Commands, In, Query, Res},
world::Mut,
};
use bevy_input_focus::tab_navigation::TabIndex;
use bevy_input_focus::{tab_navigation::TabIndex, InputFocus};
use bevy_picking::{hover::Hovered, PickingSystems};
use bevy_ui::{BorderRadius, Checked, InteractionDisabled, Node, PositionType, UiRect, Val};
use bevy_ui::{
BorderRadius, Checked, InteractionDisabled, Node, Outline, PositionType, UiRect, Val,
};
use bevy_winit::cursor::CursorIcon;

use crate::{
constants::size,
theme::{ThemeBackgroundColor, ThemeBorderColor},
theme::{ThemeBackgroundColor, ThemeBorderColor, UiTheme},
tokens,
};

Expand Down Expand Up @@ -236,14 +239,40 @@ fn set_switch_colors(
}
}

fn update_switch_focus(
mut commands: Commands,
focus: Res<InputFocus>,
theme: Res<UiTheme>,
q_switches: Query<Entity, With<ToggleSwitchOutline>>,
) {
if focus.is_changed() {
for switch in q_switches.iter() {
if focus.0 == Some(switch) {
commands.entity(switch).insert(Outline {
color: theme.color(tokens::FOCUS_RING),
width: Val::Px(2.0),
offset: Val::Px(2.0),
});
} else {
commands.entity(switch).remove::<Outline>();
}
}
}
}

/// Plugin which registers the systems for updating the toggle switch styles.
pub struct ToggleSwitchPlugin;

impl Plugin for ToggleSwitchPlugin {
fn build(&self, app: &mut bevy_app::App) {
app.add_systems(
PreUpdate,
(update_switch_styles, update_switch_styles_remove).in_set(PickingSystems::Last),
(
update_switch_styles,
update_switch_styles_remove,
update_switch_focus,
)
.in_set(PickingSystems::Last),
);
}
}
1 change: 1 addition & 0 deletions crates/bevy_feathers/src/dark_theme.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ pub fn create_dark_theme() -> ThemeProps {
ThemeProps {
color: HashMap::from([
(tokens::WINDOW_BG.into(), palette::GRAY_0),
(tokens::FOCUS_RING.into(), palette::ACCENT.with_alpha(0.5)),
// Button
(tokens::BUTTON_BG.into(), palette::GRAY_3),
(
Expand Down
Loading