fix: Add displayName to components (chakra-ui#10422)

moczolaszlo · web-flow · commit 3243444011aa · 2025-10-28T11:58:41.000Z
feat: Add displayName to components
diff --git a/packages/react/src/components/aspect-ratio/aspect-ratio.tsx b/packages/react/src/components/aspect-ratio/aspect-ratio.tsx
@@ -62,3 +62,5 @@ export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
     )
   },
 )
+
+AspectRatio.displayName = "AspectRatio"
diff --git a/packages/react/src/components/badge/badge.tsx b/packages/react/src/components/badge/badge.tsx
@@ -17,5 +17,7 @@ export interface BadgeProps extends HTMLChakraProps<"span", BadgeBaseProps> {}
 
 export const Badge = withContext<HTMLSpanElement, BadgeProps>("span")
 
+Badge.displayName = "Badge"
+
 export const BadgePropsProvider =
   PropsProvider as React.Provider<BadgeBaseProps>
diff --git a/packages/react/src/components/bleed/bleed.tsx b/packages/react/src/components/bleed/bleed.tsx
@@ -68,3 +68,5 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     )
   },
 )
+
+Bleed.displayName = "Bleed"
diff --git a/packages/react/src/components/button/button-group.tsx b/packages/react/src/components/button/button-group.tsx
@@ -22,3 +22,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     )
   },
 )
+
+ButtonGroup.displayName = "ButtonGroup"
diff --git a/packages/react/src/components/button/button.tsx b/packages/react/src/components/button/button.tsx
@@ -87,5 +87,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 )
 
+Button.displayName = "Button"
+
 export const ButtonPropsProvider =
   PropsProvider as React.Provider<ButtonBaseProps>
diff --git a/packages/react/src/components/button/close-button.tsx b/packages/react/src/components/button/close-button.tsx
@@ -14,3 +14,5 @@ export const CloseButton = React.forwardRef<
     </IconButton>
   )
 })
+
+CloseButton.displayName = "CloseButton"
diff --git a/packages/react/src/components/button/icon-button.tsx b/packages/react/src/components/button/icon-button.tsx
@@ -18,3 +18,5 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     )
   },
 )
+
+IconButton.displayName = "IconButton"
diff --git a/packages/react/src/components/checkmark/checkmark.tsx b/packages/react/src/components/checkmark/checkmark.tsx
@@ -63,3 +63,5 @@ export const Checkmark = forwardRef<SVGSVGElement, CheckmarkProps>(
     )
   },
 )
+
+Checkmark.displayName = "Checkmark"
diff --git a/packages/react/src/components/circle/index.tsx b/packages/react/src/components/circle/index.tsx
@@ -11,3 +11,5 @@ export const Circle = forwardRef<HTMLDivElement, SquareProps>(
     return <Square size={size} ref={ref} borderRadius="9999px" {...rest} />
   },
 )
+
+Circle.displayName = "Circle"
diff --git a/packages/react/src/components/code/code.tsx b/packages/react/src/components/code/code.tsx
@@ -17,4 +17,6 @@ export interface CodeProps extends HTMLChakraProps<"code", CodeBaseProps> {}
 
 export const Code = withContext<HTMLElement, CodeProps>("code")
 
+Code.displayName = "Code"
+
 export const CodePropsProvider = PropsProvider as React.Provider<CodeBaseProps>
diff --git a/packages/react/src/components/container/container.tsx b/packages/react/src/components/container/container.tsx
@@ -20,5 +20,7 @@ export interface ContainerProps
 
 export const Container = withContext<HTMLDivElement, ContainerProps>("div")
 
+Container.displayName = "Container"
+
 export const ContainerPropsProvider =
   PropsProvider as React.Provider<ContainerBaseProps>
diff --git a/packages/react/src/components/em/index.tsx b/packages/react/src/components/em/index.tsx
@@ -9,3 +9,5 @@ export const Em = chakra("em", {
     fontStyle: "italic",
   },
 })
+
+Em.displayName = "Em"
diff --git a/packages/react/src/components/flex/flex.tsx b/packages/react/src/components/flex/flex.tsx
@@ -53,3 +53,5 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>(
     )
   },
 )
+
+Flex.displayName = "Flex"
diff --git a/packages/react/src/components/float/float.tsx b/packages/react/src/components/float/float.tsx
@@ -112,3 +112,5 @@ export const Float = forwardRef<HTMLDivElement, FloatProps>(
     return <chakra.div ref={ref} css={styles} {...rest} />
   },
 )
+
+Float.displayName = "Float"
diff --git a/packages/react/src/components/grid/grid-item.tsx b/packages/react/src/components/grid/grid-item.tsx
@@ -55,3 +55,5 @@ export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
     return <chakra.div ref={ref} css={[styles, props.css]} {...rest} />
   },
 )
+
+GridItem.displayName = "GridItem"
diff --git a/packages/react/src/components/grid/grid.tsx b/packages/react/src/components/grid/grid.tsx
@@ -58,3 +58,5 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     )
   },
 )
+
+Grid.displayName = "Grid"
diff --git a/packages/react/src/components/group/group.tsx b/packages/react/src/components/group/group.tsx
@@ -177,3 +177,5 @@ export const Group = memo(
     )
   }),
 )
+
+Group.displayName = "Group"
diff --git a/packages/react/src/components/heading/index.tsx b/packages/react/src/components/heading/index.tsx
@@ -18,5 +18,7 @@ export interface HeadingProps
 
 export const Heading = withContext<HTMLHeadingElement, HeadingProps>("h2")
 
+Heading.displayName = "Heading"
+
 export const HeadingPropsProvider =
   PropsProvider as React.Provider<HeadingProps>
diff --git a/packages/react/src/components/icon/icon.tsx b/packages/react/src/components/icon/icon.tsx
@@ -40,4 +40,6 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 )
 
+Icon.displayName = "Icon"
+
 export const IconPropsProvider = PropsProvider as React.Provider<IconProps>
diff --git a/packages/react/src/components/image/image.tsx b/packages/react/src/components/image/image.tsx
@@ -45,3 +45,5 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
     )
   },
 )
+
+Image.displayName = "Image"
diff --git a/packages/react/src/components/kbd/kbd.tsx b/packages/react/src/components/kbd/kbd.tsx
@@ -17,4 +17,6 @@ export interface KbdProps extends HTMLChakraProps<"kbd", KbdBaseProps> {}
 
 export const Kbd = withContext<HTMLElement, KbdProps>("kbd")
 
+Kbd.displayName = "Kbd"
+
 export const KbdPropsProvider = PropsProvider as React.Provider<KbdProps>
diff --git a/packages/react/src/components/link/link.tsx b/packages/react/src/components/link/link.tsx
@@ -17,4 +17,6 @@ export interface LinkProps extends HTMLChakraProps<"a", LinkBaseProps> {}
 
 export const Link = withContext<HTMLAnchorElement, LinkProps>("a")
 
+Link.displayName = "Link"
+
 export const LinkPropsProvider = PropsProvider as React.Provider<LinkProps>
diff --git a/packages/react/src/components/loader/loader-overlay.tsx b/packages/react/src/components/loader/loader-overlay.tsx
@@ -13,3 +13,5 @@ export const LoaderOverlay = chakra("div", {
     gap: "2",
   },
 })
+
+LoaderOverlay.displayName = "LoaderOverlay"
diff --git a/packages/react/src/components/loader/loader.tsx b/packages/react/src/components/loader/loader.tsx
@@ -68,3 +68,5 @@ export const Loader = React.forwardRef<HTMLSpanElement, LoaderProps>(
     )
   },
 )
+
+Loader.displayName = "Loader"
diff --git a/packages/react/src/components/mark/index.tsx b/packages/react/src/components/mark/index.tsx
@@ -18,4 +18,6 @@ export interface MarkProps
 
 export const Mark = withContext<HTMLElement, MarkProps>("mark")
 
+Mark.displayName = "Mark"
+
 export const MarkPropsProvider = PropsProvider as React.Provider<MarkProps>
diff --git a/packages/react/src/components/quote/index.tsx b/packages/react/src/components/quote/index.tsx
@@ -10,3 +10,5 @@ export const Quote = chakra("q", {
     lineHeight: "1.2",
   },
 })
+
+Quote.displayName = "Quote"
diff --git a/packages/react/src/components/radiomark/radiomark.tsx b/packages/react/src/components/radiomark/radiomark.tsx
@@ -48,3 +48,5 @@ export const Radiomark = forwardRef<HTMLSpanElement, RadiomarkProps>(
     )
   },
 )
+
+Radiomark.displayName = "Radiomark"
diff --git a/packages/react/src/components/separator/separator.tsx b/packages/react/src/components/separator/separator.tsx
@@ -38,5 +38,7 @@ export const Separator = forwardRef<HTMLSpanElement, SeparatorProps>(
   },
 )
 
+Separator.displayName = "Separator"
+
 export const SeparatorPropsProvider =
   PropsProvider as React.Provider<SeparatorBaseProps>
diff --git a/packages/react/src/components/simple-grid/simple-grid.tsx b/packages/react/src/components/simple-grid/simple-grid.tsx
@@ -47,6 +47,8 @@ export const SimpleGrid = forwardRef<HTMLDivElement, SimpleGridProps>(
   },
 )
 
+SimpleGrid.displayName = "SimpleGrid"
+
 function toPx(n: string | number) {
   return typeof n === "number" ? `${n}px` : n
 }
diff --git a/packages/react/src/components/skeleton/skeleton.tsx b/packages/react/src/components/skeleton/skeleton.tsx
@@ -23,6 +23,8 @@ export interface SkeletonProps
 
 export const Skeleton = withContext<HTMLDivElement, SkeletonProps>("div")
 
+Skeleton.displayName = "Skeleton"
+
 export const SkeletonPropsProvider =
   PropsProvider as React.Provider<SkeletonProps>
 
@@ -44,6 +46,8 @@ export const SkeletonCircle = React.forwardRef<
   )
 })
 
+SkeletonCircle.displayName = "SkeletonCircle"
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface SkeletonTextProps extends SkeletonProps {
@@ -68,3 +72,5 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     )
   },
 )
+
+SkeletonText.displayName = "SkeletonText"
diff --git a/packages/react/src/components/skip-nav/skip-nav-content.tsx b/packages/react/src/components/skip-nav/skip-nav-content.tsx
@@ -25,3 +25,5 @@ export const SkipNavContent = forwardRef<HTMLDivElement, SkipNavContentProps>(
     )
   },
 )
+
+SkipNavContent.displayName = "SkipNavContent"
diff --git a/packages/react/src/components/skip-nav/skip-nav-link.tsx b/packages/react/src/components/skip-nav/skip-nav-link.tsx
@@ -38,3 +38,5 @@ export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
     )
   },
 )
+
+SkipNavLink.displayName = "SkipNavLink"
diff --git a/packages/react/src/components/span/index.tsx b/packages/react/src/components/span/index.tsx
@@ -5,3 +5,5 @@ import { type HTMLChakraProps, chakra } from "../../styled-system"
 export interface SpanProps extends HTMLChakraProps<"span"> {}
 
 export const Span = chakra("span")
+
+Span.displayName = "Span"
diff --git a/packages/react/src/components/spinner/spinner.tsx b/packages/react/src/components/spinner/spinner.tsx
@@ -18,5 +18,7 @@ export interface SpinnerProps
 
 export const Spinner = withContext<HTMLSpanElement, SpinnerProps>("span")
 
+Spinner.displayName = "Spinner"
+
 export const SpinnerPropsProvider =
   PropsProvider as React.Provider<SpinnerProps>
diff --git a/packages/react/src/components/square/index.tsx b/packages/react/src/components/square/index.tsx
@@ -31,3 +31,5 @@ export const Square = forwardRef<HTMLDivElement, SquareProps>(
     )
   },
 )
+
+Square.displayName = "Square"
diff --git a/packages/react/src/components/stack/h-stack.tsx b/packages/react/src/components/stack/h-stack.tsx
@@ -13,3 +13,5 @@ export const HStack = forwardRef<HTMLDivElement, StackProps>(
     return <Stack align="center" {...props} direction="row" ref={ref} />
   },
 )
+
+HStack.displayName = "HStack"
diff --git a/packages/react/src/components/stack/stack.tsx b/packages/react/src/components/stack/stack.tsx
@@ -117,3 +117,5 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     )
   },
 )
+
+Stack.displayName = "Stack"
diff --git a/packages/react/src/components/stack/v-stack.tsx b/packages/react/src/components/stack/v-stack.tsx
@@ -13,3 +13,5 @@ export const VStack = forwardRef<HTMLDivElement, StackProps>(
     return <Stack align="center" {...props} direction="column" ref={ref} />
   },
 )
+
+VStack.displayName = "VStack"
diff --git a/packages/react/src/components/strong/index.tsx b/packages/react/src/components/strong/index.tsx
@@ -7,3 +7,5 @@ export interface StrongProps extends HTMLChakraProps<"em"> {}
 export const Strong = chakra("strong", {
   base: { fontWeight: "semibold" },
 })
+
+Strong.displayName = "Strong"
diff --git a/packages/react/src/components/text/index.tsx b/packages/react/src/components/text/index.tsx
@@ -18,4 +18,6 @@ export interface TextProps
 
 export const Text = withContext<HTMLParagraphElement, TextProps>("p")
 
+Text.displayName = "Text"
+
 export const TextPropsProvider = PropsProvider as React.Provider<TextProps>
diff --git a/packages/react/src/components/textarea/textarea.tsx b/packages/react/src/components/textarea/textarea.tsx
@@ -24,5 +24,7 @@ export const Textarea = withContext<HTMLTextAreaElement, TextareaProps>(
   Field.Textarea,
 )
 
+Textarea.displayName = "Textarea"
+
 export const TextareaPropsProvider =
   PropsProvider as React.Provider<TextareaProps>

Original file line number	Diff line number	Diff line change
`@@ -62,3 +62,5 @@ export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(`
`62`	`62`	`)`
`63`	`63`	`},`
`64`	`64`	`)`
	`65`	`+`
	`66`	`+AspectRatio.displayName = "AspectRatio"`
Original file line number	Diff line number	Diff line change
`@@ -68,3 +68,5 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(`
`68`	`68`	`)`
`69`	`69`	`},`
`70`	`70`	`)`
	`71`	`+`
	`72`	`+Bleed.displayName = "Bleed"`
Original file line number	Diff line number	Diff line change
`@@ -22,3 +22,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(`
`22`	`22`	`)`
`23`	`23`	`},`
`24`	`24`	`)`
	`25`	`+`
	`26`	`+ButtonGroup.displayName = "ButtonGroup"`
Original file line number	Diff line number	Diff line change
`@@ -87,5 +87,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(`
`87`	`87`	`},`
`88`	`88`	`)`
`89`	`89`
	`90`	`+Button.displayName = "Button"`
	`91`	`+`
`90`	`92`	`export const ButtonPropsProvider =`
`91`	`93`	`PropsProvider as React.Provider<ButtonBaseProps>`
Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,5 @@ export const CloseButton = React.forwardRef<`
`14`	`14`	`</IconButton>`
`15`	`15`	`)`
`16`	`16`	`})`
	`17`	`+`
	`18`	`+CloseButton.displayName = "CloseButton"`
Original file line number	Diff line number	Diff line change
`@@ -18,3 +18,5 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(`
`18`	`18`	`)`
`19`	`19`	`},`
`20`	`20`	`)`
	`21`	`+`
	`22`	`+IconButton.displayName = "IconButton"`
Original file line number	Diff line number	Diff line change
`@@ -63,3 +63,5 @@ export const Checkmark = forwardRef<SVGSVGElement, CheckmarkProps>(`
`63`	`63`	`)`
`64`	`64`	`},`
`65`	`65`	`)`
	`66`	`+`
	`67`	`+Checkmark.displayName = "Checkmark"`
Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,5 @@ export const Circle = forwardRef<HTMLDivElement, SquareProps>(`
`11`	`11`	`return <Square size={size} ref={ref} borderRadius="9999px" {...rest} />`
`12`	`12`	`},`
`13`	`13`	`)`
	`14`	`+`
	`15`	`+Circle.displayName = "Circle"`