Update Separator to Leptos 0.7

Closes RustForWeb#438
geoffreygarrett · Jan 8, 2025 · a6d007c · a6d007c
1 parent 98abf14
commit a6d007c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 69 deletions.
diff --git a/book/src/primitives/components/separator.md b/book/src/primitives/components/separator.md
@@ -25,22 +25,20 @@ 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" }}
 
 ```shell
 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! {
         <Separator />
@@ -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<bool>`        | `false`                   |
-| `orientation` | `MaybeProp<Orientation>` | `Orientation::Horizontal` |
-| `decorative`  | `MaybeProp<bool>`        | `false`                   |
+| Prop          | Type                     | Default                   | Description                                                                                          |
+|---------------|--------------------------|---------------------------|------------------------------------------------------------------------------------------------------|
+| `as_child`    | `MaybeProp<bool>`        | `false`                   | If `true`, renders only its children without the default wrapper.                                    |
+| `orientation` | `MaybeProp<Orientation>` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical.                                          |
+| `decorative`  | `MaybeProp<bool>`        | `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<Callback<SeparatorChildProps, Html>>` | -                         |
-| `orientation` | `Orientation`                                 | `Orientation::Horizontal` |
-| `decorative`  | `bool`                                        | `false`                   |
+| Prop          | Type                                          | Default                   | Description                                                                                          |
+|---------------|-----------------------------------------------|---------------------------|------------------------------------------------------------------------------------------------------|
+| `as_child`    | `Option<Callback<SeparatorChildProps, Html>>` | -                         | 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 }}
 
 <div style="height: 1em;"></div>
 
-| 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
@@ -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
diff --git 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<Self>) -> Attribute {
-        self.into_attribute()
+impl From<String> 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<Orientation>,
     #[prop(into, optional)] decorative: MaybeProp<bool>,
     #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] class: MaybeProp<String>,
+    // 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<ChildrenFn>,
 ) -> 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! {
         <Primitive
             element=html::div
             as_child=as_child
             node_ref=node_ref
-            attrs=attrs
+            attr:data-orientation=move || orientation.get().to_string()
+            attr:aria-orientation=move || {
+                if !decorative.get() {
+                    match orientation.get() {
+                        Orientation::Vertical => 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()))}
         </Primitive>

diff --git 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
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use radix_leptos_separator::*;
 use tailwind_fuse::*;