Merge branch 'main' into hectahertz/selectpanel-aria-multiselectable

Author: hectahertz

.changeset/funny-hats-sing.md

@@ -0,0 +1,10 @@
+---
+"@primer/react": patch
+---
+
+Export new Dialog component from the `@primer/react/drafts` bundle:
+
+```diff
+- import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog'
++ import {Dialog} from '@primer/react/drafts'
+```

docs/content/deprecated/Dialog.md renamed to docs/content/Dialog.md

@@ -1,44 +1,8 @@
 ---
-title: Dialog (legacy)
-status: Deprecated
+title: Dialog
+status: Alpha
 ---
 
-## Deprecation
-
-Use the [new version of Dialog](/Dialog) instead.
-
-**Before**
-
-```jsx deprecated
-<Dialog isOpen={open} onDismiss={() => setOpen(false)} aria-labelledby="header-id">
-  <Dialog.Header id="header-id">Title</Dialog.Header>
-  <Box p={3}>
-    <Text fontFamily="sans-serif">Some content</Text>
-  </Box>
-</Dialog>
-```
-
-**After**
-
-```jsx deprecated
-{
-  open && (
-    <Dialog
-      title="Dialog example"
-      subtitle={
-        <>
-          This is a <b>description</b> of the dialog.
-        </>
-      }
-      footerButtons={[{content: 'Ok', onClick: () => setOpen(false)}]}
-      onClose={() => setOpen(false)}
-    >
-      <Text fontFamily="sans-serif">Some content</Text>
-    </Dialog>
-  )
-}
-```
-
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 
 You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
@@ -57,7 +21,7 @@ If you're running into z-index issues or are rendering the component inside of a
 
 ### Examples
 
-```jsx deprecated live
+```jsx live
 <State default={false}>
   {([isOpen, setIsOpen]) => {
     const returnFocusRef = React.useRef(null)
@@ -85,7 +49,7 @@ If you're running into z-index issues or are rendering the component inside of a
 
 You can also pass any non-text content into the header:
 
-```jsx deprecated live
+```jsx live
 <State default={false}>
   {([isOpen, setIsOpen]) => {
     const returnFocusRef = React.useRef(null)

docs/content/Dialog.mdx renamed to docs/content/drafts/Dialog.mdx

@@ -1,10 +1,14 @@
 ---
-title: Dialog
+title: Dialog v2
 componentId: dialog
-status: Alpha
+status: Draft
 ---
 
-import State from '../components/State'
+```js
+import {Dialog} from '@primer/react/drafts'
+```
+
+import State from '../../components/State'
 
 The dialog component the Primer implementation of the ARIA design pattern [Dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). A dialog is a type of overlay that can be used for confirming actions, asking for disambiguation, and presenting small forms. They generally allow the user to focus on a quick task without having to navigate to a different page.
 
@@ -45,7 +49,7 @@ By default, the Dialog component implements the design and interactions defined
 
 ### Example
 
-```jsx live
+```jsx live drafts
 <State default={false}>
   {([isOpen, setIsOpen]) => {
     const openDialog = React.useCallback(() => setIsOpen(true), [setIsOpen])