use display name for styled custom element (#4403)

* use display name for styled custom element * changeset * ensure Styled doesnt change displayName
primer · Apr 16, 2024 · a8d751d · a8d751d
1 parent 302ad47
commit a8d751d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/.changeset/loud-drinks-happen.md b/.changeset/loud-drinks-happen.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Improve display names for React components built from Custom Elements
diff --git a/packages/react/src/utils/custom-element.ts b/packages/react/src/utils/custom-element.ts
@@ -13,13 +13,18 @@ export const createComponent = <I extends HTMLElement, E extends EventNames = {}
   events: E | undefined = undefined,
 ) => {
   const output = Object.assign(
-    styled(
-      create<I, E>({
-        tagName,
-        elementClass,
-        react: React,
-        events,
-      }),
+    Object.assign(
+      styled(
+        create<I, E>({
+          tagName,
+          elementClass,
+          react: React,
+          events,
+        }),
+      ),
+      {
+        displayName: rename(tagName),
+      },
     )(sx),
     {
       displayName: rename(tagName),