From 188adafa0c29402d668bb7720d77ab8358946692 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABlle=20Huisman?= Date: Sun, 5 Jan 2025 10:06:32 +0100 Subject: [PATCH] Update Visually Hidden to Leptos 0.7 (#403) --- Cargo.lock | 19 ++ Cargo.toml | 2 + packages/primitives/leptos/label/src/label.rs | 4 +- .../leptos/visually-hidden/Cargo.toml | 2 +- .../visually-hidden/src/visually_hidden.rs | 54 ++++-- stories/leptos/Cargo.toml | 2 +- stories/leptos/index.html | 2 +- stories/leptos/src/app.rs | 183 ++++++++++-------- stories/leptos/src/primitives.rs | 2 +- .../leptos/src/primitives/visually_hidden.rs | 2 +- stories/leptos/tailwind.config.js | 5 +- 11 files changed, 164 insertions(+), 113 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index f2259f7c..9abe8545 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2136,6 +2136,16 @@ dependencies = [ "web-sys", ] +[[package]] +name = "leptos-style" +version = "0.0.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "50860556542aa8466b849e628192d5f99035481ee62ddd09667ee4409eb59128" +dependencies = [ + "indexmap", + "leptos", +] + [[package]] name = "leptos_config" version = "0.7.2" @@ -2877,10 +2887,19 @@ dependencies = [ "leptos_router", "log", "radix-leptos-label", + "radix-leptos-visually-hidden", "tailwind_fuse", "web-sys", ] +[[package]] +name = "radix-leptos-visually-hidden" +version = "0.0.2" +dependencies = [ + "leptos", + "leptos-style", +] + [[package]] name = "radix-number" version = "0.0.2" diff --git a/Cargo.toml b/Cargo.toml index 0a19d53c..4ddfd5d3 100644 --- a/Cargo.toml +++ b/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" diff --git a/packages/primitives/leptos/label/src/label.rs b/packages/primitives/leptos/label/src/label.rs index 32ac5dff..9338c67a 100644 --- a/packages/primitives/leptos/label/src/label.rs +++ b/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::(&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(); } diff --git a/packages/primitives/leptos/visually-hidden/Cargo.toml b/packages/primitives/leptos/visually-hidden/Cargo.toml index 675ffb04..77eadc99 100644 --- a/packages/primitives/leptos/visually-hidden/Cargo.toml +++ b/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 diff --git a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs index 7c25034d..03c4ba56 100644 --- a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs +++ b/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, - #[prop(optional)] node_ref: NodeRef, - #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, - children: ChildrenFn, + #[prop(into, optional)] style: Style, + #[prop(optional)] children: Option, ) -> impl IntoView { - // TODO: replace with style: 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! { - - {children()} - + + {children.map(|children| children())} + } } diff --git a/stories/leptos/Cargo.toml b/stories/leptos/Cargo.toml index 12afacf3..2035fad9 100644 --- a/stories/leptos/Cargo.toml +++ b/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 diff --git a/stories/leptos/index.html b/stories/leptos/index.html index f0e51f86..e648859f 100644 --- a/stories/leptos/index.html +++ b/stories/leptos/index.html @@ -3,5 +3,5 @@ - + diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs index 9110ebff..b905471d 100644 --- a/stories/leptos/src/app.rs +++ b/stories/leptos/src/app.rs @@ -1,6 +1,6 @@ use leptos::prelude::*; use leptos_router::{ - components::{Route, Router, Routes, A}, + components::{Route, Router, Routes, ToHref, A}, path, }; @@ -8,7 +8,20 @@ use leptos_router::{ // accessible_icon, arrow, aspect_ratio, avatar, checkbox, collection, focus_scope, label, menu, // popper, portal, presence, progress, separator, slot, switch, toggle, visually_hidden, // }; -use crate::primitives::label; +use crate::primitives::{label, visually_hidden}; + +#[component] +fn NavLink(href: H, children: Children) -> impl IntoView +where + H: ToHref + Send + Sync + 'static, +{ + // TODO: add class when active + view! { + + {children()} + + } +} #[component] fn Index() -> impl IntoView { @@ -21,177 +34,177 @@ fn Index() -> impl IntoView { pub fn App() -> impl IntoView { view! { -