Fix Dialog example (#2083)

* import Dialog v2 instead of old Dialog * Revert "import Dialog v1 instead of old Dialog" This reverts commit 8ac1080. * move the new Dialog to drafts * undeprecate the legacy dialog * Update docs/content/drafts/Dialog.mdx Co-authored-by: Cole Bemis <colebemis@github.com> * update navigation menu * Create funny-hats-sing.md Co-authored-by: Cole Bemis <colebemis@github.com>
primer · May 24, 2022 · ea69ccd · ea69ccd
1 parent 387e2f4
commit ea69ccd
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 48 deletions.
diff --git a/.changeset/funny-hats-sing.md b/.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'
+```
diff --git a/docs/content/deprecated/Dialog.md → docs/content/Dialog.md b/docs/content/deprecated/Dialog.md → 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)

diff --git a/docs/content/Dialog.mdx → docs/content/drafts/Dialog.mdx b/docs/content/Dialog.mdx → 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])

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -146,8 +146,10 @@
       url: /Truncate
     - title: UnderlineNav
       url: /UnderlineNav
-# - title: Drafts
-#   children:
+- title: Drafts
+  children:
+    - title: Dialog v2
+      url: /drafts/Dialog
 - title: Deprecated
   children:
     - title: ActionList (legacy)
@@ -162,8 +164,6 @@
       url: /deprecated/ChoiceFieldset
     - title: ChoiceInputField
       url: /deprecated/ChoiceInputField
-    - title: Dialog (legacy)
-      url: /deprecated/Dialog
     - title: Dropdown
       url: /deprecated/Dropdown
     - title: DropdownMenu

diff --git a/src/drafts/index.ts b/src/drafts/index.ts
@@ -5,3 +5,4 @@
  *  example: import {ActionList} from '@primer/react/drafts
  */
 export * from '../NavList'
+export * from '../Dialog/Dialog'