feat: use Heading JSX and apply margin to all heading levels (#4999)

Author: michaelokolo

packages/sdk-components-react-radix/src/accordion.tsx

@@ -6,7 +6,6 @@ import {
   type RefAttributes,
   useState,
   useEffect,
-  createElement,
 } from "react";
 import {
   Root,
@@ -53,21 +52,13 @@ export const AccordionItem = forwardRef<
 
 const defaultTag = "h3";
 type Tag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-type Props = ComponentPropsWithoutRef<typeof Header> & { tag?: Tag };
+type Props = ComponentProps<typeof Header> & { tag?: Tag };
 export const AccordionHeader = forwardRef<HTMLHeadingElement, Props>(
   ({ tag: legacyTag, ...props }, ref) => {
-    const tag = getTagFromProps(props) ?? legacyTag ?? defaultTag;
+    const Heading = getTagFromProps(props) ?? legacyTag ?? defaultTag;
     return (
       <Header asChild>
-        {createElement(tag, {
-          ...props,
-          ref,
-          style: {
-            ...(props.style || {}),
-            marginTop: 0,
-            marginBottom: 0,
-          },
-        })}
+        <Heading ref={ref} {...props} />
       </Header>
     );
   }

packages/sdk-components-react-radix/src/accordion.ws.ts

@@ -61,12 +61,72 @@ export const metaAccordionHeader: WsComponentMeta = {
     descendants: [radix.AccordionTrigger],
   },
   presetStyle: {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
+    h1: [
+      ...h1,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
+    h2: [
+      ...h2,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
+    h3: [
+      ...h3,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
+    h4: [
+      ...h4,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
+    h5: [
+      ...h5,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
+    h6: [
+      ...h6,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
   },
   initialProps: ["tag"],
   props: {