radio: Render the label based on its own size (#1114)

crates/story/src/radio_story.rs

@@ -4,8 +4,9 @@ use gpui::{
 };
 
 use gpui_component::{
+    h_flex,
     radio::{Radio, RadioGroup},
-    v_flex, ActiveTheme,
+    v_flex, ActiveTheme, Sizable,
 };
 
 use crate::section;
@@ -99,15 +100,42 @@ impl Render for RadioStory {
                         .disabled(true),
                 ),
             )
+            .child(
+                section("Sizeable").child(
+                    h_flex()
+                        .h_full()
+                        .gap_x_4()
+                        .child(
+                            Radio::new("xsmall")
+                                .label("Small")
+                                .xsmall()
+                                .checked(self.radio_check2)
+                                .on_click(cx.listener(|this, v, _, _| {
+                                    this.radio_check2 = *v;
+                                })),
+                        )
+                        .child(
+                            Radio::new("large")
+                                .label("Large")
+                                .large()
+                                .checked(self.radio_check2)
+                                .on_click(cx.listener(|this, v, _, _| {
+                                    this.radio_check2 = *v;
+                                })),
+                        ),
+                ),
+            )
             .child(
                 section("Radio Group").max_w_md().child(
-                    RadioGroup::horizontal("radio_group_1")
+                    v_flex().child(
-                        .children(["One", "Two", "Three"])
+                        RadioGroup::horizontal("radio_group_1")
-                        .selected_index(self.radio_group_checked)
+                            .children(["One", "Two", "Three"])
-                        .on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
+                            .selected_index(self.radio_group_checked)
-                            this.radio_group_checked = Some(*selected_ix);
+                            .on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
-                            cx.notify();
+                                this.radio_group_checked = Some(*selected_ix);
-                        })),
+                                cx.notify();
+                            })),
+                    ),
                 ),
             )
             .child(

crates/ui/src/radio.rs

@@ -112,6 +112,13 @@ impl RenderOnce for Radio {
                 .text_color(cx.theme().foreground)
                 .items_start()
                 .line_height(relative(1.))
+                .map(|this| match self.size {
+                    Size::XSmall => this.text_xs(),
+                    Size::Small => this.text_sm(),
+                    Size::Medium => this.text_base(),
+                    Size::Large => this.text_lg(),
+                    _ => this,
+                })
                 .refine_style(&self.style)
                 .child(
                     div()