Add data-slot props to the components (#13)

Author: carlosabadia

reflex_ui/components/base/avatar.py

@@ -38,6 +38,7 @@ class AvatarRoot(AvatarBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the avatar root component."""
+        props["data-slot"] = "avatar"
         cls.set_class_name(ClassNames.ROOT, props)
         return super().create(*children, **props)
 
@@ -59,6 +60,7 @@ class AvatarImage(AvatarBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the avatar image component."""
+        props["data-slot"] = "avatar-image"
         cls.set_class_name(ClassNames.IMAGE, props)
         return super().create(*children, **props)
 
@@ -77,6 +79,7 @@ class AvatarFallback(AvatarBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the avatar fallback component."""
+        props["data-slot"] = "avatar-fallback"
         cls.set_class_name(ClassNames.FALLBACK, props)
         return super().create(*children, **props)
 

reflex_ui/components/base/scroll_area.py

@@ -48,6 +48,7 @@ class ScrollAreaRoot(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area root component."""
+        props["data-slot"] = "scroll-area"
         cls.set_class_name(ClassNames.ROOT, props)
         return super().create(*children, **props)
 
@@ -63,6 +64,7 @@ class ScrollAreaViewport(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area viewport component."""
+        props["data-slot"] = "scroll-area-viewport"
         cls.set_class_name(ClassNames.VIEWPORT, props)
         return super().create(*children, **props)
 
@@ -78,6 +80,7 @@ class ScrollAreaContent(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area content component."""
+        props["data-slot"] = "scroll-area-content"
         cls.set_class_name(ClassNames.CONTENT, props)
         return super().create(*children, **props)
 
@@ -99,6 +102,7 @@ class ScrollAreaScrollbar(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area scrollbar component."""
+        props["data-slot"] = "scroll-area-scrollbar"
         orientation = props.get("orientation", "vertical")
 
         scrollbar_classes = cn(
@@ -125,6 +129,7 @@ class ScrollAreaThumb(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area thumb component."""
+        props["data-slot"] = "scroll-area-thumb"
         cls.set_class_name(ClassNames.THUMB, props)
         return super().create(*children, **props)
 
@@ -140,6 +145,7 @@ class ScrollAreaCorner(ScrollAreaBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the scroll area corner component."""
+        props["data-slot"] = "scroll-area-corner"
         cls.set_class_name(ClassNames.CORNER, props)
         return super().create(*children, **props)
 

reflex_ui/components/base/select.py

@@ -96,6 +96,12 @@ class SelectRoot(SelectBaseComponent):
     # Whether the user must choose a value before submitting a form
     required: Var[bool] = Var.create(False)
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the select root component."""
+        props["data-slot"] = "select"
+        return super().create(*children, **props)
+
 
 class SelectTrigger(SelectBaseComponent):
     """A button that opens the select menu."""
@@ -111,6 +117,7 @@ class SelectTrigger(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the select trigger component."""
+        props["data-slot"] = "select-trigger"
         cls.set_class_name(ClassNames.TRIGGER, props)
         return super().create(*children, **props)
 
@@ -126,6 +133,7 @@ class SelectValue(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-value"
         cls.set_class_name(ClassNames.VALUE, props)
         return super().create(*children, **props)
 
@@ -195,6 +203,7 @@ class SelectPositioner(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-positioner"
         cls.set_class_name(ClassNames.POSITIONER, props)
         return super().create(*children, **props)
 
@@ -210,6 +219,7 @@ class SelectPopup(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-popup"
         cls.set_class_name(ClassNames.POPUP, props)
         return super().create(*children, **props)
 
@@ -234,6 +244,7 @@ class SelectItem(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-item"
         cls.set_class_name(ClassNames.ITEM, props)
         return super().create(*children, **props)
 
@@ -249,6 +260,7 @@ class SelectItemText(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-item-text"
         cls.set_class_name(ClassNames.ITEM_TEXT, props)
         return super().create(*children, **props)
 
@@ -267,6 +279,7 @@ class SelectItemIndicator(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-item-indicator"
         cls.set_class_name(ClassNames.ITEM_INDICATOR, props)
         return super().create(*children, **props)
 
@@ -282,6 +295,7 @@ class SelectGroup(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-group"
         cls.set_class_name(ClassNames.GROUP, props)
         return super().create(*children, **props)
 
@@ -297,6 +311,7 @@ class SelectGroupLabel(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-group-label"
         cls.set_class_name(ClassNames.GROUP_LABEL, props)
         return super().create(*children, **props)
 
@@ -315,6 +330,7 @@ class SelectSeparator(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-separator"
         cls.set_class_name(ClassNames.SEPARATOR, props)
         return super().create(*children, **props)
 
@@ -330,6 +346,7 @@ class SelectIcon(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-icon"
         cls.set_class_name(ClassNames.ICON, props)
         return super().create(*children, **props)
 
@@ -345,6 +362,7 @@ class SelectArrow(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-arrow"
         cls.set_class_name(ClassNames.ARROW, props)
         return super().create(*children, **props)
 
@@ -363,6 +381,7 @@ class SelectScrollUpArrow(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-scroll-up-arrow"
         cls.set_class_name(ClassNames.SCROLL_ARROW_UP, props)
         return super().create(*children, **props)
 
@@ -381,6 +400,7 @@ class SelectScrollDownArrow(SelectBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the dialog trigger component."""
+        props["data-slot"] = "select-scroll-down-arrow"
         cls.set_class_name(ClassNames.SCROLL_ARROW_DOWN, props)
         return super().create(*children, **props)
 

reflex_ui/components/base/slider.py

@@ -8,7 +8,6 @@
 from reflex.vars import Var
 
 from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
-from reflex_ui.utils.twmerge import cn
 
 LiteralOrientation = Literal["horizontal", "vertical"]
 
@@ -99,6 +98,7 @@ class SliderRoot(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider root component."""
+        props["data-slot"] = "slider"
         cls.set_class_name(ClassNames.ROOT, props)
         return super().create(*children, **props)
 
@@ -114,6 +114,7 @@ class SliderValue(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider value component."""
+        props["data-slot"] = "slider-value"
         cls.set_class_name(ClassNames.VALUE, props)
         return super().create(*children, **props)
 
@@ -129,6 +130,7 @@ class SliderControl(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider control component."""
+        props["data-slot"] = "slider-control"
         cls.set_class_name(ClassNames.CONTROL, props)
         return super().create(*children, **props)
 
@@ -144,6 +146,7 @@ class SliderTrack(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider track component."""
+        props["data-slot"] = "slider-track"
         cls.set_class_name(ClassNames.TRACK, props)
         return super().create(*children, **props)
 
@@ -159,6 +162,7 @@ class SliderIndicator(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider indicator component."""
+        props["data-slot"] = "slider-indicator"
         cls.set_class_name(ClassNames.INDICATOR, props)
         return super().create(*children, **props)
 
@@ -183,22 +187,14 @@ class SliderThumb(SliderBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the slider thumb component."""
+        props["data-slot"] = "slider-thumb"
         cls.set_class_name(ClassNames.THUMB, props)
         return super().create(*children, **props)
 
 
 class HighLevelSlider(SliderRoot):
     """High-level wrapper for the Slider component."""
 
-    # Class name for the indicator
-    indicator_class_name: Var[str]
-
-    # Class name for the track
-    track_class_name: Var[str]
-
-    # Class name for the control
-    control_class_name: Var[str]
-
     @classmethod
     def create(cls, **props) -> Component:
         """Create a complete slider component.
@@ -209,21 +205,12 @@ def create(cls, **props) -> Component:
         Returns:
             The slider component.
         """
-        # Extract custom class names for the indicator, track, and control
-        indicator_class_name = props.pop("indicator_class_name", "")
-        track_class_name = props.pop("track_class_name", "")
-        control_class_name = props.pop("control_class_name", "")
-
         return SliderRoot.create(
             SliderControl.create(
                 SliderTrack.create(
-                    SliderIndicator.create(
-                        class_name=cn(ClassNames.INDICATOR, indicator_class_name)
-                    ),
+                    SliderIndicator.create(),
                     SliderThumb.create(),
-                    class_name=cn(ClassNames.TRACK, track_class_name),
                 ),
-                class_name=cn(ClassNames.CONTROL, control_class_name),
             ),
             **props,
         )

reflex_ui/components/base/switch.py

@@ -64,6 +64,7 @@ class SwitchRoot(SwitchBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the switch root component."""
+        props["data-slot"] = "switch"
         cls.set_class_name(ClassNames.ROOT, props)
         return super().create(*children, **props)
 
@@ -79,6 +80,7 @@ class SwitchThumb(SwitchBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the switch thumb component."""
+        props["data-slot"] = "switch-thumb"
         cls.set_class_name(ClassNames.THUMB, props)
         return super().create(*children, **props)
 

reflex_ui/components/base/tooltip.py

@@ -36,27 +36,6 @@ def import_var(self):
         return ImportVar(tag="Tooltip", package_path="", install=False)
 
 
-class TooltipProvider(TooltipBaseComponent):
-    """Provider component for tooltips."""
-
-    tag = "Tooltip.Provider"
-
-    # How long to wait before opening a tooltip. Specified in milliseconds.
-    delay: Var[int]
-
-    # How long to wait before closing a tooltip. Specified in milliseconds.
-    close_delay: Var[int]
-
-    # Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds. Defaults to 400.
-    timeout: Var[int]
-
-    @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the tooltip provider component."""
-        props["data-slot"] = "tooltip-provider"
-        return super().create(*children, **props)
-
-
 class TooltipRoot(TooltipBaseComponent):
     """Root component for a tooltip."""
 
@@ -92,7 +71,28 @@ class TooltipRoot(TooltipBaseComponent):
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the tooltip root component."""
-        props["data-slot"] = "tooltip-root"
+        props["data-slot"] = "tooltip"
+        return super().create(*children, **props)
+
+
+class TooltipProvider(TooltipBaseComponent):
+    """Provider component for tooltips."""
+
+    tag = "Tooltip.Provider"
+
+    # How long to wait before opening a tooltip. Specified in milliseconds.
+    delay: Var[int]
+
+    # How long to wait before closing a tooltip. Specified in milliseconds.
+    close_delay: Var[int]
+
+    # Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds. Defaults to 400.
+    timeout: Var[int]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the tooltip provider component."""
+        props["data-slot"] = "tooltip-provider"
         return super().create(*children, **props)