From a621cb80444b1926107aab758c0d57e916268299 Mon Sep 17 00:00:00 2001
From: Plebshot <Fabian.Odenthal@Outlook.com>
Date: Mon, 13 Jan 2025 19:34:51 +0100
Subject: [PATCH] docs: demonstrate extending both global and element
 attributes (#3555)

Co-authored-by: fabian <fabian@staff.identeco.de>
---
 packages/core-macro/docs/component.md | 36 +++++++++++++++++++----
 packages/core-macro/docs/props.md     | 42 +++++++++++++++++++++++----
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/packages/core-macro/docs/component.md b/packages/core-macro/docs/component.md
index f70958de1..d30a84e83 100644
--- a/packages/core-macro/docs/component.md
+++ b/packages/core-macro/docs/component.md
@@ -301,23 +301,49 @@ The `extends` attribute lets you extend your props with all the attributes from
 ```rust, no_run
 # use dioxus::prelude::*;
 #[component]
-fn Button(
+fn Card(
     // You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.
     #[props(extends = GlobalAttributes)]
     attributes: Vec<Attribute>,
 ) -> Element {
     rsx! {
-        // Instead of copying over every single attribute, we can just spread the attributes from the props into the button.
-        button { ..attributes, "button" }
+        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.
+        div { ..attributes, "card" }
     }
 }
 
 rsx! {
-    // Since we extend global attributes, you can use any attribute that would normally appear on the button element.
-    Button {
+    // Since we extend global attributes, you can use any attribute that would normally appear on elements.
+    Card {
         width: "10px",
         height: "10px",
         color: "red",
     }
 };
 ```
+
+To extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:
+
+```rust, no_run
+# use dioxus::prelude::*;
+#[component]
+fn Button(
+    #[props(extends = GlobalAttributes, extends = button)]
+    attributes: Vec<Attribute>,
+) -> Element {
+    rsx! {
+        button { ..attributes, "button" }
+    }
+}
+
+rsx! {
+    Button {
+        // A global attribute
+        width: "10px",
+        // A button specific attribute
+        disabled: true,
+    }
+};
+```
+
+Note that extending from multiple elements will only work if the elements don't have conflicting attributes.
diff --git a/packages/core-macro/docs/props.md b/packages/core-macro/docs/props.md
index 1175a0645..093fb695b 100644
--- a/packages/core-macro/docs/props.md
+++ b/packages/core-macro/docs/props.md
@@ -314,26 +314,56 @@ The `extends` attribute lets you extend your props with all the attributes from
 ```rust, no_run
 # use dioxus::prelude::*;
 #[derive(Props, PartialEq, Clone)]
-struct ButtonProps {
+struct CardProps {
     /// You can use the `extends` attribute on a field with the type `Vec<Attribute>` to extend the props with all the attributes from an element or the global element attributes.
     #[props(extends = GlobalAttributes)]
     attributes: Vec<Attribute>,
 }
 
 #[component]
-fn Button(props: ButtonProps) -> Element {
+fn Card(props: CardProps) -> Element {
     rsx! {
-        // Instead of copying over every single attribute, we can just spread the attributes from the props into the button.
-        button { ..props.attributes, "button" }
+        // Instead of copying over every single attribute, we can just spread the attributes from the props into the element.
+        div { ..props.attributes, "card" }
     }
 }
 
 rsx! {
-    // Since we extend global attributes, you can use any attribute that would normally appear on the button element.
-    Button {
+    // Since we extend global attributes, you can use any attribute that would normally appear on elements.
+    Card {
         width: "10px",
         height: "10px",
         color: "red",
     }
 };
 ```
+
+To extend the props with both the global attributes and the attributes of a specific element, you can use the `extends` attribute multiple times:
+
+```rust, no_run
+# use dioxus::prelude::*;
+
+#[derive(Props, PartialEq, Clone)]
+struct ButtonProps {
+    #[props(extends = GlobalAttributes, extends = button)]
+    attributes: Vec<Attribute>,
+}
+
+#[component]
+fn Button(props: ButtonProps) -> Element {
+    rsx! {
+        button { ..props.attributes, "button" }
+    }
+}
+
+rsx! {
+    Button {
+        // A global attribute
+        width: "10px",
+        // A button specific attribute
+        disabled: true,
+    }
+};
+```
+
+Note that extending from multiple elements will only work if the elements don't have conflicting attributes.