From 0ab497ea1d9a82a6ad9e7a48ef4205492505a48a Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Wed, 6 Aug 2025 15:29:07 +0800
Subject: [PATCH] radio: Render the label based on its own size (#1114)

---
 crates/story/src/radio_story.rs | 44 +++++++++++++++++++++++++++------
 crates/ui/src/radio.rs          |  7 ++++++
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/crates/story/src/radio_story.rs b/crates/story/src/radio_story.rs
index 6fe8e4ba..2985352c 100644
--- a/crates/story/src/radio_story.rs
+++ b/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")
-                        .children(["One", "Two", "Three"])
-                        .selected_index(self.radio_group_checked)
-                        .on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
-                            this.radio_group_checked = Some(*selected_ix);
-                            cx.notify();
-                        })),
+                    v_flex().child(
+                        RadioGroup::horizontal("radio_group_1")
+                            .children(["One", "Two", "Three"])
+                            .selected_index(self.radio_group_checked)
+                            .on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
+                                this.radio_group_checked = Some(*selected_ix);
+                                cx.notify();
+                            })),
+                    ),
                 ),
             )
             .child(
diff --git a/crates/ui/src/radio.rs b/crates/ui/src/radio.rs
index d77702da..f009fa53 100644
--- a/crates/ui/src/radio.rs
+++ b/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()