From afb54dc5f5e8b7db90ac226f3bc912bea1236107 Mon Sep 17 00:00:00 2001
From: Xu Shaohua <shaohua@biofan.org>
Date: Sat, 25 Nov 2023 09:34:00 +0800
Subject: [PATCH] zu: Impl RadioGroup

---
 crates/zu/src/form_group/mod.rs  |  4 ++++
 crates/zu/src/radio_group/mod.rs | 33 ++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/crates/zu/src/form_group/mod.rs b/crates/zu/src/form_group/mod.rs
index c33261345..be0de9688 100644
--- a/crates/zu/src/form_group/mod.rs
+++ b/crates/zu/src/form_group/mod.rs
@@ -21,6 +21,9 @@ pub struct Props {
     #[prop_or(false)]
     pub error: bool,
 
+    #[prop_or_default]
+    pub role: AttrValue,
+
     /// Display group of elements in a compact row.
     #[prop_or(false)]
     pub row: bool,
@@ -42,6 +45,7 @@ pub fn form_group(props: &Props) -> Html {
         <div
             aria-label={props.aria_label.to_attr()}
             class={root_cls}
+            role={props.role.to_attr()}
             style={props.style.to_attr()}>
             {for props.children.iter()}
         </div>
diff --git a/crates/zu/src/radio_group/mod.rs b/crates/zu/src/radio_group/mod.rs
index 5fbbebecf..b6fcfcdc1 100644
--- a/crates/zu/src/radio_group/mod.rs
+++ b/crates/zu/src/radio_group/mod.rs
@@ -2,36 +2,61 @@
 // Use of this source is governed by Lesser General Public License that can be
 // found in the LICENSE file.
 
-use yew::{function_component, html, AttrValue, Callback, Children, Html, Properties};
+use yew::{function_component, html, AttrValue, Callback, Children, Classes, Html, Properties};
+
+use crate::form_group::FormGroup;
 
 #[derive(Debug, Clone, PartialEq, Properties)]
 pub struct Props {
     #[prop_or_default]
     pub aria_labelled_by: AttrValue,
 
+    /// The content of the component.
     #[prop_or_default]
     pub children: Children,
 
+    #[prop_or_default]
+    pub classes: Classes,
+
+    /// The default value.
+    ///
+    /// Use when the component is not controlled.
     #[prop_or_default]
     pub default_value: AttrValue,
 
+    /// The name used to reference the value of the control.
+    ///
+    /// If you don't provide this prop, it falls back to a randomly generated name.
     #[prop_or_default]
     pub name: AttrValue,
 
+    /// Callback fired when a radio button is selected.
     #[prop_or_default]
     pub on_change: Option<Callback<String>>,
 
+    /// Show in row mode or not.
+    ///
+    /// Default is false, which means showing in column mode.
     #[prop_or(false)]
     pub row: bool,
 
+    #[prop_or_default]
+    pub style: AttrValue,
+
+    /// Value of the selected radio button. The DOM API casts this to a string.
     #[prop_or_default]
     pub value: AttrValue,
 }
 
 #[function_component(RadioGroup)]
-pub fn radio_group(_props: &Props) -> Html {
+pub fn radio_group(props: &Props) -> Html {
     html! {
-        <>
-        </>
+        <FormGroup
+            classes={&props.classes}
+            role="radio-group"
+            style={&props.style}
+        >
+            {for props.children.iter()}
+        </FormGroup>
     }
 }