chore: Fix Switch, Radio, Checkbox to use inline layout. (#569)

crates/story/src/form_story.rs

@@ -4,6 +4,7 @@ use gpui::{
 };
 use ui::{
     button::{Button, ButtonGroup},
+    checkbox::Checkbox,
     date_picker::DatePicker,
     divider::Divider,
     form::{form_field, v_form},
@@ -196,6 +197,21 @@ impl Render for FormStory {
                                     cx.notify();
                                 })),
                         ),
+                    )
+                    .child(
+                        form_field().child(
+                            Checkbox::new("use-vertical-layout")
+                                .label("Vertical layout")
+                                .checked(self.layout.is_vertical())
+                                .on_click(cx.listener(|this, checked: &bool, cx| {
+                                    this.layout = if *checked {
+                                        Axis::Vertical
+                                    } else {
+                                        Axis::Horizontal
+                                    };
+                                    cx.notify();
+                                })),
+                        ),
                     ),
             )
     }

crates/ui/src/checkbox.rs

@@ -70,6 +70,8 @@ impl RenderOnce for Checkbox {
             (cx.theme().primary, cx.theme().primary_foreground)
         };
 
+        // wrap a flex to patch for let Checkbox display inline
+        div().flex().child(
             h_flex()
                 .id(self.id)
                 .gap_2()
@@ -126,6 +128,7 @@ impl RenderOnce for Checkbox {
                             on_click(&checked, cx);
                         })
                     },
+                ),
         )
     }
 }

crates/ui/src/radio.rs

@@ -56,6 +56,8 @@ impl RenderOnce for Radio {
             cx.theme().primary
         };
 
+        // wrap a flex to patch for let Radio display inline
+        div().flex().child(
             h_flex()
                 .id(self.id)
                 .gap_x_2()
@@ -104,6 +106,7 @@ impl RenderOnce for Radio {
                             on_click(&!self.checked, cx);
                         })
                     },
+                ),
         )
     }
 }

crates/ui/src/switch.rs

@@ -122,7 +122,10 @@ impl Element for Switch {
             };
             let inset = px(2.);
 
-            let mut element = h_flex()
+            let mut element = div()
+                .flex()
+                .child(
+                    h_flex()
                         .id(self.id.clone())
                         .items_center()
                         .gap_2()
@@ -142,11 +145,8 @@ impl Element for Switch {
                                 .when(!self.disabled, |this| this.cursor_pointer())
                                 .child(
                                     // Switch Toggle
-                            div()
+                                    div().rounded_full().bg(toggle_bg).size(bar_width).map(
-                                .rounded_full()
+                                        |this| {
-                                .bg(toggle_bg)
-                                .size(bar_width)
-                                .map(|this| {
                                             let prev_checked = state.prev_checked.clone();
                                             if !self.disabled
                                                 && prev_checked
@@ -167,7 +167,8 @@ impl Element for Switch {
                                                     ),
                                                     Animation::new(dur),
                                                     move |this, delta| {
-                                                let max_x = bg_width - bar_width - inset * 2;
+                                                        let max_x =
+                                                            bg_width - bar_width - inset * 2;
                                                         let x = if checked {
                                                             max_x * delta
                                                         } else {
@@ -182,7 +183,8 @@ impl Element for Switch {
                                                 let x = if checked { max_x } else { px(0.) };
                                                 this.left(x).into_any_element()
                                             }
-                                }),
+                                        },
+                                    ),
                                 ),
                         )
                         .when_some(self.label.clone(), |this, label| {
@@ -204,6 +206,7 @@ impl Element for Switch {
                                     on_click(&!checked, cx);
                                 })
                             },
+                        ),
                 )
                 .into_any_element();