accordion default classname (#2628)

reflex/components/radix/primitives/accordion.py

@@ -428,7 +428,9 @@ class AccordionRoot(AccordionComponent):
 
     def _get_imports(self):
         return imports.merge_imports(
-            super()._get_imports(), self._var_data.imports if self._var_data else {}
+            super()._get_imports(),
+            self._var_data.imports if self._var_data else {},
+            {"@emotion/react": [imports.ImportVar(tag="keyframes")]},
         )
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -442,6 +444,26 @@ class AccordionRoot(AccordionComponent):
             "on_value_change": lambda e0: [e0],
         }
 
+    def _get_custom_code(self) -> str:
+        return """
+const slideDown = keyframes`
+from {
+  height: 0;
+}
+to {
+  height: var(--radix-accordion-content-height);
+}
+`
+const slideUp = keyframes`
+from {
+  height: var(--radix-accordion-content-height);
+}
+to {
+  height: 0;
+}
+`
+"""
+
 
 class AccordionItem(AccordionComponent):
     """An accordion component."""
@@ -493,25 +515,23 @@ class AccordionItem(AccordionComponent):
         # The item requires a value to toggle (use a random unique name if not provided).
         value = props.pop("value", get_unique_variable_name())
 
+        if "AccordionItem" not in (
+            cls_name := props.pop("class_name", "AccordionItem")
+        ):
+            cls_name = f"{cls_name} AccordionItem"
+
         if (header is not None) and (content is not None):
             children = [
                 AccordionHeader.create(
                     AccordionTrigger.create(
                         header,
-                        Icon.create(
+                        AccordionIcon.create(),
-                            tag="chevron_down",
-                            class_name="AccordionChevron",
-                            display="inline-block",
-                        ),
-                        class_name="AccordionTrigger",
                     ),
                 ),
-                AccordionContent.create(content, class_name="AccordionContent"),
+                AccordionContent.create(content),
             ]
 
-        return super().create(
+        return super().create(*children, value=value, **props, class_name=cls_name)
-            *children, value=value, **props, class_name="AccordionItem"
-        )
 
 
 class AccordionHeader(AccordionComponent):
@@ -521,12 +541,26 @@ class AccordionHeader(AccordionComponent):
 
     alias = "RadixAccordionHeader"
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion header component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion header Component.
+        """
+        if "AccordionHeader" not in (
+            cls_name := props.pop("class_name", "AccordionHeader")
+        ):
+            cls_name = f"{cls_name} AccordionHeader"
+
+        return super().create(*children, class_name=cls_name, **props)
+
     def _apply_theme(self, theme: Component):
-        self.style = Style(
+        self.style = Style({**self.style})
-            {
-                **self.style,
-            }
-        )
 
 
 class AccordionTrigger(AccordionComponent):
@@ -536,12 +570,48 @@ class AccordionTrigger(AccordionComponent):
 
     alias = "RadixAccordionTrigger"
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion trigger component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion trigger Component.
+        """
+        if "AccordionTrigger" not in (
+            cls_name := props.pop("class_name", "AccordionTrigger")
+        ):
+            cls_name = f"{cls_name} AccordionTrigger"
+
+        return super().create(*children, class_name=cls_name, **props)
+
     def _apply_theme(self, theme: Component):
-        self.style = Style(
+        self.style = Style({**self.style})
-            {
+
-                **self.style,
+
-            }
+class AccordionIcon(Icon):
-        )
+    """An accordion icon component."""
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion icon component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion icon Component.
+        """
+        if "AccordionChevron" not in (
+            cls_name := props.pop("class_name", "AccordionChevron")
+        ):
+            cls_name = f"{cls_name} AccordionChevron"
+
+        return super().create(tag="chevron_down", class_name=cls_name, **props)
 
 
 class AccordionContent(AccordionComponent):
@@ -551,38 +621,32 @@ class AccordionContent(AccordionComponent):
 
     alias = "RadixAccordionContent"
 
-    def _apply_theme(self, theme: Component):
+    @classmethod
-        self.style = Style(
+    def create(cls, *children, **props) -> Component:
-            {
+        """Create the Accordion content component.
-                **self.style,
-            }
-        )
 
-    def _get_imports(self):
+        Args:
-        return {
+            *children: The children of the component.
-            **super()._get_imports(),
+            **props: The properties of the component.
-            "@emotion/react": [imports.ImportVar(tag="keyframes")],
-        }
 
-    def _get_custom_code(self) -> str:
+        Returns:
-        return """
+            The Accordion content Component.
-const slideDown = keyframes`
-from {
-  height: 0;
-}
-to {
-  height: var(--radix-accordion-content-height);
-}
-`
-const slideUp = keyframes`
-from {
-  height: var(--radix-accordion-content-height);
-}
-to {
-  height: 0;
-}
-`
         """
+        if "AccordionContent" not in (
+            cls_name := props.pop("class_name", "AccordionContent")
+        ):
+            cls_name = f"{cls_name} AccordionContent"
+
+        return super().create(*children, class_name=cls_name, **props)
+
+    def _apply_theme(self, theme: Component):
+        self.style = Style({**self.style})
+
+    # def _get_imports(self):
+    #     return {
+    #         **super()._get_imports(),
+    #         "@emotion/react": [imports.ImportVar(tag="keyframes")],
+    #     }
 
 
 class Accordion(SimpleNamespace):
@@ -591,6 +655,7 @@ class Accordion(SimpleNamespace):
     content = staticmethod(AccordionContent.create)
     header = staticmethod(AccordionHeader.create)
     item = staticmethod(AccordionItem.create)
+    icon = staticmethod(AccordionIcon.create)
     root = staticmethod(AccordionRoot.create)
     trigger = staticmethod(AccordionTrigger.create)
 

reflex/components/radix/primitives/accordion.pyi

@@ -447,7 +447,7 @@ class AccordionHeader(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionHeader":
-        """Create the component.
+        """Create the Accordion header component.
 
         Args:
             *children: The children of the component.
@@ -458,13 +458,10 @@ class AccordionHeader(AccordionComponent):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Accordion header Component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
         """
         ...
 
@@ -528,7 +525,7 @@ class AccordionTrigger(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionTrigger":
-        """Create the component.
+        """Create the Accordion trigger component.
 
         Args:
             *children: The children of the component.
@@ -539,13 +536,88 @@ class AccordionTrigger(AccordionComponent):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Accordion trigger Component.
+        """
+        ...
 
-        Raises:
+class AccordionIcon(Icon):
-            TypeError: If an invalid child is passed.
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "AccordionIcon":
+        """Create the Accordion icon component.
+
+        Args:
+            *children: The children of the component.
+            size: The size of the icon in pixels.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The Accordion icon Component.
         """
         ...
 
@@ -609,7 +681,7 @@ class AccordionContent(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionContent":
-        """Create the component.
+        """Create the Accordion content component.
 
         Args:
             *children: The children of the component.
@@ -620,13 +692,10 @@ class AccordionContent(AccordionComponent):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Accordion content Component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
         """
         ...
 
@@ -634,6 +703,7 @@ class Accordion(SimpleNamespace):
     content = staticmethod(AccordionContent.create)
     header = staticmethod(AccordionHeader.create)
     item = staticmethod(AccordionItem.create)
+    icon = staticmethod(AccordionIcon.create)
     root = staticmethod(AccordionRoot.create)
     trigger = staticmethod(AccordionTrigger.create)