From 4fb91135d1d043c4707950df4109c6e0a1599f8c Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 24 Oct 2025 02:47:53 -0300 Subject: [PATCH] ui: Use `focus_visible` method for some components (#41077) Using the cool, [recently added](https://github.com/zed-industries/zed/pull/40940) `focus-visible` support in some components. This will be particularly nice in the settings UI, as it will not display the focus styles if you're navigating it with a pointer device as opposed to the keyboard. Release Notes: - N/A --- crates/settings_ui/src/settings_ui.rs | 7 +++--- .../ui/src/components/button/button_like.rs | 22 ++++++++++--------- crates/ui/src/components/toggle.rs | 2 +- crates/ui/src/components/tree_view_item.rs | 2 +- crates/ui_input/src/number_field.rs | 2 +- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/crates/settings_ui/src/settings_ui.rs b/crates/settings_ui/src/settings_ui.rs index d13370ed1786c7860463f829fa16984d112c3705..c43b8095a435eb40c25694deda2cf247d7992ca5 100644 --- a/crates/settings_ui/src/settings_ui.rs +++ b/crates/settings_ui/src/settings_ui.rs @@ -3195,7 +3195,8 @@ fn render_toggle_button + From + Copy>( }; Switch::new("toggle_button", toggle_state) - .color(ui::SwitchColor::Accent) + .tab_index(0_isize) + .color(SwitchColor::Accent) .on_click({ move |state, _window, cx| { let state = *state == ui::ToggleState::Selected; @@ -3205,8 +3206,6 @@ fn render_toggle_button + From + Copy>( .log_err(); // todo(settings_ui) don't log err } }) - .tab_index(0_isize) - .color(SwitchColor::Accent) .into_any_element() } @@ -3290,13 +3289,13 @@ where }) }), ) + .tab_index(0) .trigger_size(ButtonSize::Medium) .style(DropdownStyle::Outlined) .offset(gpui::Point { x: px(0.0), y: px(2.0), }) - .tab_index(0) .into_any_element() } diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs index 0c8893e2cccb64243f373126429a823b919bca42..4ce7aeed0d80b579207b2546ee5ac35d0ac8865d 100644 --- a/crates/ui/src/components/button/button_like.rs +++ b/crates/ui/src/components/button/button_like.rs @@ -640,6 +640,11 @@ impl RenderOnce for ButtonLike { .filter(|_| self.selected) .unwrap_or(self.style); + let is_outlined = matches!( + self.style, + ButtonStyle::Outlined | ButtonStyle::OutlinedGhost + ); + self.base .h_flex() .id(self.id.clone()) @@ -654,13 +659,7 @@ impl RenderOnce for ButtonLike { .when_some(self.width, |this, width| { this.w(width).justify_center().text_center() }) - .when( - matches!( - self.style, - ButtonStyle::Outlined | ButtonStyle::OutlinedGhost - ), - |this| this.border_1(), - ) + .when(is_outlined, |this| this.border_1()) .when_some(self.rounding, |this, rounding| { this.when(rounding.top_left, |this| this.rounded_tl_sm()) .when(rounding.top_right, |this| this.rounded_tr_sm()) @@ -688,13 +687,16 @@ impl RenderOnce for ButtonLike { let hovered_style = style.hovered(self.layer, cx); let focus_color = |refinement: StyleRefinement| refinement.bg(hovered_style.background); + this.cursor(self.cursor_style) .hover(focus_color) .map(|this| { - if matches!(self.style, ButtonStyle::Outlined) { - this.focus(|s| s.border_color(cx.theme().colors().border_focused)) + if is_outlined { + this.focus_visible(|s| { + s.border_color(cx.theme().colors().border_focused) + }) } else { - this.focus(focus_color) + this.focus_visible(focus_color) } }) .active(|active| active.bg(style.active(cx).background)) diff --git a/crates/ui/src/components/toggle.rs b/crates/ui/src/components/toggle.rs index 8d582c11e77f4469bb959ec656c9d6800603a72e..ab66b71996d6c7b64d0d3867ab73bd9727816316 100644 --- a/crates/ui/src/components/toggle.rs +++ b/crates/ui/src/components/toggle.rs @@ -514,7 +514,7 @@ impl RenderOnce for Switch { self.tab_index.filter(|_| !self.disabled), |this, tab_index| { this.tab_index(tab_index) - .focus(|mut style| { + .focus_visible(|mut style| { style.border_color = Some(cx.theme().colors().border_focused); style }) diff --git a/crates/ui/src/components/tree_view_item.rs b/crates/ui/src/components/tree_view_item.rs index 8647b13a65dee64fd825c814303815241547cd75..c96800223d9328779a2e71194a31315e1d57c175 100644 --- a/crates/ui/src/components/tree_view_item.rs +++ b/crates/ui/src/components/tree_view_item.rs @@ -159,7 +159,7 @@ impl RenderOnce for TreeViewItem { .rounded_sm() .border_1() .border_color(transparent_border) - .focus(|s| s.border_color(focused_border)) + .focus_visible(|s| s.border_color(focused_border)) .when(self.selected, |this| { this.border_color(selected_border).bg(selected_bg) }) diff --git a/crates/ui_input/src/number_field.rs b/crates/ui_input/src/number_field.rs index 929b3851a9127f7ba8f44d954f32ddedcdfa68b6..2bc13fd2914b55449f3c6f5e3cec8f2ec08091ef 100644 --- a/crates/ui_input/src/number_field.rs +++ b/crates/ui_input/src/number_field.rs @@ -338,7 +338,7 @@ impl RenderOnce for NumberField { .border_color(border_color) .bg(bg_color) .hover(|s| s.bg(hover_bg_color)) - .focus(|s| s.border_color(focus_border_color).bg(hover_bg_color)) + .focus_visible(|s| s.border_color(focus_border_color).bg(hover_bg_color)) .child(Icon::new(icon).size(IconSize::Small)) };