feat: spacing attribute

crates/components/src/dropdown.rs

@@ -243,6 +243,7 @@ where
 
     let DropdownTheme {
         width,
+        margin,
         font_theme,
         dropdown_background,
         background_button,
@@ -267,7 +268,7 @@ where
                 onmouseleave,
                 onclick,
                 onkeydown,
-                margin: "4",
+                margin: "{margin}",
                 focus_id,
                 background: "{button_background}",
                 color: "{font_theme.color}",
@@ -299,7 +300,7 @@ where
                             onglobalclick,
                             onkeydown,
                             layer: "-99",
-                            margin: "4",
+                            margin: "{margin}",
                             border: "1 solid {border_fill}",
                             overflow: "clip",
                             corner_radius: "8",

crates/components/src/link.rs

@@ -279,7 +279,7 @@ mod test {
         // Go to the "Somewhere" route
         utils.push_event(PlatformEvent::Mouse {
             name: EventName::Click,
-            cursor: (5., 70.).into(),
+            cursor: (5., 60.).into(),
             button: Some(MouseButton::Left),
         });
 

crates/components/src/scroll_views/scroll_view.rs

@@ -130,6 +130,7 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let theme = use_applied_theme!(&props.theme, scroll_view);
     let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
 
+    let spacing = &theme.spacing;
     let padding = &theme.padding;
     let user_container_width = &theme.width;
     let user_container_height = &theme.height;
@@ -359,6 +360,7 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                 height: "{container_height}",
                 rect {
                     overflow: "clip",
+                    spacing: "{spacing}",
                     padding: "{padding}",
                     height: "100%",
                     width: "100%",

crates/components/src/sidebar.rs

@@ -29,6 +29,7 @@ pub fn Sidebar(
     sidebar: Element,
 ) -> Element {
     let SidebarTheme {
+        spacing,
         font_theme,
         background,
     } = use_applied_theme!(&theme, sidebar);
@@ -48,6 +49,7 @@ pub fn Sidebar(
                 ScrollView {
                     theme: theme_with!(ScrollViewTheme {
                         padding: "8".into(),
+                        spacing: spacing,
                     }),
                     {sidebar}
                 }
@@ -74,6 +76,7 @@ pub fn SidebarItem(
     onclick: Option<EventHandler<()>>,
 ) -> Element {
     let SidebarItemTheme {
+        margin,
         hover_background,
         background,
         font_theme,
@@ -113,7 +116,7 @@ pub fn SidebarItem(
     rsx!(
         rect {
             overflow: "clip",
-            margin: "4 0",
+            margin: "{margin}",
             onclick,
             onmouseenter,
             onmouseleave,

crates/components/src/switch.rs

@@ -148,7 +148,7 @@ pub fn Switch(props: SwitchProps) -> Element {
 
     rsx!(
         rect {
-            margin: "1.5",
+            margin: "{theme.margin}",
             width: "50",
             height: "25",
             padding: "1",

crates/core/src/dom/dom_adapter.rs

@@ -62,6 +62,7 @@ impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
             position: layout.position,
             content: layout.content,
             contains_text,
+            spacing: layout.spacing,
         };
 
         node.scale(self.scale_factor);

crates/elements/src/_docs/attributes/spacing.md

@@ -0,0 +1,35 @@
+Specify a space between the inner elements. Think it as a margin for every element but defined by its parent.
+It only applies to the side of the direction.
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            direction: "vertical",
+            spacing: "20",
+            // Not before
+            rect {
+                width: "100",
+                height: "100",
+                background: "red",
+            }
+            // There will be a space between these two elements of 20 pixels
+            rect {
+                width: "100",
+                height: "100",
+                background: "blue",
+            }
+            // Here as well
+            rect {
+                width: "100",
+                height: "100",
+                background: "green",
+            }
+            // But not after
+        }
+    )
+}
+```

crates/elements/src/definitions.rs

@@ -230,6 +230,8 @@ builder_constructors! {
         content: String,
         #[doc = include_str!("_docs/attributes/line_height.md")]
         line_height: String,
+        #[doc = include_str!("_docs/attributes/spacing.md")]
+        spacing: String,
 
         name: String,
         focusable: String,

crates/hooks/src/theming/dark.rs

@@ -47,6 +47,7 @@ pub const DARK_THEME: Theme = Theme {
         shadow: LIGHT_THEME.input.shadow,
     },
     switch: SwitchTheme {
+        margin: LIGHT_THEME.input.margin,
         background: cow_borrowed!("rgb(60, 60, 60)"),
         thumb_background: cow_borrowed!("rgb(200, 200, 200)"),
         enabled_background: cow_borrowed!("rgb(255, 95, 0)"),
@@ -65,6 +66,7 @@ pub const DARK_THEME: Theme = Theme {
         height: LIGHT_THEME.scroll_view.height,
         width: LIGHT_THEME.scroll_view.width,
         padding: LIGHT_THEME.scroll_view.padding,
+        spacing: LIGHT_THEME.scroll_view.spacing,
     },
     tooltip: TooltipTheme {
         background: cow_borrowed!("rgb(35,35,35)"),
@@ -73,6 +75,7 @@ pub const DARK_THEME: Theme = Theme {
     },
     dropdown: DropdownTheme {
         width: LIGHT_THEME.dropdown.width,
+        margin: LIGHT_THEME.dropdown.margin,
         dropdown_background: cow_borrowed!("rgb(25, 25, 25)"),
         background_button: cow_borrowed!("rgb(35, 35, 35)"),
         hover_background: cow_borrowed!("rgb(45, 45, 45)"),
@@ -140,12 +143,14 @@ pub const DARK_THEME: Theme = Theme {
         margin: LIGHT_THEME.icon.margin,
     },
     sidebar: SidebarTheme {
+        spacing: LIGHT_THEME.sidebar.spacing,
         background: cow_borrowed!("rgb(20, 20, 20)"),
         font_theme: FontTheme {
             color: cow_borrowed!("white"),
         },
     },
     sidebar_item: SidebarItemTheme {
+        margin: LIGHT_THEME.sidebar_item.margin,
         background: cow_borrowed!("transparent"),
         hover_background: cow_borrowed!("rgb(45, 45, 45)"),
         font_theme: FontTheme {

crates/hooks/src/theming/light.rs

@@ -26,7 +26,7 @@ pub const LIGHT_THEME: Theme = Theme {
         focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
         shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
         padding: cow_borrowed!("8 12"),
-        margin: cow_borrowed!("4"),
+        margin: cow_borrowed!("0"),
         corner_radius: cow_borrowed!("8"),
         width: cow_borrowed!("auto"),
         height: cow_borrowed!("auto"),
@@ -42,11 +42,12 @@ pub const LIGHT_THEME: Theme = Theme {
         },
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
         width: cow_borrowed!("150"),
-        margin: cow_borrowed!("4"),
+        margin: cow_borrowed!("0"),
         corner_radius: cow_borrowed!("10"),
         shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
     },
     switch: SwitchTheme {
+        margin: cow_borrowed!("0"),
         background: cow_borrowed!("rgb(121, 116, 126)"),
         thumb_background: cow_borrowed!("rgb(231, 224, 236)"),
         enabled_background: cow_borrowed!("rgb(103, 80, 164)"),
@@ -65,6 +66,7 @@ pub const LIGHT_THEME: Theme = Theme {
         height: cow_borrowed!("fill"),
         width: cow_borrowed!("fill"),
         padding: cow_borrowed!("0"),
+        spacing: cow_borrowed!("0"),
     },
     tooltip: TooltipTheme {
         background: cow_borrowed!("rgb(245, 245, 245)"),
@@ -73,6 +75,7 @@ pub const LIGHT_THEME: Theme = Theme {
     },
     dropdown: DropdownTheme {
         width: cow_borrowed!("auto"),
+        margin: cow_borrowed!("0"),
         dropdown_background: cow_borrowed!("white"),
         background_button: cow_borrowed!("rgb(245, 245, 245)"),
         hover_background: cow_borrowed!("rgb(235, 235, 235)"),
@@ -137,15 +140,17 @@ pub const LIGHT_THEME: Theme = Theme {
     icon: IconTheme {
         width: cow_borrowed!("10"),
         height: cow_borrowed!("10"),
-        margin: cow_borrowed!("none"),
+        margin: cow_borrowed!("0"),
     },
     sidebar: SidebarTheme {
+        spacing: cow_borrowed!("4"),
         background: cow_borrowed!("rgb(245, 245, 245)"),
         font_theme: FontTheme {
             color: cow_borrowed!("rgb(10, 10, 10)"),
         },
     },
     sidebar_item: SidebarItemTheme {
+        margin: cow_borrowed!("0"),
         background: cow_borrowed!("transparent"),
         hover_background: cow_borrowed!("rgb(230, 230, 230)"),
         font_theme: FontTheme {

crates/hooks/src/theming/mod.rs

@@ -225,6 +225,7 @@ define_theme! {
     pub Dropdown {
         %[cows]
         width: str,
+        margin: str,
         dropdown_background: str,
         background_button: str,
         hover_background: str,
@@ -295,6 +296,7 @@ define_theme! {
     %[component]
     pub Switch {
         %[cows]
+        margin: str,
         background: str,
         thumb_background: str,
         enabled_background: str,
@@ -323,6 +325,7 @@ define_theme! {
         %[cows]
         height: str,
         width: str,
+        spacing: str,
         padding: str,
     }
 }
@@ -455,6 +458,7 @@ define_theme! {
     %[component]
     pub Sidebar {
         %[cows]
+        spacing: str,
         background: str,
         %[subthemes]
         font_theme: FontTheme,
@@ -465,6 +469,7 @@ define_theme! {
     %[component]
     pub SidebarItem {
         %[cows]
+        margin: str,
         background: str,
         hover_background: str,
         %[subthemes]

crates/native-core/src/attributes.rs

@@ -66,6 +66,7 @@ pub enum AttributeName {
     ImageData,
     SvgData,
     SvgContent,
+    Spacing,
 }
 
 impl FromStr for AttributeName {
@@ -137,6 +138,7 @@ impl FromStr for AttributeName {
             "image_data" => Ok(AttributeName::ImageData),
             "svg_data" => Ok(AttributeName::SvgData),
             "svg_content" => Ok(AttributeName::SvgContent),
+            "spacing" => Ok(AttributeName::Spacing),
             _ => Err(format!("{attr} not supported.")),
         }
     }

crates/state/src/layout.rs

@@ -48,6 +48,7 @@ pub struct LayoutState {
     pub content: Content,
     pub node_ref: Option<NodeReference>,
     pub node_id: NodeId,
+    pub spacing: Length,
 }
 
 impl ParseAttribute for LayoutState {
@@ -167,6 +168,11 @@ impl ParseAttribute for LayoutState {
                     self.node_ref = Some(reference.clone());
                 }
             }
+            AttributeName::Spacing => {
+                if let Some(value) = attr.value.as_text() {
+                    self.spacing = Length::new(value.parse::<f32>().map_err(|_| ParseError)?);
+                }
+            }
             _ => {}
         }
         Ok(())
@@ -203,6 +209,7 @@ impl State<CustomAttributeValues> for LayoutState {
             AttributeName::PositionBottom,
             AttributeName::PositionLeft,
             AttributeName::Content,
+            AttributeName::Spacing,
         ]));
 
     fn update<'a>(