Fix comments on drawer (#2604)

* Fix comments on drawer

* Fix precommit

* Fix pyi

* Fix table invalid children

---------

Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>

reflex/components/radix/primitives/drawer.py

@@ -6,12 +6,12 @@ from __future__ import annotations
 from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Optional, Union
 
-from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
+from reflex.components.radix.primitives.base import RadixPrimitiveComponent
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 
-class DrawerComponent(RadixPrimitiveComponentWithClassName):
+class DrawerComponent(RadixPrimitiveComponent):
     """A Drawer component."""
 
     library = "vaul"
@@ -37,35 +37,28 @@ class DrawerRoot(DrawerComponent):
     # Whether the drawer is open or not.
     open: Var[bool]
 
-    # Enable background scaling,
-    # it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+    # Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
     should_scale_background: Var[bool]
 
     # Number between 0 and 1 that determines when the drawer should be closed.
     close_threshold: Var[float]
 
-    # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible.
-    # Also Accept px values, which doesn't take screen height into account.
+    # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
     snap_points: Optional[List[Union[str, float]]]
 
-    # Index of a snapPoint from which the overlay fade should be applied.
-    # Defaults to the last snap point.
-    # TODO: will it accept -1 then?
+    # Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
     fade_from_index: Var[int]
 
     # Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
     scroll_lock_timeout: Var[int]
 
-    # When `False`, it allows to interact with elements outside of the drawer without closing it.
-    # Defaults to `True`.
+    # When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
     modal: Var[bool]
 
     # Direction of the drawer. Defaults to `"bottom"`
     direction: Var[LiteralDirectionType]
 
-    # When `True`, it prevents scroll restoration
-    # when the drawer is closed after a navigation happens inside of it.
-    # Defaults to `True`.
+    # When `True`, it prevents scroll restoration. Defaults to `True`.
     preventScrollRestoration: Var[bool]
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -87,7 +80,8 @@ class DrawerTrigger(DrawerComponent):
 
     alias = "Vaul" + tag
 
-    as_child: Var[bool]
+    # Defaults to true, if the first child acts as the trigger.
+    as_child: Var[bool] = True  # type: ignore
 
 
 class DrawerPortal(DrawerComponent):
@@ -170,7 +164,7 @@ class DrawerOverlay(DrawerComponent):
             "bottom": "0",
             "top": "0",
             "z_index": 50,
-            "background": "rgba(0, 0, 0, 0.8)",
+            "background": "rgba(0, 0, 0, 0.5)",
         }
         style = self.style or {}
         base_style.update(style)

reflex/components/radix/primitives/drawer.pyi

@@ -9,11 +9,11 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from types import SimpleNamespace
 from typing import Any, Dict, List, Literal, Optional, Union
-from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
+from reflex.components.radix.primitives.base import RadixPrimitiveComponent
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-class DrawerComponent(RadixPrimitiveComponentWithClassName):
+class DrawerComponent(RadixPrimitiveComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -179,14 +179,14 @@ class DrawerRoot(DrawerComponent):
         Args:
             *children: The children of the component.
             open: Whether the drawer is open or not.
-            should_scale_background: Enable background scaling,  it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
             close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
-            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible.  Also Accept px values, which doesn't take screen height into account.
-            fade_from_index: Index of a snapPoint from which the overlay fade should be applied.  Defaults to the last snap point.  TODO: will it accept -1 then?
+            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
+            fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
             scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-            modal: When `False`, it allows to interact with elements outside of the drawer without closing it.  Defaults to `True`.
+            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
             direction: Direction of the drawer. Defaults to `"bottom"`
-            preventScrollRestoration: When `True`, it prevents scroll restoration  when the drawer is closed after a navigation happens inside of it.  Defaults to `True`.
+            preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
@@ -876,14 +876,14 @@ class Drawer(SimpleNamespace):
         Args:
             *children: The children of the component.
             open: Whether the drawer is open or not.
-            should_scale_background: Enable background scaling,  it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
             close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
-            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible.  Also Accept px values, which doesn't take screen height into account.
-            fade_from_index: Index of a snapPoint from which the overlay fade should be applied.  Defaults to the last snap point.  TODO: will it accept -1 then?
+            snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
+            fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
             scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-            modal: When `False`, it allows to interact with elements outside of the drawer without closing it.  Defaults to `True`.
+            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
             direction: Direction of the drawer. Defaults to `"bottom"`
-            preventScrollRestoration: When `True`, it prevents scroll restoration  when the drawer is closed after a navigation happens inside of it.  Defaults to `True`.
+            preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.