zu: Add more props to Button

crates/zu/src/button/mod.rs

@@ -11,7 +11,7 @@ use yew::{
     FocusEvent, Html, KeyboardEvent, MouseEvent, Properties, TouchEvent,
 };
 
-use crate::button_base::ButtonBase;
+use crate::button_base::{ButtonBase, ButtonType};
 use crate::styles::button_variant::ButtonVariant;
 use crate::styles::{color::Color, size::Size};
 
@@ -20,6 +20,9 @@ pub struct Props {
     #[prop_or_default]
     pub aria_label: AttrValue,
 
+    #[prop_or_default]
+    pub button_type: ButtonType,
+
     #[prop_or_default]
     pub children: Children,
 
@@ -195,6 +198,7 @@ pub fn button(props: &Props) -> Html {
         <ButtonBase
             classes={root_cls}
             aria_label={&props.aria_label}
+            button_type={props.button_type}
             component={props.component.clone()}
             disabled={props.disabled}
             disable_ripple={props.disable_ripple}

crates/zu/src/button_base/button_type.rs

@@ -0,0 +1,30 @@
+// Copyright (c) 2023 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
+// Use of this source is governed by Apache-2.0 License that can be found
+// in the LICENSE file.
+
+use crate::styles::CssValue;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ButtonType {
+    Button,
+    Reset,
+    Submit,
+}
+
+impl Default for ButtonType {
+    fn default() -> Self {
+        Self::Button
+    }
+}
+
+impl CssValue for ButtonType {
+    #[inline]
+    #[must_use]
+    fn css_value(&self) -> &'static str {
+        match self {
+            Self::Button => "button",
+            Self::Reset => "reset",
+            Self::Submit => "submit",
+        }
+    }
+}

crates/zu/src/button_base/mod.rs

@@ -7,6 +7,7 @@
 //! It aims to be a simple building block for creating a button.
 //! It contains a load of style reset and some focus/ripple logic.
 
+mod button_type;
 mod touch_ripple;
 
 use yew::{
@@ -15,13 +16,18 @@ use yew::{
 };
 use zu_util::prop::ToAttr;
 
+use crate::styles::CssValue;
+pub use button_type::ButtonType;
 pub use touch_ripple::TouchRipple;
 
 #[derive(Debug, Clone, PartialEq, Properties)]
 pub struct Props {
     #[prop_or_default]
     pub aria_label: AttrValue,
 
+    #[prop_or_default]
+    pub button_type: ButtonType,
+
     // TODO(Shaohua): Add action ref.
     /// If true, the ripples are centered.
     #[prop_or(false)]
@@ -170,7 +176,7 @@ pub fn button_base(props: &Props) -> Html {
             aria-label={props.aria_label.to_attr()}
             disabled={props.disabled}
             tab_index={tab_index}
-            type="button"
+            type={props.button_type.css_value()}
             onblur={props.on_blur.clone()}
             onclick={props.on_click.clone()}
             oncontextmenu={props.on_context_menu.clone()}

crates/zu/src/form_label/mod.rs

@@ -45,6 +45,9 @@ pub struct Props {
     #[prop_or(false)]
     pub focused: bool,
 
+    #[prop_or_default]
+    pub id: AttrValue,
+
     /// If true, the label will indicate that the input is required.
     #[prop_or(false)]
     pub required: bool,

crates/zu/src/radio/mod.rs

@@ -33,11 +33,14 @@ pub struct Props {
     #[prop_or_default]
     pub id: AttrValue,
 
+    #[prop_or_default]
+    pub input_aria_label: AttrValue,
+
     #[prop_or_default]
     pub name: AttrValue,
 
     #[prop_or_default]
-    pub on_change: Option<Callback<()>>,
+    pub on_change: Option<Callback<String>>,
 
     #[prop_or(false)]
     pub required: bool,

crates/zu/src/radio_group/mod.rs

@@ -6,6 +6,9 @@ use yew::{function_component, html, AttrValue, Callback, Children, Html, Propert
 
 #[derive(Debug, Clone, PartialEq, Properties)]
 pub struct Props {
+    #[prop_or_default]
+    pub aria_labelled_by: AttrValue,
+
     #[prop_or_default]
     pub children: Children,
 
@@ -18,6 +21,9 @@ pub struct Props {
     #[prop_or_default]
     pub on_change: Option<Callback<String>>,
 
+    #[prop_or(false)]
+    pub row: bool,
+
     #[prop_or_default]
     pub value: AttrValue,
 }