Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Fix switch component style when focused (#35678)

Browse source 
Just making sure the switch's dimensions aren't affected by the need to
having an outer border to represent focus.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-08-05 19:37:25 -03:00 • committed by GitHub
parent 30414d154e
commit f10ffc2a72
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

45
crates/ui/src/components/toggle.rs
View file

@ -504,15 +504,12 @@ impl RenderOnce for Switch {
let group_id = format!("switch_group_{:?}", self.id); let group_id = format!("switch_group_{:?}", self.id);
let switch = h_flex() let switch = div()
.w(DynamicSpacing::Base32.rems(cx)) .id((self.id.clone(), "switch"))
.h(DynamicSpacing::Base20.rems(cx))
.group(group_id.clone())
.border_1()
.p(px(1.0)) .p(px(1.0))
.border_2()
.border_color(cx.theme().colors().border_transparent) .border_color(cx.theme().colors().border_transparent)
.rounded_full() .rounded_full()
.id((self.id.clone(), "switch"))
.when_some( .when_some(
self.tab_index.filter(|_| !self.disabled), self.tab_index.filter(|_| !self.disabled),
|this, tab_index| { |this, tab_index| {
@ -524,23 +521,29 @@ impl RenderOnce for Switch {
) )
.child( .child(
h_flex() h_flex()
.when(is_on, |on| on.justify_end()) .w(DynamicSpacing::Base32.rems(cx))
.when(!is_on, |off| off.justify_start()) .h(DynamicSpacing::Base20.rems(cx))
.size_full() .group(group_id.clone())
.rounded_full()
.px(DynamicSpacing::Base02.px(cx))
.bg(bg_color)
.when(!self.disabled, |this| {
this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
})
.border_1()
.border_color(border_color)
.child( .child(
div() h_flex()
.size(DynamicSpacing::Base12.rems(cx)) .when(is_on, |on| on.justify_end())
.when(!is_on, |off| off.justify_start())
.size_full()
.rounded_full() .rounded_full()
.bg(thumb_color) .px(DynamicSpacing::Base02.px(cx))
.opacity(thumb_opacity), .bg(bg_color)
.when(!self.disabled, |this| {
this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
})
.border_1()
.border_color(border_color)
.child(
div()
.size(DynamicSpacing::Base12.rems(cx))
.rounded_full()
.bg(thumb_color)
.opacity(thumb_opacity),
),
), ),
); );