add invalid children to html components (#5261)

pyi_hashes.json

@@ -29,15 +29,15 @@
   "reflex/components/el/element.pyi": "06ac2213b062119323291fa66a1ac19e",
   "reflex/components/el/elements/__init__.pyi": "280ed457675f3720e34b560a3f617739",
   "reflex/components/el/elements/base.pyi": "6e533348b5e1a88cf62fbb5a38dbd795",
-  "reflex/components/el/elements/forms.pyi": "161f1ef847e5da8755528a7977fdcf53",
-  "reflex/components/el/elements/inline.pyi": "33d9d860e75dd8c4769825127ed363bb",
+  "reflex/components/el/elements/forms.pyi": "3ff8fd5d8a36418874e9fe4ff76bbfe8",
+  "reflex/components/el/elements/inline.pyi": "f881d229c9ecaa61d17ac6837ac9a839",
   "reflex/components/el/elements/media.pyi": "addd6872281d65d44a484358b895432f",
   "reflex/components/el/elements/metadata.pyi": "974a86d9f0662f6fc15a5bb4b3a87862",
   "reflex/components/el/elements/other.pyi": "995a4fbf10bfdb7f48808210dfe413bd",
   "reflex/components/el/elements/scripts.pyi": "cd5bd53c3a6b016fbb913aff36d63344",
   "reflex/components/el/elements/sectioning.pyi": "65aa53b1372598ec1785616cb7016032",
   "reflex/components/el/elements/tables.pyi": "e1282d8ddf4efa4c911ca104a907ee88",
-  "reflex/components/el/elements/typography.pyi": "00088c9c1b68a14e5a41d837e8fdf542",
+  "reflex/components/el/elements/typography.pyi": "928ff998c9bbb32ae7ccce5f6cb885a7",
   "reflex/components/gridjs/datatable.pyi": "3db3f994640c19be5c3fa2983f71de56",
   "reflex/components/lucide/icon.pyi": "a5521a8baf8d2d7281e3fdfe6ce7073b",
   "reflex/components/markdown/markdown.pyi": "6b268afa879e33abf651bda56be5065e",

reflex/components/el/elements/forms.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 from collections.abc import Iterator
 from hashlib import md5
-from typing import Any, Literal
+from typing import Any, ClassVar, Literal
 
 from jinja2 import Environment
 
@@ -86,6 +86,8 @@ class Button(BaseHTML):
     # Value of the button, used when sending form data
     value: Var[str | int | float]
 
+    _invalid_children: ClassVar[list[str]] = ["Button"]
+
 
 class Datalist(BaseHTML):
     """Display the datalist element."""

reflex/components/el/elements/inline.py

@@ -1,6 +1,6 @@
 """Inline classes."""
 
-from typing import Literal
+from typing import ClassVar, Literal
 
 from reflex.vars.base import Var
 
@@ -48,6 +48,8 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
     # Specifies where to open the linked document
     target: Var[str | Literal["_self", "_blank", "_parent", "_top"]]
 
+    _invalid_children: ClassVar[list[str]] = ["A"]
+
 
 class Abbr(BaseHTML):
     """Display the abbr element."""

reflex/components/el/elements/typography.py

@@ -1,6 +1,6 @@
 """Typography classes."""
 
-from typing import Literal
+from typing import ClassVar, Literal
 
 from reflex.vars.base import Var
 
@@ -87,6 +87,8 @@ class P(BaseHTML):
 
     tag = "p"
 
+    _invalid_children: ClassVar[list] = ["P", "Ol", "Ul", "Div"]
+
 
 class Pre(BaseHTML):
     """Display the pre element."""

tests/units/components/test_component.py

@@ -1691,6 +1691,24 @@ def test_validate_invalid_children():
             rx.fragment(invalid_component()),
         )
 
+    with pytest.raises(ValueError):
+        rx.el.p(rx.el.p("what"))
+
+    with pytest.raises(ValueError):
+        rx.el.p(rx.el.div("what"))
+
+    with pytest.raises(ValueError):
+        rx.el.button(rx.el.button("what"))
+
+    with pytest.raises(ValueError):
+        rx.el.p(rx.el.ol(rx.el.li("what")))
+
+    with pytest.raises(ValueError):
+        rx.el.p(rx.el.ul(rx.el.li("what")))
+
+    with pytest.raises(ValueError):
+        rx.el.a(rx.el.a("what"))
+
     with pytest.raises(ValueError):
         valid_component2(
             rx.fragment(