zu: Update styles in FormControl

RustVis · Nov 24, 2023 · 0496bbf · 0496bbf
1 parent 8bb79cb
commit 0496bbf
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 24 deletions.
diff --git 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! {
-        <div
-            aria_label={props.aria_label.to_attr()}>
+        <@{props.component.to_string()}
+            aria_label={props.aria_label.to_attr()}
+            class={root_cls}
+            style={props.style.to_attr()}
+        >
             {for props.children.iter()}
-        </div>
+        </@>
     }
 }
diff --git 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%;
+  }
 }
diff --git 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;
   }