fix(dialog): fixing dialog displayNames for docgen

adevinta · Sep 11, 2023 · b905ed1 · b905ed1
1 parent 50e7b85
commit b905ed1
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 77 deletions.
diff --git a/packages/components/alert-dialog/src/index.ts b/packages/components/alert-dialog/src/index.ts
@@ -52,15 +52,3 @@ export const AlertDialog: FC<AlertDialogProps> & {
   Title: AlertDialogTitle,
   Trigger: AlertDialogTrigger,
 })
-
-AlertDialog.Action.displayName = 'AlertDialog.Action'
-AlertDialog.Body.displayName = 'AlertDialog.Body'
-AlertDialog.Cancel.displayName = 'AlertDialog.Cancel'
-AlertDialog.Content.displayName = 'AlertDialog.Content'
-AlertDialog.Description.displayName = 'AlertDialog.Description'
-AlertDialog.Footer.displayName = 'AlertDialog.Footer'
-AlertDialog.Header.displayName = 'AlertDialog.Header'
-AlertDialog.Overlay.displayName = 'AlertDialog.Overlay'
-AlertDialog.Portal.displayName = 'AlertDialog.Portal'
-AlertDialog.Title.displayName = 'AlertDialog.Title'
-AlertDialog.Trigger.displayName = 'AlertDialog.Trigger'
diff --git a/packages/components/chip/src/index.ts b/packages/components/chip/src/index.ts
@@ -18,7 +18,3 @@ export const Chip: FC<ChipProps> & {
   LeadingIcon: ChipLeadingIcon,
   ClearButton: ChipClearButton,
 })
-
-Chip.ClearButton.displayName = 'Chip.ClearButton'
-Chip.Content.displayName = 'Chip.Content'
-Chip.LeadingIcon.displayName = 'Chip.LeadingIcon'
diff --git a/packages/components/dialog/src/Dialog.tsx b/packages/components/dialog/src/Dialog.tsx
@@ -1,51 +1,10 @@
-import type { FC } from 'react'
+import * as RadixDialog from '@radix-ui/react-dialog'
+import { type ReactElement } from 'react'
 
-import { Body } from './DialogBody'
-import { Close } from './DialogClose'
-import { CloseButton } from './DialogCloseButton'
-import { Content } from './DialogContent'
-import { Description } from './DialogDescription' // aria-describedby
-import { Footer } from './DialogFooter'
-import { Header } from './DialogHeader'
-import { Overlay } from './DialogOverlay'
-import { Portal } from './DialogPortal'
-import { Root, type RootProps } from './DialogRoot'
-import { Title } from './DialogTitle' // aria-labelledby
-import { Trigger } from './DialogTrigger'
+export type DialogProps = RadixDialog.DialogProps
 
-Trigger.displayName = 'Dialog.Trigger'
-Portal.displayName = 'Dialog.Portal'
-Overlay.displayName = 'Dialog.Overlay'
-Content.displayName = 'Dialog.Content'
-Header.displayName = 'Dialog.Header'
-Body.displayName = 'Dialog.Body'
-Footer.displayName = 'Dialog.Footer'
-CloseButton.displayName = 'Dialog.CloseButton'
-Title.displayName = 'Dialog.Title'
-Description.displayName = 'Dialog.Description'
+export const Dialog = ({ children, ...rest }: DialogProps): ReactElement => (
+  <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>
+)
 
-export const Dialog: FC<RootProps> & {
-  Trigger: typeof Trigger
-  Portal: typeof Portal
-  Overlay: typeof Overlay
-  Content: typeof Content
-  Header: typeof Header
-  Body: typeof Body
-  Footer: typeof Footer
-  Close: typeof Close
-  CloseButton: typeof CloseButton
-  Title: typeof Title
-  Description: typeof Description
-} = Object.assign(Root, {
-  Trigger,
-  Portal,
-  Overlay,
-  Content,
-  Header,
-  Body,
-  Footer,
-  Close,
-  CloseButton,
-  Title,
-  Description,
-})
+Dialog.displayName = 'Dialog.Root'
diff --git a/packages/components/dialog/src/DialogRoot.tsx b/packages/components/dialog/src/DialogRoot.tsx
diff --git a/packages/components/dialog/src/index.ts b/packages/components/dialog/src/index.ts
@@ -1,4 +1,45 @@
-export { type RootProps as DialogProps } from './DialogRoot'
+import type { FC } from 'react'
+
+import { Dialog as Root, type DialogProps } from './Dialog'
+import { Body } from './DialogBody'
+import { Close } from './DialogClose'
+import { CloseButton } from './DialogCloseButton'
+import { Content } from './DialogContent'
+import { Description } from './DialogDescription' // aria-describedby
+import { Footer } from './DialogFooter'
+import { Header } from './DialogHeader'
+import { Overlay } from './DialogOverlay'
+import { Portal } from './DialogPortal'
+import { Title } from './DialogTitle' // aria-labelledby
+import { Trigger } from './DialogTrigger'
+
+export const Dialog: FC<DialogProps> & {
+  Trigger: typeof Trigger
+  Portal: typeof Portal
+  Overlay: typeof Overlay
+  Content: typeof Content
+  Header: typeof Header
+  Body: typeof Body
+  Footer: typeof Footer
+  Close: typeof Close
+  CloseButton: typeof CloseButton
+  Title: typeof Title
+  Description: typeof Description
+} = Object.assign(Root, {
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Header,
+  Body,
+  Footer,
+  Close,
+  CloseButton,
+  Title,
+  Description,
+})
+
+export { type DialogProps } from './Dialog'
 export { type ContentProps as DialogContentProps } from './DialogContent'
 export { type HeaderProps as DialogHeaderProps } from './DialogHeader'
 export { type BodyProps as DialogBodyProps } from './DialogBody'
@@ -10,5 +51,3 @@ export { type TitleProps as DialogTitleProps } from './DialogTitle'
 export { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'
 export { type CloseProps as DialogCloseProps } from './DialogClose'
 export { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'
-
-export { Dialog } from './Dialog'