Merge 1c21854 into 52c8d22

.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,
   })