diff --git a/crates/zu/src/form_control/mod.rs b/crates/zu/src/form_control/mod.rs
index 88ded276f..cfaf6861a 100644
--- a/crates/zu/src/form_control/mod.rs
+++ b/crates/zu/src/form_control/mod.rs
@@ -4,12 +4,13 @@
mod margin;
-use yew::{function_component, html, AttrValue, Children, Classes, Html, Properties};
+use yew::{classes, function_component, html, AttrValue, Children, Classes, Html, Properties};
use zu_util::prop::ToAttr;
use crate::styles::color::Color;
use crate::styles::label_variant::LabelVariant;
use crate::styles::margin::Margin;
+use crate::styles::size::Size;
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct Props {
@@ -25,7 +26,7 @@ pub struct Props {
#[prop_or_default]
pub color: Color,
- #[prop_or_default]
+ #[prop_or(AttrValue::from("div"))]
pub component: AttrValue,
#[prop_or(false)]
@@ -53,6 +54,9 @@ pub struct Props {
#[prop_or(false)]
pub required: bool,
+ #[prop_or_default]
+ pub size: Size,
+
#[prop_or_default]
pub style: AttrValue,
@@ -62,10 +66,32 @@ pub struct Props {
#[function_component(FormControl)]
pub fn form_control(props: &Props) -> Html {
+ let root_cls = classes!(
+ "ZuFormControl-root",
+ margin::css_class(props.margin),
+ if props.full_width {
+ "ZuFormControl-fullWidth"
+ } else {
+ ""
+ },
+ props.classes.clone(),
+ );
+
+ // TODO(Shaohua): Handle properties
+ // - size
+ // - variant
+ // - disabled
+ // - required
+ // - hidden_label
+ // - focused
+
html! {
-
+ <@{props.component.to_string()}
+ aria_label={props.aria_label.to_attr()}
+ class={root_cls}
+ style={props.style.to_attr()}
+ >
{for props.children.iter()}
-
+ @>
}
}
diff --git a/crates/zu/src/form_control/style.scss b/crates/zu/src/form_control/style.scss
index ff0ef0065..81772f578 100644
--- a/crates/zu/src/form_control/style.scss
+++ b/crates/zu/src/form_control/style.scss
@@ -3,20 +3,31 @@
// Styles applied to the root element.
.ZuFormControl-root {
-
-}
-
-// Styles applied to the root element if margin="normal".
-.ZuFormControl-marginNormal {
-
-}
-
-// Styles applied to the root element if margin="dense".
-.ZuFormControl-marginDense {
-
-}
-
-// Styles applied to the root element if fullWidth={true}.
-.ZuFormControl-fullWidth {
-
+ display: inline-flex;
+ flex-direction: column;
+ position: relative;
+ // Reset fieldset default style.
+ min-width: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ vertical-align: top; // Fix alignment issue on Safari.
+
+
+ // Styles applied to the root element if margin="normal".
+ &.ZuFormControl-marginNormal {
+ margin-top: 16px;
+ margin-bottom: 8px;
+ }
+
+ // Styles applied to the root element if margin="dense".
+ &.ZuFormControl-marginDense {
+ margin-top: 8px;
+ margin-bottom: 4px;
+ }
+
+ // Styles applied to the root element if fullWidth={true}.
+ &.ZuFormControl-fullWidth {
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/crates/zu/src/form_control_label/style.scss b/crates/zu/src/form_control_label/style.scss
index d2705d61f..be24d7db1 100644
--- a/crates/zu/src/form_control_label/style.scss
+++ b/crates/zu/src/form_control_label/style.scss
@@ -17,20 +17,20 @@
}
// Styles applied to the root element if labelPlacement="start".
- .ZuFormControlLabel-labelPlacementStart {
+ &.ZuFormControlLabel-labelPlacementStart {
flex-direction: row-reverse;
margin-left: 16px; // used for row presentation of radio/checkbox
margin-right: -11px;
}
// Styles applied to the root element if labelPlacement="top".
- .ZuFormControlLabel-labelPlacementTop {
+ &.ZuFormControlLabel-labelPlacementTop {
flex-direction: column-reverse;
margin-left: 16px;
}
// Styles applied to the root element if labelPlacement="bottom".
- .ZuFormControlLabel-labelPlacementBottom {
+ &.ZuFormControlLabel-labelPlacementBottom {
flex-direction: column;
margin-left: 16px;
}