From ed0c299932f7c563dc948d7316fc28f9ca1844d1 Mon Sep 17 00:00:00 2001 From: geoffreygarrett Date: Wed, 8 Jan 2025 22:25:44 +0200 Subject: [PATCH 1/2] Update Separator to Leptos 0.7 --- Cargo.toml | 1 + book/src/primitives/components/separator.md | 56 ++++++++------- .../primitives/leptos/separator/Cargo.toml | 3 +- .../leptos/separator/src/separator.rs | 68 +++++++++---------- stories/leptos/Cargo.toml | 2 +- stories/leptos/src/app.rs | 16 ++--- stories/leptos/src/primitives.rs | 2 +- stories/leptos/src/primitives/separator.rs | 2 +- 8 files changed, 72 insertions(+), 78 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 2a1a59fc..3ad5732c 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -22,6 +22,7 @@ members = [ "packages/primitives/leptos/id", "packages/primitives/leptos/label", "packages/primitives/leptos/primitive", + "packages/primitives/leptos/separator", "packages/primitives/leptos/use-controllable-state", "packages/primitives/leptos/use-escape-keydown", "packages/primitives/leptos/use-previous", diff --git a/book/src/primitives/components/separator.md b/book/src/primitives/components/separator.md index 66293d60..7201f734 100644 --- a/book/src/primitives/components/separator.md +++ b/book/src/primitives/components/separator.md @@ -25,12 +25,10 @@ files = ["src/separator.rs"] ## Features -- Supports horizontal and vertical orientations. +- Supports horizontal and vertical orientations. ## Installation -Install the component from your command line. - {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -38,9 +36,9 @@ Install the component from your command line. cargo add radix-leptos-separator ``` -- [View on crates.io](https://crates.io/crates/radix-leptos-separator) -- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) +- [View on crates.io](https://crates.io/crates/radix-leptos-separator) +- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) {{#endtab }} {{#tab name="Yew" }} @@ -49,17 +47,15 @@ cargo add radix-leptos-separator cargo add radix-yew-separator ``` -- [View on crates.io](https://crates.io/crates/radix-yew-separator) -- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) +- [View on crates.io](https://crates.io/crates/radix-yew-separator) +- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) {{#endtab }} {{#endtabs }} ## Anatomy -Import the component. - {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -79,10 +75,10 @@ fn Anatomy() -> impl IntoView { {{#tab name="Yew" }} ```rust,ignore -use radix_yew_separator::*; use yew::prelude::*; +use radix_yew_separator::*; -#[component] +#[function_component] fn Anatomy() -> Html { html! { @@ -97,39 +93,41 @@ fn Anatomy() -> Html { ### Root -The separator. +The separator component. {{#tabs global="framework" }} {{#tab name="Leptos" }} -| Prop | Type | Default | -| ------------- | ------------------------ | ------------------------- | -| `as_child` | `MaybeProp` | `false` | -| `orientation` | `MaybeProp` | `Orientation::Horizontal` | -| `decorative` | `MaybeProp` | `false` | +| Prop | Type | Default | Description | +|---------------|--------------------------|---------------------------|------------------------------------------------------------------------------------------------------| +| `as_child` | `MaybeProp` | `false` | If `true`, renders only its children without the default wrapper. | +| `orientation` | `MaybeProp` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | +| `decorative` | `MaybeProp` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | {{#endtab }} {{#tab name="Yew" }} -| Prop | Type | Default | -| ------------- | --------------------------------------------- | ------------------------- | -| `as_child` | `Option>` | - | -| `orientation` | `Orientation` | `Orientation::Horizontal` | -| `decorative` | `bool` | `false` | +| Prop | Type | Default | Description | +|---------------|-----------------------------------------------|---------------------------|------------------------------------------------------------------------------------------------------| +| `as_child` | `Option>` | - | If present, renders only its children without the default wrapper. | +| `orientation` | `Orientation` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | +| `decorative` | `bool` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | {{#endtab }} {{#endtabs }}
-| Data attribute | Values | -| -------------------- | ---------------------------- | -| `[data-orientation]` | `"horizontal" \| "vertical"` | +**Data attributes**: + +| Data Attribute | Values | +|----------------------|--------------------------------| +| `[data-orientation]` | `"horizontal"` \| `"vertical"` | ## Accessibility -Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). +Adheres to the [separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). ## See Also -- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) +- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) diff --git a/packages/primitives/leptos/separator/Cargo.toml b/packages/primitives/leptos/separator/Cargo.toml index 2a5ba5f5..3f655041 100644 --- a/packages/primitives/leptos/separator/Cargo.toml +++ b/packages/primitives/leptos/separator/Cargo.toml @@ -2,7 +2,6 @@ name = "radix-leptos-separator" description = "Leptos port of Radix Separator." homepage = "https://radix.rustforweb.org/primitives/components/separator.html" - authors.workspace = true edition.workspace = true license.workspace = true @@ -11,3 +10,5 @@ version.workspace = true [dependencies] leptos.workspace = true +leptos-node-ref.workspace = true +radix-leptos-primitive.workspace = true \ No newline at end of file diff --git a/packages/primitives/leptos/separator/src/separator.rs b/packages/primitives/leptos/separator/src/separator.rs index de12af6f..d5841e0a 100644 --- a/packages/primitives/leptos/separator/src/separator.rs +++ b/packages/primitives/leptos/separator/src/separator.rs @@ -1,6 +1,8 @@ use std::fmt::{Display, Formatter}; - -use leptos::{html::AnyElement, *}; +use leptos::prelude::*; +use leptos::html; +use leptos_node_ref::AnyNodeRef; +use radix_leptos_primitive::Primitive; #[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)] pub enum Orientation { @@ -22,61 +24,53 @@ impl Display for Orientation { } } -impl IntoAttribute for Orientation { - fn into_attribute(self) -> Attribute { - Attribute::String(self.to_string().into()) +impl From<&str> for Orientation { + fn from(s: &str) -> Self { + match s.to_lowercase().as_str() { + "vertical" => Orientation::Vertical, + _ => Orientation::Horizontal, + } } +} - fn into_attribute_boxed(self: Box) -> Attribute { - self.into_attribute() +impl From for Orientation { + fn from(s: String) -> Self { + Self::from(s.as_str()) } } #[component] +#[allow(non_snake_case)] pub fn Separator( #[prop(into, optional)] orientation: MaybeProp, #[prop(into, optional)] decorative: MaybeProp, #[prop(into, optional)] as_child: MaybeProp, - #[prop(optional)] node_ref: NodeRef, - #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, + #[prop(into, optional)] node_ref: AnyNodeRef, + #[prop(into, optional)] class: MaybeProp, + // if as_child=true, there will be no attribute passthrough to the children, + // but we opt for this design so we can allow children to be optional. #[prop(optional)] children: Option, ) -> impl IntoView { let children = StoredValue::new(children); - let orientation = Signal::derive(move || orientation.get().unwrap_or_default()); - let aria_orientation = Signal::derive(move || match orientation.get() { - Orientation::Horizontal => None, - Orientation::Vertical => Some("vertical".to_string()), - }); let decorative = Signal::derive(move || decorative.get().unwrap_or_default()); - - let mut attrs = attrs.clone(); - attrs.extend([ - ("data-orientation", orientation.into_attribute()), - ( - "aria-orientation", - (match decorative.get() { - true => aria_orientation.get(), - false => None, - }) - .into_attribute(), - ), - ( - "role", - (match decorative.get() { - true => "none", - false => "separator", - }) - .into_attribute(), - ), - ]); - view! { Some("vertical".to_string()), + Orientation::Horizontal => None, + } + } else { + None + } + } + attr:role=move || if decorative.get() { "none" } else { "separator" } > {children.with_value(|children| children.as_ref().map(|children| children()))} diff --git a/stories/leptos/Cargo.toml b/stories/leptos/Cargo.toml index b56a152e..d8dea39f 100644 --- a/stories/leptos/Cargo.toml +++ b/stories/leptos/Cargo.toml @@ -30,7 +30,7 @@ radix-leptos-label = { path = "../../packages/primitives/leptos/label" } # ] } # radix-leptos-presence = { path = "../../packages/primitives/leptos/presence" } # radix-leptos-progress = { path = "../../packages/primitives/leptos/progress" } -# radix-leptos-separator = { path = "../../packages/primitives/leptos/separator" } +radix-leptos-separator = { path = "../../packages/primitives/leptos/separator" } # 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" } diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs index 7d0b1dc3..ff2b824a 100644 --- a/stories/leptos/src/app.rs +++ b/stories/leptos/src/app.rs @@ -4,7 +4,7 @@ use leptos_router::{ path, }; -use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, visually_hidden}; +use crate::primitives::{accessible_icon, arrow, aspect_ratio, separator, label, visually_hidden}; #[component] fn NavLink(href: H, children: Children) -> impl IntoView @@ -160,13 +160,13 @@ pub fn App() -> impl IntoView { //
  • Chromatic
    • // // - //
  • - // Separator +
  • + Separator - //
      - //
    • Styled
      • - //
    - //
    • +
      +
    • Styled
      • +
    + //
  • // Slot @@ -267,7 +267,7 @@ pub fn App() -> impl IntoView { // // - // + // // diff --git a/stories/leptos/src/primitives.rs b/stories/leptos/src/primitives.rs index 4af00626..43a1e6cd 100644 --- a/stories/leptos/src/primitives.rs +++ b/stories/leptos/src/primitives.rs @@ -12,7 +12,7 @@ pub mod label; // pub mod portal; // pub mod presence; // pub mod progress; -// pub mod separator; +pub mod separator; // pub mod slot; // pub mod switch; // pub mod toggle; diff --git a/stories/leptos/src/primitives/separator.rs b/stories/leptos/src/primitives/separator.rs index 536431ee..5242e2e0 100644 --- a/stories/leptos/src/primitives/separator.rs +++ b/stories/leptos/src/primitives/separator.rs @@ -1,4 +1,4 @@ -use leptos::*; +use leptos::prelude::*; use radix_leptos_separator::*; use tailwind_fuse::*; From fc03979ec51ad6fc747874643e9eecb15e3143fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABlle=20Huisman?= Date: Sun, 11 May 2025 13:14:11 +0200 Subject: [PATCH 2/2] Cleanup --- Cargo.lock | 11 ++++ book-examples/leptos/primitives/Cargo.toml | 5 +- book-examples/leptos/primitives/src/main.rs | 4 +- .../leptos/primitives/src/separator.rs | 2 +- book/src/primitives/components/separator.md | 56 ++++++++++--------- .../primitives/leptos/separator/Cargo.toml | 3 +- .../leptos/separator/src/separator.rs | 33 +++-------- stories/leptos/src/app.rs | 2 +- 8 files changed, 56 insertions(+), 60 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 0fa3bafc..b74d7be6 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3117,6 +3117,7 @@ dependencies = [ "log", "radix-leptos-aspect-ratio", "radix-leptos-label", + "radix-leptos-separator", ] [[package]] @@ -3175,6 +3176,15 @@ dependencies = [ "leptos-typed-fallback-show", ] +[[package]] +name = "radix-leptos-separator" +version = "0.0.2" +dependencies = [ + "leptos", + "leptos-node-ref", + "radix-leptos-primitive", +] + [[package]] name = "radix-leptos-stories" version = "0.0.2" @@ -3188,6 +3198,7 @@ dependencies = [ "radix-leptos-arrow", "radix-leptos-aspect-ratio", "radix-leptos-label", + "radix-leptos-separator", "radix-leptos-visually-hidden", "tailwind_fuse", "web-sys", diff --git a/book-examples/leptos/primitives/Cargo.toml b/book-examples/leptos/primitives/Cargo.toml index 97255b70..c2853e5b 100644 --- a/book-examples/leptos/primitives/Cargo.toml +++ b/book-examples/leptos/primitives/Cargo.toml @@ -20,7 +20,7 @@ radix-leptos-aspect-ratio = { path = "../../../packages/primitives/leptos/aspect # radix-leptos-icons = { path = "../../../packages/icons/leptos", optional = true } radix-leptos-label = { path = "../../../packages/primitives/leptos/label", optional = true } # radix-leptos-progress = { path = "../../../packages/primitives/leptos/progress", optional = true } -# radix-leptos-separator = { path = "../../../packages/primitives/leptos/separator", optional = true } +radix-leptos-separator = { path = "../../../packages/primitives/leptos/separator", optional = true } # radix-leptos-switch = { path = "../../../packages/primitives/leptos/switch", optional = true } # radix-leptos-toggle = { path = "../../../packages/primitives/leptos/toggle", optional = true } @@ -40,12 +40,11 @@ avatar = [] checkbox = [] label = ["dep:radix-leptos-label"] progress = [] -separator = [] +separator = ["dep:radix-leptos-separator"] switch = [] toggle = [] # avatar = ["dep:radix-leptos-avatar"] # checkbox = ["dep:radix-leptos-checkbox", "dep:radix-leptos-icons"] # progress = ["dep:radix-leptos-progress"] -# separator = ["dep:radix-leptos-separator"] # switch = ["dep:radix-leptos-switch"] # toggle = ["dep:radix-leptos-toggle", "dep:radix-leptos-icons"] diff --git a/book-examples/leptos/primitives/src/main.rs b/book-examples/leptos/primitives/src/main.rs index 43c1a85c..dc7c8c0b 100644 --- a/book-examples/leptos/primitives/src/main.rs +++ b/book-examples/leptos/primitives/src/main.rs @@ -10,8 +10,8 @@ mod aspect_ratio; mod label; // #[cfg(feature = "progress")] // mod progress; -// #[cfg(feature = "separator")] -// mod separator; +#[cfg(feature = "separator")] +mod separator; // #[cfg(feature = "switch")] // mod switch; // #[cfg(feature = "toggle")] diff --git a/book-examples/leptos/primitives/src/separator.rs b/book-examples/leptos/primitives/src/separator.rs index 5f37e8b8..0631b048 100644 --- a/book-examples/leptos/primitives/src/separator.rs +++ b/book-examples/leptos/primitives/src/separator.rs @@ -1,4 +1,4 @@ -use leptos::*; +use leptos::prelude::*; use radix_leptos_separator::*; #[component] diff --git a/book/src/primitives/components/separator.md b/book/src/primitives/components/separator.md index 7201f734..66293d60 100644 --- a/book/src/primitives/components/separator.md +++ b/book/src/primitives/components/separator.md @@ -25,10 +25,12 @@ files = ["src/separator.rs"] ## Features -- Supports horizontal and vertical orientations. +- Supports horizontal and vertical orientations. ## Installation +Install the component from your command line. + {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -36,9 +38,9 @@ files = ["src/separator.rs"] cargo add radix-leptos-separator ``` -- [View on crates.io](https://crates.io/crates/radix-leptos-separator) -- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) +- [View on crates.io](https://crates.io/crates/radix-leptos-separator) +- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) {{#endtab }} {{#tab name="Yew" }} @@ -47,15 +49,17 @@ cargo add radix-leptos-separator cargo add radix-yew-separator ``` -- [View on crates.io](https://crates.io/crates/radix-yew-separator) -- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) +- [View on crates.io](https://crates.io/crates/radix-yew-separator) +- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) {{#endtab }} {{#endtabs }} ## Anatomy +Import the component. + {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -75,10 +79,10 @@ fn Anatomy() -> impl IntoView { {{#tab name="Yew" }} ```rust,ignore -use yew::prelude::*; use radix_yew_separator::*; +use yew::prelude::*; -#[function_component] +#[component] fn Anatomy() -> Html { html! { @@ -93,41 +97,39 @@ fn Anatomy() -> Html { ### Root -The separator component. +The separator. {{#tabs global="framework" }} {{#tab name="Leptos" }} -| Prop | Type | Default | Description | -|---------------|--------------------------|---------------------------|------------------------------------------------------------------------------------------------------| -| `as_child` | `MaybeProp` | `false` | If `true`, renders only its children without the default wrapper. | -| `orientation` | `MaybeProp` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | -| `decorative` | `MaybeProp` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | +| Prop | Type | Default | +| ------------- | ------------------------ | ------------------------- | +| `as_child` | `MaybeProp` | `false` | +| `orientation` | `MaybeProp` | `Orientation::Horizontal` | +| `decorative` | `MaybeProp` | `false` | {{#endtab }} {{#tab name="Yew" }} -| Prop | Type | Default | Description | -|---------------|-----------------------------------------------|---------------------------|------------------------------------------------------------------------------------------------------| -| `as_child` | `Option>` | - | If present, renders only its children without the default wrapper. | -| `orientation` | `Orientation` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | -| `decorative` | `bool` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | +| Prop | Type | Default | +| ------------- | --------------------------------------------- | ------------------------- | +| `as_child` | `Option>` | - | +| `orientation` | `Orientation` | `Orientation::Horizontal` | +| `decorative` | `bool` | `false` | {{#endtab }} {{#endtabs }}
    -**Data attributes**: - -| Data Attribute | Values | -|----------------------|--------------------------------| -| `[data-orientation]` | `"horizontal"` \| `"vertical"` | +| Data attribute | Values | +| -------------------- | ---------------------------- | +| `[data-orientation]` | `"horizontal" \| "vertical"` | ## Accessibility -Adheres to the [separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). +Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). ## See Also -- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) +- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) diff --git a/packages/primitives/leptos/separator/Cargo.toml b/packages/primitives/leptos/separator/Cargo.toml index 3f655041..b4d5cdef 100644 --- a/packages/primitives/leptos/separator/Cargo.toml +++ b/packages/primitives/leptos/separator/Cargo.toml @@ -2,6 +2,7 @@ name = "radix-leptos-separator" description = "Leptos port of Radix Separator." homepage = "https://radix.rustforweb.org/primitives/components/separator.html" + authors.workspace = true edition.workspace = true license.workspace = true @@ -11,4 +12,4 @@ version.workspace = true [dependencies] leptos.workspace = true leptos-node-ref.workspace = true -radix-leptos-primitive.workspace = true \ No newline at end of file +radix-leptos-primitive = { path = "../primitive", version = "0.0.2" } diff --git a/packages/primitives/leptos/separator/src/separator.rs b/packages/primitives/leptos/separator/src/separator.rs index d5841e0a..ce5e2574 100644 --- a/packages/primitives/leptos/separator/src/separator.rs +++ b/packages/primitives/leptos/separator/src/separator.rs @@ -1,6 +1,6 @@ use std::fmt::{Display, Formatter}; -use leptos::prelude::*; -use leptos::html; + +use leptos::{html, prelude::*}; use leptos_node_ref::AnyNodeRef; use radix_leptos_primitive::Primitive; @@ -24,36 +24,19 @@ impl Display for Orientation { } } -impl From<&str> for Orientation { - fn from(s: &str) -> Self { - match s.to_lowercase().as_str() { - "vertical" => Orientation::Vertical, - _ => Orientation::Horizontal, - } - } -} - -impl From for Orientation { - fn from(s: String) -> Self { - Self::from(s.as_str()) - } -} - #[component] -#[allow(non_snake_case)] pub fn Separator( #[prop(into, optional)] orientation: MaybeProp, #[prop(into, optional)] decorative: MaybeProp, #[prop(into, optional)] as_child: MaybeProp, #[prop(into, optional)] node_ref: AnyNodeRef, - #[prop(into, optional)] class: MaybeProp, - // if as_child=true, there will be no attribute passthrough to the children, - // but we opt for this design so we can allow children to be optional. #[prop(optional)] children: Option, ) -> impl IntoView { let children = StoredValue::new(children); + let orientation = Signal::derive(move || orientation.get().unwrap_or_default()); let decorative = Signal::derive(move || decorative.get().unwrap_or_default()); + view! { Some("vertical".to_string()), + Orientation::Vertical => Some("vertical".to_owned()), Orientation::Horizontal => None, } - } else { - None } } attr:role=move || if decorative.get() { "none" } else { "separator" } diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs index ff2b824a..b4320c4d 100644 --- a/stories/leptos/src/app.rs +++ b/stories/leptos/src/app.rs @@ -4,7 +4,7 @@ use leptos_router::{ path, }; -use crate::primitives::{accessible_icon, arrow, aspect_ratio, separator, label, visually_hidden}; +use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, separator, visually_hidden}; #[component] fn NavLink(href: H, children: Children) -> impl IntoView