Fix misc issues with Dialog v2 (#3444)

* fixes styling issues

* deprecates old Dialog component

* Update generated/components.json

* moves Dialog and ConfirmationDialog to drafts directory

* adds line breaks in Dialog v2 props table's Type column to preserve the readability of the Descriptioncolumn

* adds changeset

* Update generated/components.json

* fixes import path in deprecated Dialog types test

* updates snapshots

* updates import path for ConfirmationDialog checkExports test

* updates tests

* NavList snapshot updates for some reason?

* un-deprecate Dialog

* mv draft Dialog types test

* test(vrt): update snapshots

* moves test files

* use IconButton instead of CloseButton

* correct path to prop data in draft Dialog docs

* update confirmation button snapshots

* updates ConfirmationDialog tests for the newer Button

---------

Co-authored-by: mperrotti <[email protected]>
Co-authored-by: Armagan Ersoz <[email protected]>

.changeset/strange-geese-drive.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Moves the new Dialog and ConfirmationDialog component to the drafts directory
+
+<!-- Changed components: Dialog -->

docs/content/Dialog.mdx

@@ -4,7 +4,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/Dialog
 ---
 
-import data from '../../src/Dialog.docs.json'
+import data from '../../src/Dialog/Dialog.docs.json'
 
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 

docs/content/drafts/Dialog.mdx

@@ -4,7 +4,7 @@ componentId: dialog
 status: Draft
 ---
 
-import data from '../../../src/Dialog/Dialog.docs.json'
+import data from '../../../src/drafts/Dialog2/Dialog.docs.json'
 
 ```js
 import {Dialog} from '@primer/react/drafts'

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -70,8 +70,6 @@
       url: /CounterLabel
     - title: Details
       url: /Details
-    - title: Dialog
-      url: /Dialog
     - title: Flash
       url: /Flash
     - title: FormControl

src/DataTable/ErrorDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog} from '../drafts/Dialog2/ConfirmationDialog'
 
 export type TableErrorDialogProps = React.PropsWithChildren<{
   /**

src/Dialog/Dialog.docs.json

@@ -1,58 +1,54 @@
 {
-  "id": "drafts_dialog",
+  "id": "dialog",
   "name": "Dialog",
-  "status": "draft",
+  "status": "alpha",
   "a11yReviewed": false,
   "stories": [],
   "props": [
     {
-      "name": "title",
-      "type": "React.ReactNode",
-      "description": "Title of the Dialog. Also serves as the aria-label for this Dialog."
+      "name": "isOpen",
+      "type": "boolean",
+      "description": "Whether or not the dialog is open"
     },
     {
-      "name": "subtitle",
-      "type": "React.ReactNode",
-      "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog."
+      "name": "onDismiss",
+      "type": "() => void",
+      "description": "Function that will be called when the dialog is closed"
     },
     {
-      "name": "renderHeader",
-      "type": "React.FunctionComponent<React.PropsWithChildren<DialogHeaderProps>>",
-      "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles."
+      "name": "returnFocusRef",
+      "type": " React.RefObject<HTMLElement>",
+      "description": "The element to restore focus back to after the `Dialog` is closed"
     },
     {
-      "name": "renderBody",
-      "type": "React.FunctionComponent<React.PropsWithChildren<DialogProps>>",
-      "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles."
+      "name": "initialFocusRef",
+      "type": " React.RefObject<HTMLElement>",
+      "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
     },
     {
-      "name": "renderFooter",
-      "type": "React.FunctionComponent<React.PropsWithChildren<DialogProps>>",
-      "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles."
+      "name": "aria-labelledby",
+      "type": "string",
+      "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
     },
     {
-      "name": "footerButtons",
-      "type": "DialogButtonProps[]",
-      "description": "Specifies the buttons to be rendered in the Dialog footer."
+      "name": "aria-label",
+      "type": "string",
+      "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
     },
     {
-      "name": "onClose",
-      "type": "(gesture: 'close-button' | 'escape') => void",
-      "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')."
-    },
-    {
-      "name": "role",
-      "type": "'dialog' | 'alertdialog'",
-      "description": "The ARIA role to assign to this dialog."
-    },
-    {
-      "name": "width",
-      "type": "'small' | 'medium' | 'large' | 'xlarge'"
-    },
-    {
-      "name": "height",
-      "type": "'small' | 'large' | 'auto'"
+      "name": "sx",
+      "type": "SystemStyleObject"
     }
   ],
-  "subcomponents": []
+  "subcomponents": [
+    {
+      "name": "Dialog.Header",
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ]
+    }
+  ]
 }

src/__tests__/Dialog.test.tsx → src/Dialog/Dialog.test.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text} from '..'
+import {Box, Dialog, Text} from '..'
 import {Button} from '../deprecated'
 import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
@@ -78,7 +78,7 @@ describe('Dialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog', {
+  checkExports('Dialog/Dialog', {
     default: Dialog,
   })