Update Visually Hidden to Leptos 0.7 (#403)

Cargo.toml

@@ -16,6 +16,7 @@ members = [
     "packages/icons/yew",
     "packages/primitives/leptos/id",
     "packages/primitives/leptos/label",
+    "packages/primitives/leptos/visually-hidden",
     "packages/primitives/yew/*",
     "packages/themes/yew",
     "scripts",
@@ -37,6 +38,7 @@ dioxus = "0.6.1"
 leptos = "0.7.2"
 leptos_dom = "0.7.2"
 leptos_router = "0.7.2"
+leptos-style = "0.0.3"
 log = "0.4.22"
 serde = "1.0.198"
 serde_json = "1.0.116"

packages/primitives/leptos/label/src/label.rs

@@ -11,7 +11,7 @@ pub struct UseLabelReturn {
 pub fn use_label(props: UseLabelProps) -> UseLabelReturn {
     UseLabelReturn {
         on_mouse_down: Callback::new(move |event: MouseEvent| {
-            // Only prevent text selection if clicking inside the label itself
+            // Only prevent text selection if clicking inside the label itself.
             let target = event_target::<web_sys::Element>(&event);
             if target
                 .closest("button, input, select, textarea")
@@ -25,7 +25,7 @@ pub fn use_label(props: UseLabelProps) -> UseLabelReturn {
                 on_mouse_down.run(event.clone());
             }
 
-            // Prevent text selection when double clicking label
+            // Prevent text selection when double clicking label.
             if !event.default_prevented() && event.detail() > 1 {
                 event.prevent_default();
             }

packages/primitives/leptos/visually-hidden/Cargo.toml

@@ -11,4 +11,4 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-style.workspace = true

packages/primitives/leptos/visually-hidden/src/visually_hidden.rs

@@ -1,28 +1,42 @@
-use leptos::{html::AnyElement, *};
-use radix_leptos_primitive::Primitive;
+use leptos::prelude::*;
+use leptos_style::Style;
+
+pub struct UseVisuallyHiddenProps {
+    style: Style,
+}
+
+pub struct UseVisuallyHiddenReturn {
+    style: Style,
+}
+
+pub fn use_visually_hidden(props: UseVisuallyHiddenProps) -> UseVisuallyHiddenReturn {
+    UseVisuallyHiddenReturn {
+        style: props.style.with_defaults([
+            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+            ("position", "absolute"),
+            ("border", "0px"),
+            ("width", "1px"),
+            ("height", "1px"),
+            ("padding", "0px"),
+            ("margin", "-1px"),
+            ("overflow", "hidden"),
+            ("clip", "rect(0, 0, 0, 0)"),
+            ("white-space", "nowrap"),
+            ("word-wrap", "normal"),
+        ]),
+    }
+}
 
 #[component]
 pub fn VisuallyHidden(
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
+    #[prop(into, optional)] style: Style,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    // TODO: replace with style:<name> attributes once they work properly in Leptos (probably in 0.7?)
-    let mut attrs = attrs.clone();
-    attrs.extend([
-        // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-        ("style", "position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;".into_attribute()
-    )]);
+    let UseVisuallyHiddenReturn { style } = use_visually_hidden(UseVisuallyHiddenProps { style });
 
     view! {
-        <Primitive
-            element=html::span
-            as_child=as_child
-            node_ref=node_ref
-            attrs=attrs
-        >
-            {children()}
-        </Primitive>
+        <span style=style>
+            {children.map(|children| children())}
+        </span>
     }
 }

stories/leptos/Cargo.toml

@@ -34,6 +34,6 @@ radix-leptos-label = { path = "../../packages/primitives/leptos/label" }
 # radix-leptos-slot = { path = "../../packages/primitives/leptos/slot" }
 # radix-leptos-switch = { path = "../../packages/primitives/leptos/switch" }
 # radix-leptos-toggle = { path = "../../packages/primitives/leptos/toggle" }
-# radix-leptos-visually-hidden = { path = "../../packages/primitives/leptos/visually-hidden" }
+radix-leptos-visually-hidden = { path = "../../packages/primitives/leptos/visually-hidden" }
 tailwind_fuse.workspace = true
 web-sys.workspace = true

stories/leptos/index.html

@@ -3,5 +3,5 @@
     <head>
         <link data-trunk rel="css" href="/style/tailwind.output.css" />
     </head>
-    <body></body>
+    <body class="m-0 p-0 font-sans"></body>
 </html>